Iconography
When icons appear and how they look.
size.icon
The five answers
| Question | Answer | Why |
|---|---|---|
| What do icons do? | Those and decoration | Icons also decorate campaign pages. |
| How many icon sizes exist? | Two | One size next to text, one for decoration. |
| What icon style? | Two-tone | Two-tone icons carry the brand color. |
| How big are icons next to text? | Larger than the text | Larger icons hold their own next to big type. |
| Where do icons work hardest? | Buttons and calls to action | Icons sit in calls to action. |
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 with a hover hint | On phones, hover hints never show; a word says what will happen. |
| An action on one row or item | Button ghost with a word | An icon alone | Visitors come rarely, so they never learn an icon. A word says what will happen. |