Iconography
Five questions every design system answers about iconography. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 1 iconography tokens ↓The reasons this scheme answers from
- R1People and work contextCustomers who choose us, AA
- R2Business and productSells and converts, many
Question 1
What do icons do?
- Actions and status
- Actions, status and navigation (chosen)
- Those and decoration
Why Multi-brand picks it: Icons for actions, status and navigation.
becauseR1
Question 2
How many icon sizes exist?
- One (chosen)
- Two
Why Multi-brand picks it: One size next to text.
becauseQ4
Question 3
What icon style?
- Outline (chosen)
- Filled
- Two-tone
Why Multi-brand picks it: One outline set for every brand.
becauseR2
- Outline
- from size
Decisions point at primitives, so the rule lives in one place.
Question 4
How big are icons next to text?
- Match the text (chosen)
- Larger than the text
Why Multi-brand picks it: Icons match the text.
becauseR2
- icon
- icon
- → size.16
Question 5
Where do icons work hardest?
- Toolbars and rows
- Status and messages
- Navigation (chosen)
- Buttons and calls to action
Why Multi-brand picks it: Icons help most in navigation.
becauseR1
- button · 1 keys
When to use
- An icon with no labelUse: Icon button with a tooltip, rarely. Not: A bare icon. Customers need a hint.
- An action on one row or itemUse: Button ghost with a word. Not: An icon alone. A word says what will happen.
All iconography tokens
1 tokens · each decision and the primitive it points to
- size · 1
size.161rem · 16px - Decisions · 1
size.icon{size.16}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Iconography in Multi-brand: match the text. Icons match the text. Icons help most in navigation.