Icon Library
The set of icons a product draws from — chosen once, for coverage and licence, and hard to change later.
Choosing an icon library is a long-term commitment made early with poor information. Coverage is the criterion that matters most and is hardest to judge up front: the set will look complete until the product needs a glyph for “reconcile”, “escrow” or “merge duplicates”, and then the team draws one that does not match the family's weight or grid. Check the set against a list of the domain nouns you already know you need, not against the homepage sample.
Licensing is the other trap. Several popular sets are free for personal use and paid commercially, or require attribution that nobody records. Resolve it before the icons are in 300 components. Technically, ship icons as inline SVG components rather than a font — icon fonts break with custom font settings, misalign, and are announced as gibberish by screen readers.
Icons are not labels
Outside a small universally-understood set — search, close, settings, back — icons alone are ambiguous. Pair them with text, and treat a tooltip as a supplement rather than a substitute, since it does not exist on touch.
In practice
A fintech dashboard used an icon-only toolbar for eight actions including “reconcile” and “dispute”. First-run testing had users identifying four of eight correctly. Adding labels cost one row of height and took correct identification to eight of eight.
Where teams get it wrong
- Judging coverage from the sample page instead of your own domain vocabulary.
- Mixing icons from several families, so weights and corner radii disagree.
- Icon fonts, which break with font overrides and announce badly to screen readers.
- Unresolved licensing discovered after the icons are everywhere.
- Dropping text labels because a tooltip exists, in a product with real tablet or phone usage.
( Learn more )
Related terms
All terms- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- Component LibraryA shared, versioned set of reusable interface components that designers and engineers build from instead of recreating elements per screen.
- TooltipA small label appearing on hover or focus that explains a control without taking permanent space in the interface.
- Style GuideA document defining the visual and verbal rules of a brand or product — logo use, colour, type, spacing, imagery and tone of voice.