Iconography
Five questions every design system answers about iconography. These are Content 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
- R1People and work contextOccasional visitors, AA
- R2Human factorsAttention on the content, they see it fresh each time
Question 1
What do icons do?
- Actions and status
- Actions, status and navigation (chosen)
- Those and decoration
Why Content first picks it: Occasional readers need icons for save, share and navigation.
becauseR1
Question 2
How many icon sizes exist?
- One (chosen)
- Two
Why Content first picks it: One size next to text.
becauseQ4
Question 3
What icon style?
- Outline (chosen)
- Filled
- Two-tone
Why Content first picks it: Outline icons stay quiet beside text.
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 Content first picks it: Icons match the text size.
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 Content first picks it: Icons help most in navigation.
becauseR1
- button · 1 keys
When to use
- An icon with no labelUse: Not used: always add a word. Not: An icon button. Occasional visitors do not know icons.
- An action on one row or itemUse: Button ghost with a word. Not: An icon on its own. Occasional visitors need the word.
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 Content first: match the text. Icons match the text size. Icons help most in navigation.