diff --git a/docs/ICON_DESIGN_GUIDE.md b/docs/ICON_DESIGN_GUIDE.md index 067a4ac..325232f 100644 --- a/docs/ICON_DESIGN_GUIDE.md +++ b/docs/ICON_DESIGN_GUIDE.md @@ -4,46 +4,46 @@ Here are rules that should be followed to keep quality and consistency when maki ## 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**. +1. Icons must be designed on a **24 by 24 pixels** canvas. +2. Icons must have a **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. **Each Icon is desined on a canvas of 24 by 24 pixels** +### 1. Icons must be designed on a 24 by 24 pixels canvas. ![24px-24px](images/24px-24px.png?raw=true "24px-24px") -### 2. **Each Icon have 1 pixel between icon and the canvas** +### 2. Icons must have a 1 pixel padding within the canvas. ![1px-padding](images/1px-padding.png?raw=true "1px-padding") -### 3. **Each icon has a stroke width of 2 pixels** +### 3. Icons must have a stroke width of 2 pixels. ![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke") -### 4. **Each icon has round joins** +### 4. Icons must use round joins. ![round-joints](images/round-joints.png?raw=true "round-joints") -### 5. **Each icon has round caps** +### 5. Icons must use round caps. ![round-caps](images/round-caps.png?raw=true "round-caps") -### 6. **Each icon has centered strokes** +### 6. Icons must use centered strokes. ![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes") -### 7. **Each icon containing squares has a border radius of 2 pixels** +### 7. Shapes (such as squares) in icons must have 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** +### 8. Distinct elements must have 2 pixels of spacing between each other. ![2px-element-spacing](images/2px-element-spacing.png?raw=true "2px-element-spacing") @@ -53,7 +53,7 @@ Before an icon is added to the library, we like to have readable and optimized s ### Global Attributes -For each icon these attributes are applied. +For each icon these attributes are applied, corresponding to the above rules. ```xml