Iconography
Icons are drawn on a 16px grid at a 1.5px stroke, and they take the colour of the text around them.
Sizes
Three sizes. Medium sits beside body text and inside buttons.
| Icon | Size | Used for |
|---|---|---|
| 12px | Inside a badge or a tag. | |
| 16px | Buttons, menu items, icons inside fields. | |
| 24px | Empty states and drawer headers. |
Colour
An icon takes the colour of the text around it. Never give it a colour of its own.
Labels
An icon with no text beside it needs a label. Without one, screen readers announce nothing for the action.