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>
2.3 KiB
description
| 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:
<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 × 24viewBox. - The SVG uses
fill="none"andstroke="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:iconspasses.pnpm run lint:json:iconspasses.