One grid
Every icon is drawn on the same artboard, at the same stroke.
Iconography
One set, drawn on one grid, at the sizes it stays legible.
Principles
Three checks before an icon joins the set.
Say one thing
An icon names a single action. If it needs two ideas, use a word instead.
Legible small
Draw it at the smallest approved size first. If it reads there, it reads anywhere.
The Set
Every icon, with the numbers it was drawn with.
Drawn on
- Grid
- 24 × 24 px
- Stroke
- 2 px
- Corner radius
- 2 px
- Padding
- 2 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
The calls that come up when an icon is added or reused.
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.