Building an SVG icon system

SVG provides resolution-independent interface artwork and can inherit presentation from CSS. A production icon system still needs naming, accessible labelling, browser support and a controlled source-to-sprite build.

Separate icons from meaning

Name source artwork by stable concept rather than page location. Decide whether each use is decorative, repeats adjacent text or conveys an action that requires an accessible name on the link or button.

Normalise source files

Use a consistent viewBox, remove editor metadata, expand unsupported effects and preserve intentional stroke behaviour. Optimise through a reviewed task so a tool update cannot silently remove meaningful paths.

Assemble symbols

Build an SVG sprite containing symbol elements and reference them with use. Keep a tested fallback for browsers that cannot resolve external symbol references, particularly relevant Internet Explorer configurations.

Style through explicit hooks

Use currentColor where the icon should follow text and expose documented classes for multi-colour states. Do not depend on styling paths inside a separately loaded document where browser behaviour is inconsistent.

Test accessibility and failure

Inspect keyboard controls with icons only, high contrast, zoom, missing sprite requests and print. Avoid duplicate title identifiers when the same symbol appears multiple times on a page.