Use symbol definitions
Put reusable icon shapes in symbol elements with clear viewBox values.
svg sprite
Build SVG sprites for icon systems
SVG sprites group reusable symbols so frontend projects can use consistent icons without repeating full markup everywhere.
Reference icons consistently
Use use references where your stack and browser support needs allow it.
Keep accessibility explicit
Name informative icon instances and hide decorative ones.
SVG sprite example
<svg style="display:none"><symbol id="icon-check" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2"/></symbol></svg><svg viewBox="0 0 24 24"><use href="#icon-check"/></svg>
<symbol id="icon-check" viewBox="0 0 24 24">SVG Sprite Guide FAQ
What is an SVG sprite?
It is a collection of reusable SVG symbols referenced by icon instances.
Are SVG sprites accessible?
They can be, but each rendered icon still needs the right accessible name or hidden state.