From ccc8dc2b34a9d4bed9ad9ab5360444731b7bbce3 Mon Sep 17 00:00:00 2001 From: Karsa Date: Mon, 21 Aug 2023 10:29:51 +0200 Subject: [PATCH] Updated icon design guide (#1518) * Update icon design guide with new design guidelines, naming convention & code convention additions. * Fix heading levels. * Update docs/guide/design/icon-design-guide.md --- docs/guide/design/icon-design-guide.md | 132 ++++++++++++++++++------ docs/images/1px-border-radius.svg | 88 ++++++++++++++++ docs/images/2px-border-radius.svg | 136 ++++++++++++------------- docs/images/curvature-smooth.svg | 67 ++++++++++++ docs/images/curvature-uneven.svg | 68 +++++++++++++ docs/images/density-high.svg | 71 +++++++++++++ docs/images/density-ideal.svg | 70 +++++++++++++ docs/images/optical-volume-high.svg | 69 +++++++++++++ docs/images/optical-volume-ideal.svg | 68 +++++++++++++ docs/images/optical-volume-low.svg | 69 +++++++++++++ docs/images/pixel-perfection-bad.svg | 66 ++++++++++++ docs/images/pixel-perfection-ideal.svg | 62 +++++++++++ docs/images/visually-centered-bad.svg | 68 +++++++++++++ docs/images/visually-centered.svg | 67 ++++++++++++ 14 files changed, 1003 insertions(+), 98 deletions(-) create mode 100644 docs/images/1px-border-radius.svg create mode 100644 docs/images/curvature-smooth.svg create mode 100644 docs/images/curvature-uneven.svg create mode 100644 docs/images/density-high.svg create mode 100644 docs/images/density-ideal.svg create mode 100644 docs/images/optical-volume-high.svg create mode 100644 docs/images/optical-volume-ideal.svg create mode 100644 docs/images/optical-volume-low.svg create mode 100644 docs/images/pixel-perfection-bad.svg create mode 100644 docs/images/pixel-perfection-ideal.svg create mode 100644 docs/images/visually-centered-bad.svg create mode 100644 docs/images/visually-centered.svg diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md index 791e45194..643b5af8b 100644 --- a/docs/guide/design/icon-design-guide.md +++ b/docs/guide/design/icon-design-guide.md @@ -6,58 +6,111 @@ title: Icon Design Guide Here are rules that should be followed to keep quality and consistency when making icons for Lucide. -## Summary of the rules we have - -1. Icons must be designed on a **24 by 24 pixels** canvas. -2. Icons must have at least **1 pixel padding** within the canvas. -3. Icons must have a **stroke width of 2 pixels**. -4. Icons must use **round joins**. -5. Icons must use **round caps**. -6. Icons must use **centered strokes**. -7. Shapes (such as rectangles) in icons must have **border radius of 2 pixels**. -8. Distinct elements must have **2 pixels of spacing between each other**. - -## The Rules Visualized - -### 1. Icons must be designed on a 24 by 24 pixels canvas. +### 1. Icons must be designed on a **24 by 24 pixels** canvas. ![24px-24px](../../images/24px-24px.svg?raw=true "24px-24px") -### 2. Icons must have at least 1 pixel padding within the canvas. +## 2. Icons must have at least **1 pixel padding** within the canvas. ![1px-padding](../../images/1px-padding.svg?raw=true "1px-padding") -### 3. Icons must have a stroke width of 2 pixels. +## 3. Icons must have a **stroke width of 2 pixels**. ![2px-stroke](../../images/2px-stroke.svg?raw=true "2px-stroke") -### 4. Icons must use round joins. +## 4. Icons must use **round joins**. ![round-joints](../../images/round-joints.svg?raw=true "round-joints") -### 5. Icons must use round caps. +## 5. Icons must use **round caps**. ![round-caps](../../images/round-caps.svg?raw=true "round-caps") -### 6. Icons must use centered strokes. +## 6. Icons must use **centered strokes**. ![centered-strokes](../../images/centered-strokes.svg?raw=true "centered-strokes") -### 7. Shapes (such as squares) in icons must have border radius of 2 pixels. +## 7. Shapes (such as rectangles) must have a **border radius of** + +### C. **2 pixels** if they are at least 8 pixels in size ![2px-border-radius](../../images/2px-border-radius.svg?raw=true "2px-border-radius") -### 8. Distinct elements must have 2 pixels of spacing between each other. +### B. **1 pixel** if they are smaller than 8 pixels in size + +![1px-border-radius](../../images/1px-border-radius.svg?raw=true "1px-border-radius") + +## 8. Distinct elements must have **2 pixels of spacing between each other** ![2px-element-spacing](../../images/2px-element-spacing.svg?raw=true "2px-element-spacing") -## Code Conventions +## 9. Icons should have a similar optical volume to `circle` and `square`. -Before an icon is added to the library, we like to have readable and optimized svg code. +![optical-volume-ideal](../../images/optical-volume-ideal.svg?raw=true "optical-volume-ideal") -Never use [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents. +![optical-volume-low](../../images/optical-volume-low.svg?raw=true "optical-volume-low") -### Global Attributes +![optical-volume-high](../../images/optical-volume-high.svg?raw=true "optical-volume-high") + +**Tip:** place your icon next to circle or square and blur them both; your icon should not feel much darker than the base shape. + +## 10. Icons should be visually centered by their center of gravity. + +![visually-centered](../../images/visually-centered.svg?raw=true "visually-centered") + +![visually-centered-bad](../../images/visually-centered-bad.svg?raw=true "visually-centered-bad") + +**Tip:** place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center. + +## 11. Icons should have similar visual density and level of detail. + +![density-ideal](../../images/density-ideal.svg?raw=true "density-ideal") + +![density-high](../../images/density-high.svg?raw=true "density-high") + +**Tip:** try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark. + +## 12. Continuous curves should join smoothly. + +![curvature-smooth](../../images/curvature-smooth.svg?raw=true "curvature-smooth") + +![curvature-uneven](../../images/curvature-uneven.svg?raw=true "curvature-uneven") + +**Tip:** make sure to use arcs or quadratic curves, when using cubic curves control points should have mirrored angles for smooth curves. + +## 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays. + +![pixel-perfection-ideal](../../images/pixel-perfection-ideal.svg?raw=true "pixel-perfection-ideal") + +![pixel-perfection-bad](../../images/pixel-perfection-bad.svg?raw=true "pixel-perfection-bad") + +**Tip:** whenever possible align elements and arc centers to the grid. + +# Naming conventions + +1. Icon names use lower kebab case.\ + For example: `arrow-up` instead of `Arrow Up`. + +2. Icon names use International English names, as opposed to local variants.\ + For example: `color` instead of `colour`. + +3. Icons should be named for what they depict rather than their use case or what they represent.\ + For example: `save` instead of `floppy-disk` and `ban` rather than `circle-slash`. + +4. Icons that are part of a group are named `-`.\ + For example: `badge-plus` is based on `badge`. + +5. Icon names for alternate icons should represent what makes the alternate unique instead of being numbered.\ + For example: `send-horizontal` instead of `send-2`. + +6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\ + For example: `arrow-down-0-to-1` contains both numerals. + +# Code Conventions + +Before an icon is added to the library, we like to have readable and optimized SVG code. + +## Global Attributes For each icon these attributes are applied, corresponding to the above rules. @@ -77,13 +130,28 @@ For each icon these attributes are applied, corresponding to the above rules. ``` -### Minify paths +## Minify paths -Code of paths can get really big. -To reduce file size we like to minify the code. -We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths. +The code of paths can sometimes get quite large. To reduce file size we like to minify the code. +We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths to 2 points of precision. -### JSON metadata descriptor +## Allowed elements + +SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.\ +In practice only the following elements and attributes are allowed: + * `` + * `` + * `` + * `` + * `` + * `` + * `` + +This also means that no transforms, filters, fills or explicit strokes are allowed. + +Never use [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents. + +# JSON metadata descriptor Each icon added must also come with a matching JSON file listing tags and categories for the icon. Please use the following template: @@ -91,6 +159,10 @@ Please use the following template: ```json { "$schema": "../icon.schema.json", + "contributors": [ + "github-username", + "another-github-username" + ], "tags": [ "foo", "bar" diff --git a/docs/images/1px-border-radius.svg b/docs/images/1px-border-radius.svg new file mode 100644 index 000000000..33eeba49e --- /dev/null +++ b/docs/images/1px-border-radius.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/2px-border-radius.svg b/docs/images/2px-border-radius.svg index 376243431..bf546c6a7 100644 --- a/docs/images/2px-border-radius.svg +++ b/docs/images/2px-border-radius.svg @@ -1,70 +1,70 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/curvature-smooth.svg b/docs/images/curvature-smooth.svg new file mode 100644 index 000000000..6c420410e --- /dev/null +++ b/docs/images/curvature-smooth.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/curvature-uneven.svg b/docs/images/curvature-uneven.svg new file mode 100644 index 000000000..0a1e0866b --- /dev/null +++ b/docs/images/curvature-uneven.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/density-high.svg b/docs/images/density-high.svg new file mode 100644 index 000000000..d927f7679 --- /dev/null +++ b/docs/images/density-high.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/density-ideal.svg b/docs/images/density-ideal.svg new file mode 100644 index 000000000..29471b1a4 --- /dev/null +++ b/docs/images/density-ideal.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/optical-volume-high.svg b/docs/images/optical-volume-high.svg new file mode 100644 index 000000000..31d3af9a8 --- /dev/null +++ b/docs/images/optical-volume-high.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/optical-volume-ideal.svg b/docs/images/optical-volume-ideal.svg new file mode 100644 index 000000000..b2960537c --- /dev/null +++ b/docs/images/optical-volume-ideal.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/optical-volume-low.svg b/docs/images/optical-volume-low.svg new file mode 100644 index 000000000..de0ea825e --- /dev/null +++ b/docs/images/optical-volume-low.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/pixel-perfection-bad.svg b/docs/images/pixel-perfection-bad.svg new file mode 100644 index 000000000..23ea61d79 --- /dev/null +++ b/docs/images/pixel-perfection-bad.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/pixel-perfection-ideal.svg b/docs/images/pixel-perfection-ideal.svg new file mode 100644 index 000000000..7a1271955 --- /dev/null +++ b/docs/images/pixel-perfection-ideal.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/visually-centered-bad.svg b/docs/images/visually-centered-bad.svg new file mode 100644 index 000000000..9cfa48a12 --- /dev/null +++ b/docs/images/visually-centered-bad.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/visually-centered.svg b/docs/images/visually-centered.svg new file mode 100644 index 000000000..0515508b7 --- /dev/null +++ b/docs/images/visually-centered.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +