20 · 24 px icon set
Iconography
Stroke, not fill. Each icon is drawn on a 24 px grid with the same stroke and the same corners, so a screen full of icons looks like the work of one hand.
Base set
Tap an icon to copy its SVG. Use the control to see how the stroke changes. The official value is 1.75.
Drawing rules
- Grid
- 24 × 24, with 2 px of inner padding. The shape fits within 20 × 20.
- Stroke
- 1.75 px, color
currentColor. No fill, except 1 px dots. - Caps and joins
- Rounded caps. Rounded joins.
- Corners
- Outer corners with radius 2 in containers; sharp angles only in arrows and marks.
- Metaphor
- Real, simple objects: an envelope for email, a clock for time. No characters or faces.
- Sizes
- 16 px in compact text, 20 px by default in buttons, 24 px in navigation. Touch target of 44 px with space around it.
- Color
- Inherits the text color. Icons are not colored: color belongs to the products.
- Associated text
- An icon on its own carries an
aria-label; next to text it is decorative (aria-hidden).
Do
- One icon per action, always the same one
- Icons with text for new actions
- The same stroke across the whole screen
Don't
- Mixing stroke and fill
- Icons from another library next to these
- Using an icon as the only signal of a state