Design Resources · interface icons
Icon libraries: consistent strokes, licensing and accessibility
A practical checklist for selecting icons that belong together, remain understandable and carry a clear usage record.
The useful version of a web practice is the one that can be repeated by someone else. This note keeps the scope tight, names the trade-offs and ends with a way to check the result. Continue with the interface icons index or meet the Sites To Use editorial desk behind the notes.
Read the stroke as a system
Icons feel coherent when their stroke, corner treatment and optical weight agree. Compare them at the size where they will actually appear, not only in a large library sheet. A technically identical stroke can look lighter or heavier depending on the shape around it.
Keep a short specimen page with the most common actions. It reveals drift earlier than a directory full of one-off examples. A French page on repères de création visuelle makes the same point: written markers such as stroke width, spacing and corner language turn that drift into something arguable rather than a matter of taste.
Make meaning available twice
An icon can support a label, but it should not be the only way to understand an action. Keep visible text when the action benefits from certainty, and give decorative SVGs an empty accessible name. For an icon-only control, provide a real accessible label and a focus state that survives the surrounding colour.
This is less about adding rules after the design and more about deciding what the symbol is responsible for.
Keep the licence attached
Record the library, version, licence and any attribution requirement beside the assets. When an icon is redrawn or modified, note that too. A small register prevents a future handoff from turning a visual decision into a rights investigation.
Build the shortlist around real actions
Select twenty actions from the product before browsing thousands of symbols. Include familiar commands such as search and close, but also the domain-specific ideas that will expose gaps in a library. Place every candidate at the final button size with its label, background and neighbouring text. Compare optical weight, corner language, baseline, fill behaviour and recognition without relying on the catalogue's large preview.
Test the controls with keyboard focus, high contrast and a screen reader. Decorative icons should not create extra spoken content. An icon-only button still needs a concise accessible name that describes its action, while a visible label should usually remain the source of that name. The WAI button pattern also distinguishes buttons from links by behaviour. That distinction prevents a visually tidy symbol from becoming a misleading control.
Procure the library with an exit plan
Before purchasing, request the exact licence text and record the product version, permitted projects, seat rules, attribution, modification rights and redistribution limits. Confirm whether source SVGs, optimized SVGs, fonts and raster exports are included. If the library uses a hosted kit, inspect pageview limits, privacy implications, availability guarantees and what happens to deployed sites when the subscription ends.
Operational fit matters too. Check naming consistency, tree-shaking, framework packages, design-tool components, changelogs and whether deprecated icons keep stable identifiers. Create an internal manifest that maps product actions to selected icon names and stores the licence reference. This makes later replacement measurable: the team can count affected controls, compare alternatives and estimate migration work before renewing a library out of habit.
Sources and further checks
These primary and official references define the standards or product behaviour used in this field note. Accessed August 25, 2026.
