diff --git a/.github/PULL_REQUEST_TEMPLATE/new-icon.md b/.github/PULL_REQUEST_TEMPLATE/new-icon.md deleted file mode 100644 index 0d48e1ab623..00000000000 --- a/.github/PULL_REQUEST_TEMPLATE/new-icon.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: New icon -about: Add a new icon to the library -labels: "🎨 - -- **Name of the icon** : -- **Tags (alternative names for this icon)** (add them in as a separate json file using the same icon name) : -- **What is the purpose of this icon?** : -- **100% scale preview** : -- **Have you considered alternative possibilities** for its naming or design? : diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000000..542d1f8cc62 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,55 @@ + + + + +## What is the purpose of this pull request? + +- [ ] New Icon +- [ ] Bug fix +- [ ] New Feature +- [ ] Documentation update +- [ ] Other + +### Description + + +### Icon use case + + +### Alternative icon designs + + +## Icon Design Checklist + +#### Concept + +- [ ] I have provided valid use cases for each icon. +- [ ] I have not added any a brand or logo icon. +- [ ] I have not used any hate symbols. +- [ ] I have not included any religious or political imagery. + +#### Author, credits & license + +- [ ] The icons are solely my own creation. +- [ ] The icons were originally created in # by @ +- [ ] I've based them on the following Lucide icons: +- [ ] I've based them on the following design: + +#### Naming + +- [ ] I've read and followed the [naming conventions](https://lucide.dev/guide/design/icon-design-guide#naming-conventions) +- [ ] I've named icons by what they are rather than their use case. +- [ ] I've provided meta JSON files in `icons/[iconName].json`. + +#### Design + +- [ ] I've read and followed the [icon design guidelines](https://lucide.dev/guide/design/icon-design-guide) +- [ ] I've made sure that the icons look sharp on low DPI displays. +- [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density. +- [ ] I've made sure that the icons are visually centered. +- [ ] I've correctly optimized all icons to two points of precision. + +## Before Submitting + +- [ ] I've read the [Contribution Guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md). +- [ ] I've checked if there was an existing PR that solves the same issue. diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md index 791e451949e..643b5af8b2a 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") + +![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") -### Global Attributes +**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 + +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. -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. +## Allowed elements -### JSON metadata descriptor +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 00000000000..33eeba49e8d --- /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 376243431dd..bf546c6a7e9 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 00000000000..6c420410e4c --- /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 00000000000..0a1e0866bc5 --- /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 00000000000..d927f7679a1 --- /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 00000000000..29471b1a461 --- /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 00000000000..31d3af9a849 --- /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 00000000000..b2960537c82 --- /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 00000000000..de0ea825e5a --- /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 00000000000..23ea61d79d4 --- /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 00000000000..7a127195593 --- /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 00000000000..9cfa48a12ae --- /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 00000000000..0515508b7ee --- /dev/null +++ b/docs/images/visually-centered.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/party-popper.json b/icons/party-popper.json index 080d4e5e56f..6ffbd13d158 100644 --- a/icons/party-popper.json +++ b/icons/party-popper.json @@ -7,9 +7,16 @@ "emoji", "congratulations", "celebration", - "party" + "party", + "tada", + "🎉", + "🎊", + "excitement", + "exciting", + "excites", + "confetti" ], "categories": [ "emoji" ] -} \ No newline at end of file +}