Lucide design language
Lucide is a consistent icon set, not a collection of unrelated icons. Every icon should feel like it belongs with the rest of the library.
This guide explains the visual rules behind Lucide icons and how to use them when designing new icons.
For the full rule list, see the icon design specification
1. Use a 24 × 24-pixel canvas
Icons must be designed on a 24 × 24-pixel canvas.
Use a 24 × 24 pixel canvas.
Don't use a canvas that is larger, smaller, or not square.
2. Keep a 1-pixel safe zone
Icons must have at least 1 pixel of padding between their strokes and the edge of the canvas.
Keep at least 1 pixel of padding around the icon.
Don't place strokes at the edge of the canvas. They may get clipped.
3. Use 2-pixel strokes
Strokes must be 2 pixels wide.
Use a 2-pixel stroke width.
Don't use thicker or thinner strokes, or mix stroke widths.
4. Use round line joins
Strokes must use round line joins.
Use round line joins.
Don't use miter or bevel line joins.
TIP
Round joins do not replace corner rounding. Most sharp corners still need a radius.
5. Use round line caps
Open paths must use round line caps.
Use round line caps on open paths.
Don't use butt or square line caps.
6. Use centered strokes
Strokes must be centered on their paths.
Keep strokes centered on their paths.
Don't use inside or outside strokes. They change how line joins appear, creating sharp inner corners.
7. Use consistent corner radii
Almost every sharp corner should be rounded.
Use rounded corners.
Don't use sharp corners.
Corner radius depends on the size of the element and the angle. For 90° angles:
Use a 2-pixel corner radius for shapes that are at least 8 pixels wide or tall.
Use a 1-pixel corner radius for shapes smaller than 8 pixels.
There are exceptions:
Diagonal lines that meet at a right angle usually need a 2.41 pixel radius (1+√2) to stay aligned to the grid.
Even very sharp corners usually need a small amount of rounding. The exact amount depends on the shape.
Avoid rounding corners where multiple lines meet.
Keep corners sharp where multiple lines meet so the icon scales well.
Don't round corners where more than two lines meet. This can make the icon scale poorly.
8. Keep at least 2 pixels between elements
Distinct elements must have at least 2 pixels of visual spacing between them.
Keep 2 pixels of spacing between distinct elements.
Don't use gaps smaller than 2 pixels between distinct elements.
This also applies inside shapes. Most inner gaps should be at least 2 pixels wide.
Keep at least 2 pixels of spacing inside shapes.
Don't use inner gaps smaller than 2 pixels.
You can test this by placing a 2-pixel-wide circle inside your shape.
If a 2-pixel-wide circle fits without overlapping, the gap is wide enough.
If the circle overlaps the shape, the gap should be wider.
The 2 pixel spacing also applies when elements visually connect or intersect.
Don't connect elements without keeping 2 pixels of spacing.
Don't use abrupt cuts where one element meets another.
9. Aim for consistent visual weight
Icons should have a similar visual weight when viewed alongside each other.
Match the visual weight of circle and square.
The first icon is too large. The last one is too small.
TIP
The amount and placement of strokes affect how heavy an icon looks. An icon with many close strokes can look heavier than a simpler icon, even with the same stroke width.
Place your icon next to circle or square, then blur both icons. Your icon should not look much lighter or darker than the reference icon.
10. Balance icons visually
Icons should look centered and balanced within the canvas.
Keep your icons visually centered.
This icon feels shifted toward the top left.
Symmetrical icons should remain geometrically centered.
Don't place symmetrical icons off-center for no good reason.
TIP
Geometric centering does not always look centered. Asymmetrical shapes may need a small adjustment.
Compare your icon with circle or square side by side and stacked vertically. If it looks shifted, adjust it.
11. Keep density low
Lucide icons should have a similar level of detail.
Simplify complex subjects, but keep the features that make them recognizable.
Don't add extra details that make the design feel crowded.
TIP
Dense areas and close strokes can make an icon look heavier than nearby icons.
View the icon at its intended size and blur it. Areas that turn dark may have too much detail.
12. Use smooth, simple curves
Curves should be smooth and as simple as the shape allows.
Prefer simple arcs and quadratic curves where possible.
Don't use uneven or unnecessarily complex curves.
TIP
When you need cubic Bézier curves, align their control points to avoid visible bumps.
Avoid extra control points. They make shapes harder to edit and can create small flaws.
13. Design for the pixel grid
Lucide icons should look sharp at small sizes, including on low-density displays.
Align coordinates, arc centers, and other geometric elements to the pixel grid when possible.
Don't place geometry off the pixel grid without a visual reason.
Also align subelements to the pixel grid.
Don't place subelements off-grid. They may become blurry on low-density displays.
In general try to align every diagonal line to the pixel grid.
Avoid placing diagonal lines off-grid. They will appear blurry and optically wider on low-density displays.
TIP
Pixel alignment should support the icon. Do not let it harm shape recognition, smooth curves, or visual balance.
14. Reuse established shapes
When creating a variant, keep the base icon geometry unless the new idea needs a change.
Reuse existing base icons exactly as they appear.
Don't change the geometry, placement, or orientation of base shapes.
Related icons should share shapes and visual patterns when possible.
Reuse elements from existing icons without change.
Don't redesign existing elements.
Common modifiers and elements should look consistent across the library.
Keep add-ons consistent in placement and size.
Don't use irregular placement or size compared to existing icons.
TIP
Preserving the base shape makes related icons work better when users switch between them.
Consistency with an existing icon should not override clarity, balance, or readability. Adjust the shape when needed.
Summary
When designing a Lucide icon:
- Use a 24 × 24 pixel canvas with at least 1 pixel of safe zone.
- Use 2 pixel centered strokes with round caps and joins.
- Round sharp corners using consistent radii appropriate for their size and geometry.
- Keep at least 2 pixels of spacing between distinct elements and, where possible, inside shapes.
- Match the visual weight of
circleandsquare. - Center icons visually, accounting for visual weight.
- Keep visual density low and remove unnecessary detail.
- Use smooth, simple curves without unnecessary control points.
- Align geometry to the pixel grid where possible.
- Reuse established shapes from existing Lucide icons.
When these guidelines conflict, prioritize clarity, visual balance, and consistency with the rest of Lucide.