Iconography
Five questions every design system answers about iconography. These are Accessible first’s answers, and each one points back to the reasons that chose it.
View all 1 iconography tokens ↓The reasons this scheme answers from
- R1Human factorsLow effort to understand, they see it fresh each time
- R2People and work contextEveryone, including people with disabilities, AAA
Question 1
What do icons do?
- Actions and status (chosen)
- Actions, status and navigation
- Those and decoration
Why Accessible first picks it: Icons support words; they never replace them.
becauseR1
Question 2
How many icon sizes exist?
- One (chosen)
- Two
Why Accessible first picks it: One size, larger than the text.
becauseQ4
Question 3
What icon style?
- Outline
- Filled (chosen)
- Two-tone
Why Accessible first picks it: Filled icons stay visible at low vision.
becauseR2
- Filled
- 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 Accessible first picks it: Larger icons are easier to see.
becauseR2
- icon
- icon
- → size.20
Question 5
Where do icons work hardest?
- Toolbars and rows
- Status and messages (chosen)
- Navigation
- Buttons and calls to action
Why Accessible first picks it: Icons work hardest beside status words and errors.
becauseAccessibility count
- button · 1 keys
When to use
- An icon with no labelUse: Not used: always add a word. Not: An icon button. Icons alone are guesswork.
- An action on one row or itemUse: Button secondary with a word. Not: An icon on its own. A word says what will happen.
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 Accessible first: larger than the text. Larger icons are easier to see. Icons work hardest beside status words and errors.