SVG conventions

Before you add an icon to Lucide, make sure its SVG is readable and optimized.

Global attributes

Each icon uses these root SVG attributes:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <!-- SVGElements -->
</svg>

Minify paths

Path data can get large. Minify it to keep SVG files small.

Use Lucide Studio to tidy paths to 3 decimal places.

Allowed elements

SVG files may only contain simple path and shape elements. These elements may only use sizing and position attributes.

Only these elements and attributes are allowed:

• <path d>
• <line x1 y1 x2 y2>
• <polygon points>
• <polyline points>
• <circle cx cy r>
• <ellipse cx cy rx ry>
• <rect x y width height rx>

Do not use transforms, filters, fills, or explicit stroke colors.

Never use <use>. It can reduce file size, but referenced IDs may conflict when SVGs are embedded in HTML.

Metadata file

Each icon must also have a matching JSON file with contributors, use cases, tags, and categories.

See metadata conventions for details.

Validation

Before submitting SVG changes, format and validate the icon files:

pnpm run lint:icons

You can automatically format SVG files with Prettier:

pnpm run lint:icons-fix

To check icon names, categories, metadata, and SVG structure together, run:

pnpm run lint:icons:all

Checklist

Before opening a pull request, confirm that:

• The SVG uses the standard 24 × 24 viewBox.
• The SVG uses fill="none" and stroke="currentColor".
• Stroke width, line caps, and line joins match the Lucide defaults.
• Paths are tidy and use appropriate numeric precision.
• The SVG uses only allowed elements and attributes.
• The SVG does not use transforms, filters, fills, explicit strokes, or <use>.
• The icon has a matching JSON metadata file.
• pnpm run lint:icons passes.
• pnpm run lint:json:icons passes.