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:

xml

<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.