mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-13 13:48:26 +00:00
713b1fcd25
* Add metadata information * improve contribution * feat(docs): added new contribution guide * feat(docs): minor linting fix * feat(docs): update dead link * feat(docs): change layout, some stylistic change, et cetera * feat(docs): alter metadata example layout * feat(docs): update titles, split use case & tag guide * feat(docs): finetune some design guide images & make * feat(docs): finetune some design guide images & add icons to use case guide * feat(docs): added ux writing instructions & proofread markdowns to match these guidelines * feat(docs): updated design language / specification descriptions to better distinguish what is what * feat(docs): updated design language / specification descriptions to better distinguish what is what * feat(docs): changed some languages again * fix(icons): add design principle do/dont about diagonal lines * fix(icons): decrease blurriness of ideal pixel perfection pixel preview * fix(icons): remove color from pixel perfection previews * fix(icons): remove color from pixel perfection previews * fix(icons): reword symmerical icon rule * fix(icons): fix calendar design in density rule image * fix(icons): slightly adjust centered stroke rule text * Rename 'useCases' property to 'use-cases' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Update allowed SVG elements in code conventions Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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.
|