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.
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.
