Iconography
Five questions every design system answers about iconography. These are Brand expressive’s answers, and each one points back to the reasons that chose it.
View all 1 iconography tokens ↓The reasons this scheme answers from
- R1BrandBold, loud
- R2OutcomesEngagement, looking off-brand
Question 1
What do icons do?
- Actions and status
- Actions, status and navigation
- Those and decoration (chosen)
Why Brand expressive picks it: Icons also decorate campaign pages.
becauseR1
Question 2
How many icon sizes exist?
- One
- Two (chosen)
Why Brand expressive picks it: One size next to text, one for decoration.
becauseQ1
Question 3
What icon style?
- Outline
- Filled
- Two-tone (chosen)
Why Brand expressive picks it: Two-tone icons carry the brand color.
becauseColor values
- Two-tone
- 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
- Larger than the text (chosen)
Why Brand expressive picks it: Larger icons hold their own next to big type.
becauseTypography roles
- icon
- icon
- → size.20
Question 5
Where do icons work hardest?
- Toolbars and rows
- Status and messages
- Navigation
- Buttons and calls to action (chosen)
Why Brand expressive picks it: Icons sit in calls to action.
becauseR2
- button · 1 keys
When to use
- An icon with no labelUse: Rarely, with a tooltip. Not: Many bare icons. Type and image carry the page.
- An action on one row or itemUse: Button ghost with a word. Not: An icon alone. A word keeps it clear.
All iconography tokens
1 tokens · each decision and the primitive it points to
- size · 1
size.201.25rem · 20px - Decisions · 1
size.icon{size.20}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Iconography in Brand expressive: larger than the text. Larger icons hold their own next to big type. Icons sit in calls to action.