Icons
Pick one voice and let every glyph speak it.
Icons are typography: a set of small glyphs that need a shared voice — consistent stroke width, corner radius, optical size, and density. Mixing two libraries in one screen reads exactly like mixing two typefaces mid-sentence.
One consistent weight across the whole product matters more than which weight you pick. This site uses duotone everywhere.
Choosing a library
- Weights/styles per glyph. Phosphor has six weights; families with one style lock you in when you need emphasis states.
- Grid and optical size. A set drawn on a 16px grid stays crisp small; 24px-grid icons get muddy when scaled down.
- Coverage that matches your domain. Count the icons you'll actually need, not the total.
- License and format. Tree-shakable components beat icon fonts.
This site uses Phosphor duotone throughout — the filled second layer at low opacity gives a little depth without adding color.
Designing your own
Rauno Freiberg had bespoke 16px icons drawn for Devouring Details; Benji Taylor built an icon system where every icon is three lines so any icon can morph into any other. Custom sets are expensive, but they make an interface feel like it belongs to nobody else. If you go there: pick a grid, a stroke, one corner radius — and draw every glyph with the same pen.