diff --git a/docs/ICON_DESIGN_GUIDE.md b/docs/ICON_DESIGN_GUIDE.md new file mode 100644 index 0000000..067a4ac --- /dev/null +++ b/docs/ICON_DESIGN_GUIDE.md @@ -0,0 +1,78 @@ +# 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. Each Icon is desined on a canvas of **24 by 24 pixels**. +2. Each Icon have **1 pixel padding** between icon and the canvas. +3. Each icon has a **stroke width of 2 pixels**. +4. Each icon has **round joins**. +5. Each icon has **round caps**. +6. Each icon has **centered strokes**. +7. Each icon containing squares has a **border radius of 2 pixels**. +8. Each icon **2 pixels of spacing between elements**. + +## The Rules Visualized + +### 1. **Each Icon is desined on a canvas of 24 by 24 pixels** + +![24px-24px](images/24px-24px.png?raw=true "24px-24px") + +### 2. **Each Icon have 1 pixel between icon and the canvas** + +![1px-padding](images/1px-padding.png?raw=true "1px-padding") + +### 3. **Each icon has a stroke width of 2 pixels** + +![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke") + +### 4. **Each icon has round joins** + +![round-joints](images/round-joints.png?raw=true "round-joints") + +### 5. **Each icon has round caps** + +![round-caps](images/round-caps.png?raw=true "round-caps") + +### 6. **Each icon has centered strokes** + +![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes") + +### 7. **Each icon containing squares has a border radius of 2 pixels** + +![2px-border-radius](images/2px-border-radius.png?raw=true "2px-border-radius") + +### 8. **Each icon 2 pixels of spaciong between elements** + +![2px-element-spacing](images/2px-element-spacing.png?raw=true "2px-element-spacing") + +## 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. + +```xml + + + +``` + +### 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. diff --git a/docs/images/1px-padding.png b/docs/images/1px-padding.png new file mode 100644 index 0000000..645d611 Binary files /dev/null and b/docs/images/1px-padding.png differ diff --git a/docs/images/24px-24px.png b/docs/images/24px-24px.png new file mode 100644 index 0000000..471d36e Binary files /dev/null and b/docs/images/24px-24px.png differ diff --git a/docs/images/2px-border-radius.png b/docs/images/2px-border-radius.png new file mode 100644 index 0000000..7efadaf Binary files /dev/null and b/docs/images/2px-border-radius.png differ diff --git a/docs/images/2px-element-spacing.png b/docs/images/2px-element-spacing.png new file mode 100644 index 0000000..cdc36eb Binary files /dev/null and b/docs/images/2px-element-spacing.png differ diff --git a/docs/images/2px-stroke.png b/docs/images/2px-stroke.png new file mode 100644 index 0000000..eab2afb Binary files /dev/null and b/docs/images/2px-stroke.png differ diff --git a/docs/images/centered-strokes.png b/docs/images/centered-strokes.png new file mode 100644 index 0000000..e8f8384 Binary files /dev/null and b/docs/images/centered-strokes.png differ diff --git a/docs/images/round-caps.png b/docs/images/round-caps.png new file mode 100644 index 0000000..c53bb0a Binary files /dev/null and b/docs/images/round-caps.png differ diff --git a/docs/images/round-joints.png b/docs/images/round-joints.png new file mode 100644 index 0000000..0ae12a7 Binary files /dev/null and b/docs/images/round-joints.png differ