Iconography
When icons appear and how they look.
size.icon
The five answers
| Question | Answer | Why |
|---|---|---|
| What do icons do? | Actions and status | Icons support words; they never replace them. |
| How many icon sizes exist? | One | One size, larger than the text. |
| What icon style? | Filled | Filled icons stay visible at low vision. |
| How big are icons next to text? | Larger than the text | Larger icons are easier to see. |
| Where do icons work hardest? | Status and messages | Icons work hardest beside status words and errors. |
Tokens
Each token points to another token. Values live only on primitives, below.
| Token | Points to |
|---|---|
size.icon | size.20 |
The raw values these tokens end at are on Primitives › all kinds.
When to use what
| Situation | Use | Not | Why |
|---|---|---|---|
| An icon with no label | Not used: always add a word | An icon button | Icons alone are guesswork. |
| An action on one row or item | Button secondary with a word | An icon on its own | A word says what will happen. |