- 01Introduction
- 02Size Matters
- 03Content vs. Style
- 04Lessons Learned
- 05Summary
01 · Introduction
An icon is a word, not a picture.
Every mature product surface is already a language. Buttons are verbs, panels are paragraphs, and icons are the loanwords we borrow across locales because our alphabets ran out. Treat them like decoration and the vocabulary bloats: 400 near-duplicate glyphs, three almost-identical "save" marks, a "sync" that only means sync in Product A.
Treat them like language — with roots, rules, and a canon — and the same 60 glyphs cover an entire suite in five locales, at every color depth, on every device.
02 · Size Matters
Draw for the smallest cell first.
A glyph is not one thing. It is a family, indexed by pixel budget. The 16px tree node, the 32px toolbar, the 48px shelf, the 256px About dialog — each is a different rendering of the same word, with a different threshold of legibility. Every family has a floor: the size below which the idea stops surviving.
16px
Tree, list, tray
1–2 features, no gradient
24px
Menu, inline
Silhouette + one accent
32px
Toolbar
Silhouette + badge
48px
Shelf, tile
Full form, materials optional
The floor rule
If a glyph can't be recognized at 16×16 without color, it isn't a word yet — it's an illustration. Ship it as artwork, not as a term.
03 · Content versus Style
Isn't it a part of a design system?
A design system owns style: stroke weight, corner radius, palette, motion. It does not own content: which words your product speaks, and how each one is composed from smaller words. Confuse the two and every rebrand deletes your vocabulary.
Style layer
The typeface of the language.
- · Stroke weight, endcaps, joins
- · Corner radius & keyline grid
- · Palette, gradients, materials
- · Motion register — snap vs. drift
Owned by the design system. Swappable per era, per brand.
Content layer
The words themselves.
- · Roots — agent, container, flow, link, state, time
- · Modifiers — direction, severity, add, remove
- · Compounds — assigned-task, dependency-flow, milestone-marker, pending-review
- · Naming grammar & canonical index
Owned by the iconic language. Outlives every rebrand.
The design system is the font. The iconic language is the writing. You can reset the font every five years; you cannot reset the writing without deleting the product's memory.
04 · Lessons Learned
Six things the pixel-era taught us.
- 01
Silhouette carries the word.
At 16px, color is noise and detail is a lie. The outline is the entire signal — draw it first, add material later.
- 02
Compounds beat lookalikes.
Two shapes with a rule (root + modifier) will always beat 40 hand-drawn variants. The rule is the design.
- 03
One name, one home.
Every glyph gets one canonical name and one canonical path. If you can't grep for it, it doesn't exist.
- 04
Verbs need conjugation.
The same base can mean running, paused, error, pending — inflection is a badge, not a new icon.
- 05
Locales are a size test.
If your icon needs a label to be understood, it fails in Japanese first. Fix the glyph, not the string.
- 06
A gatekeeper is not a bottleneck.
Without one grammarian the language forks. One reviewer for the depot is cheaper than four re-drawings a year.
An icon's worth a thousand fonts — but only if it means the same thing every time it shows up.
05 · Summary
Language first. Style second. Decoration last.
Ship the vocabulary before you ship the veneer. A product suite with 60 well-named roots and a compositional grammar will outperform one with 600 hand-drawn glyphs at every axis that matters: recall, translation, maintenance cost, and — the one nobody measures — the shared understanding between the team and the user.