Iconography
Five questions every design system answers about iconography. These are Dense data’s answers, and each one points back to the reasons that chose it.
View all 1 iconography tokens ↓The reasons this scheme answers from
- R1Tasks and flowsScan and compare, constantly
- R2Content and dataNumbers and records, a lot
Question 1
What do icons do?
- Actions and status (chosen)
- Actions, status and navigation
- Those and decoration
Why Dense data picks it: Icons mark row actions and status.
becauseR1
Question 2
How many icon sizes exist?
- One (chosen)
- Two
Why Dense data picks it: One size, matched to the small text.
becauseTypography values
Question 3
What icon style?
- Outline (chosen)
- Filled
- Two-tone
Why Dense data picks it: Outline icons stay light next to dense 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 Dense data picks it: Icons match the label so they do not outweigh it.
becauseR2
- icon
- icon
- → size.16
Question 5
Where do icons work hardest?
- Toolbars and rows (chosen)
- Status and messages
- Navigation
- Buttons and calls to action
Why Dense data picks it: Icons work hardest in toolbars and row actions.
becauseR1
- button · 1 keys
When to use
- An icon with no labelUse: Icon button with a tooltip. Not: A bare icon. Experts learn icons; the tooltip covers the first uses.
- An action on one row or itemUse: Icon button, ghost, compact. Not: Button secondary in every row. Rows repeat dozens of times; a quiet icon keeps the table readable.
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 Dense data: match the text. Icons match the label so they do not outweigh it. Icons work hardest in toolbars and row actions.