Name the principle, then say what it means in practice.
04
Iconography
Principles
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
The Set
Drawn on
- Grid
- 30 × 30 px
- Stroke
- 2 px
- Corner radius
- 0 px
- Padding
- 3 px on every side
Sizes
Approved sizes, smallest last. Below the smallest, the stroke closes up and the icon stops reading.
32 px
24 px
20 px
16 px
Do and don't
Stroke
Do
Keep the set on one stroke width.
Don't
Scale an icon up and let its stroke thicken.
Color
Do
Inherit the text color around it.
Don't
Give a single icon its own accent color.
New icons
Do
Draw on the grid above and add it here.
Don't
Pull one in from a different icon library.