diff --git a/docs/contribute/icons/design-principles.md b/docs/contribute/icons/design-principles.md index 6e8a28242..40cf9dcbb 100644 --- a/docs/contribute/icons/design-principles.md +++ b/docs/contribute/icons/design-principles.md @@ -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