mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
92 lines
2.3 KiB
Markdown
92 lines
2.3 KiB
Markdown
|
---
|
|||
|
|
description: Learn about allowed SVG elements and attributes, optimization, and other code conventions.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 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](https://studio.lucide.dev/?utm_source=lucide.dev&utm_medium=design-guide) 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>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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](./metadata-conventions/) for details.
|
|||
|
|
|
|||
|
|
## Validation
|
|||
|
|
|
|||
|
|
Before submitting SVG changes, format and validate the icon files:
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
pnpm run lint:icons
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
You can automatically format SVG files with Prettier:
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
pnpm run lint:icons-fix
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
To check icon names, categories, metadata, and SVG structure together, run:
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
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.
|