hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-13 13:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: lower cased and at ref to rfc

Browse Source
This commit is contained in:
Jakob Guddas
2026-09-13 23:00:35 +02:00
parent 93dd84c0d0
commit 4f94ac6b77
1 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/contribute/icons/design-principles.md
+40 -36
View File
@@ -8,9 +8,13 @@ Lucide is a consistent icon set, not a collection of unrelated icons. Every icon
This guide explains the visual rules behind Lucide icons and how to use them when designing new icons.
::: info Requirement levels
This guide uses normative terms such as **must**, **should**, and **may** as defined in [RFC 2119](https://www.rfc-editor.org/info/rfc2119/).
:::
## 1. Use a 24 × 24-pixel canvas
Icons **MUST** be designed on a 24 × 24-pixel canvas.
Icons **must** be designed on a 24 × 24-pixel canvas.
:::: example
::: do ../../images/24px-24px.svg?raw=true
@@ -23,7 +27,7 @@ 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.
Icons **must** have at least 1 pixel of padding between their strokes and the edge of the canvas.
:::: example
::: do ../../images/1px-padding.svg?raw=true
@@ -36,7 +40,7 @@ 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.
Strokes **must** be 2 pixels wide.
:::: example
::: do ../../images/2px-stroke.svg?raw=true
@@ -49,7 +53,7 @@ Don't use **thicker or thinner** strokes, or **mix stroke widths**.
## 4. Use round line joins
Strokes **MUST** use round line joins.
Strokes **must** use round line joins.
:::: example
::: do ../../images/round-joints.svg?raw=true
@@ -66,7 +70,7 @@ Round joins do not replace corner rounding. Most sharp corners still need a radi
## 5. Use round line caps
Open paths **MUST** use round line caps.
Open paths **must** use round line caps.
:::: example
::: do ../../images/round-caps.svg?raw=true
@@ -79,7 +83,7 @@ Don't use **butt or square** line caps.
## 6. Use centered strokes
Strokes **MUST** be centered on their paths.
Strokes **must** be centered on their paths.
:::: example
::: do ../../images/centered-strokes.svg?raw=true
@@ -94,7 +98,7 @@ Don't use **inside or outside** strokes. They change how line joins appear, crea
Corner radius depends on the size and angle of the element.
### 7.1. Sharp corners **SHOULD** be rounded unless the geometry of the icon requires otherwise
### 7.1. Sharp corners **should** be rounded unless the geometry of the icon requires otherwise
:::: example
::: do ../../images/border-radius-correct.svg?raw=true
@@ -105,7 +109,7 @@ Don't use **sharp corners**.
:::
::::
### 7.2. Elements at least 8 pixels wide or tall **SHOULD** use a 2-pixel corner radius for 90° corners
### 7.2. Elements at least 8 pixels wide or tall **should** use a 2-pixel corner radius for 90° corners
:::: example
::: do ../../images/2px-border-radius.svg?raw=true
@@ -113,7 +117,7 @@ Use a **2-pixel corner radius** for shapes that are at least 8 pixels wide or ta
:::
::::
### 7.3. Elements smaller than 8 pixels **SHOULD** use a 1-pixel corner radius for 90° corners
### 7.3. Elements smaller than 8 pixels **should** use a 1-pixel corner radius for 90° corners
Use a **1-pixel corner radius** for shapes smaller than 8 pixels.
@@ -122,7 +126,7 @@ Use a **1-pixel corner radius** for shapes smaller than 8 pixels.
:::
::::
### 7.4. Diagonal lines meeting at a 90° angle **SHOULD** use a radius that preserves pixel-grid alignment
### 7.4. Diagonal lines meeting at a 90° angle **should** use a radius that preserves pixel-grid alignment
Diagonal lines that meet at a right angle usually need a **2.41 pixel** radius (1+√2) to stay aligned to the grid.
@@ -131,7 +135,7 @@ Diagonal lines that meet at a right angle usually need a **2.41 pixel** radius (
:::
::::
### 7.5. Other acute corners **SHOULD** use an appropriate amount of rounding based on their geometry
### 7.5. Other acute corners **should** use an appropriate amount of rounding based on their geometry
Even **very sharp corners** usually need a small amount of rounding. The exact amount depends on the shape.
@@ -140,9 +144,9 @@ Even **very sharp corners** usually need a small amount of rounding. The exact a
:::
::::
### 7.6. Corners where lines cross **MUST NOT** be rounded
### 7.6. Corners where lines cross **must not** be rounded
Corners where multiple lines meet **MUST NOT** be rounded. Keep corners sharp where multiple lines meet so the icon scales well.
Corners where multiple lines meet **must not** be rounded. Keep corners sharp where multiple lines meet so the icon scales well.
:::: example
::: do ../../images/border-radius-line-join.svg?raw=true
@@ -153,15 +157,15 @@ Don't round corners where more than two lines meet. This can make the icon scale
:::
::::
### 7.7. Non-outlined arrows **MUST NOT** be rounded
### 7.7. Non-outlined arrows **must not** be rounded
Non-outlined arrows **MUST NOT** be rounded.
Non-outlined arrows **must not** be rounded.
If the arrow is an outline shape, it **SHOULD** be rounded.
If the arrow is an outline shape, it **should** be rounded.
## 8. Keep at least 2 pixels between elements
### 8.1. Distinct elements **MUST** have at least 2 pixels of visual spacing between them
### 8.1. Distinct elements **must** have at least 2 pixels of visual spacing between them
:::: example
::: do ../../images/2px-element-spacing.svg?raw=true
@@ -172,9 +176,9 @@ Don't use gaps smaller than **2 pixels** between distinct elements.
:::
::::
### 8.2. Inner gaps **SHOULD** be at least 2 pixels wide
### 8.2. Inner gaps **should** be at least 2 pixels wide
The 2-pixel gap rule also applies inside shapes. Most inner gaps **SHOULD** be at least 2 pixels wide.
The 2-pixel gap rule also applies inside shapes. Most inner gaps **should** be at least 2 pixels wide.
:::: example
::: do ../../images/2px-inner-spacing.svg?raw=true
@@ -196,9 +200,9 @@ If the circle **overlaps** the shape, the gap should be **wider**.
:::
::::
### 8.3. Visual spacing **SHOULD** remain consistent when elements connect or intersect
### 8.3. Visual spacing **should** remain consistent when elements connect or intersect
Spacing **SHOULD** remain visually consistent where elements connect or intersect. Elements **MUST NOT** connect without keeping at least 2 pixels of spacing, and **SHOULD NOT** terminate with an abrupt cut.
Spacing **should** remain visually consistent where elements connect or intersect. Elements **must not** connect without keeping at least 2 pixels of spacing, and **should not** terminate with an abrupt cut.
:::: example
::: dont ../../images/2px-element-spacing-connected.svg?raw=true
@@ -209,13 +213,13 @@ Don't use **abrupt cuts** where one element meets another.
:::
::::
### 8.4. Off-variants **MAY** omit the 2-pixel gap rule
### 8.4. Off-variants **may** omit the 2-pixel gap rule
The `-off` variants have their own design language and **MAY** omit the 2-pixel gap rule.
The `-off` variants have their own design language and **may** omit the 2-pixel gap rule.
## 9. Aim for consistent visual weight
Icons **SHOULD** have a similar visual weight when viewed alongside each other.
Icons **should** have a similar visual weight when viewed alongside each other.
:::: example
@@ -237,7 +241,7 @@ Place your icon next to `circle` or `square`, then blur both icons. Your icon sh
## 10. Balance icons visually
Icons **SHOULD** be visually centered within the canvas.
Icons **should** be visually centered within the canvas.
:::: example
::: do ../../images/visually-centered-do.svg?raw=true
@@ -250,7 +254,7 @@ This icon feels shifted toward the top left.
:::: example
::: do ../../images/visually-centered-symmetrical-do.svg?raw=true
Symmetrical icons **SHOULD** remain geometrically centered.
Symmetrical icons **should** remain geometrically centered.
:::
::: dont ../../images/visually-centered-symmetrical-dont.svg?raw=true
Don't place symmetrical icons off-center for no good reason.
@@ -258,14 +262,14 @@ Don't place symmetrical icons off-center for no good reason.
::::
::: tip
Geometric centering does not always look centered. Asymmetrical icons **MAY** be moved slightly off center so they look visually centered.
Geometric centering does not always look centered. Asymmetrical icons **may** be moved slightly off center so they look visually centered.
Compare your icon with `circle` or `square` side by side and stacked vertically. If it looks shifted, adjust it.
:::
## 11. Keep density low
Icons **SHOULD** have a level of detail similar to other Lucide icons.
Icons **should** have a level of detail similar to other Lucide icons.
:::: example
::: do ../../images/density-optimal.svg?raw=true
@@ -286,7 +290,7 @@ View the icon at its intended size and blur it. Areas that turn dark may have to
## 12. Use smooth, simple curves
Curves **SHOULD** be smooth and as simple as the shape allows. Arcs and quadratic Bézier curves **SHOULD** be preferred where possible. Cubic Bézier curves **MAY** be used where necessary.
Curves **should** be smooth and as simple as the shape allows. Arcs and quadratic Bézier curves **should** be preferred where possible. Cubic Bézier curves **may** be used where necessary.
:::: example
::: do ../../images/curvature-smooth.svg?raw=true
@@ -305,7 +309,7 @@ Avoid extra control points. They make shapes harder to edit and can create small
## 13. Design for the pixel grid
Lucide icons **SHOULD** look sharp at small sizes, including on low-density displays. Coordinates and centers of arcs and other geometric elements **SHOULD** align to the pixel grid where possible.
Lucide icons **should** look sharp at small sizes, including on low-density displays. Coordinates and centers of arcs and other geometric elements **should** align to the pixel grid where possible.
:::: example
::: do ../../images/pixel-perfection-ideal.svg?raw=true
@@ -335,14 +339,14 @@ Avoid placing diagonal lines off-grid. They will appear blurry and optically wid
::::
::: tip
Pixel alignment **SHOULD** support the icon. Off-grid geometry **MAY** be used when required for visual balance, recognizable geometry, or smooth curvature. Pixel alignment **SHOULD NOT** take precedence over the visual quality of the icon.
Pixel alignment **should** support the icon. Off-grid geometry **may** be used when required for visual balance, recognizable geometry, or smooth curvature. Pixel alignment **should not** take precedence over the visual quality of the icon.
:::
## 14. Reuse established shapes
### 14.1. Variants **SHOULD** preserve base icon geometry
### 14.1. Variants **should** preserve base icon geometry
When creating a variant, the base icon geometry, placement, and orientation **SHOULD** be preserved unless the new icon requires a change.
When creating a variant, the base icon geometry, placement, and orientation **should** be preserved unless the new icon requires a change.
:::: example
::: do ../../images/established-shapes-base-do.svg?raw=true
@@ -353,7 +357,7 @@ Don't change the **geometry, placement, or orientation** of base shapes.
:::
::::
### 14.2. Related icons **SHOULD** share shapes and visual patterns when possible
### 14.2. Related icons **should** share shapes and visual patterns when possible
:::: example
::: do ../../images/established-shapes-sub-do.svg?raw=true
@@ -364,7 +368,7 @@ Don't redesign **existing elements**.
:::
::::
### 14.3. Common modifiers and elements **SHOULD** look consistent across the library
### 14.3. Common modifiers and elements **should** look consistent across the library
:::: example
::: do ../../images/established-shapes-consistency-do.svg?raw=true
@@ -378,7 +382,7 @@ 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.
Existing geometry **MAY** be modified when necessary to satisfy other Lucide design language rules. Consistency with an existing icon **SHOULD NOT** override clarity, balance, or readability.
Existing geometry **may** be modified when necessary to satisfy other Lucide design language rules. Consistency with an existing icon **should not** override clarity, balance, or readability.
:::
## Summary