mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +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>
1.5 KiB
1.5 KiB
description
| description |
|---|
| Learn how to create Lucide icons in Figma. |
Figma template guide
This guide shows how to set up Figma for Lucide icons.
Set up the frame
Create each icon in its own frame.
Use a 24 × 24 pixel frame.
- Click the frame button, or press
F. - Draw a
24 × 24frame, or set the size in the right sidebar.
Design the icon inside this frame. Name the frame after the icon so Figma exports it as frame-name.svg.
Create your icon
Set up the stroke before drawing.
Draw in the frame with the pen tool. Open it from the toolbar or press P. After you start drawing, adjust the vector settings in the right sidebar.
Set the following:
- Vector
- Corner radius: 2px
- Stroke
- Stroke width: 2px
- Stroke alignment: center
Export or copy your icon
When your icon is ready, export it.
- Select the frame.
- Open the Export section in the right sidebar.
- Set the file type to SVG.
- Click Export.
You can also copy the SVG source.
- Select the frame.
- Right-click it.
- Choose Copy/Paste as.
- Choose Copy as SVG.
You now have an SVG to prepare for contribution.
Optimize your icon
You can optimize the exported SVG with Lucide Studio.
Check spacing in Figma
The design language requires at least 2 pixels of spacing between separate elements. In Figma, hold Option on macOS or Alt on Windows to check spacing.