How to svg sprite browser usage reference: the use element guide
- Step 1Reference a symbol from an external sprite — Use: svg width='24' height='24' aria-hidden='true' > use href='/sprite.svg#icon-name'. Always specify width and height on the outer svg to reserve layout space.
- Step 2Add accessibility for interactive icons — For icons that convey meaning (not purely decorative), replace aria-hidden='true' with role='img' aria-label='Description of icon'. Add a title element inside the symbol in the sprite for browsers that support it.
- Step 3Debug CORS issues — If your sprite is on a CDN subdomain, add Access-Control-Allow-Origin: * to the sprite's response headers. Without CORS headers, Firefox and older Safari will refuse to render external sprite symbols.
Frequently asked questions
Should I use href or xlink:href for SVG use elements?+
Use href. The xlink:href attribute is deprecated since SVG 2 and removed in Chrome 87. All modern browsers support the plain href attribute. If you must support very old browsers (pre-2020), include both attributes: href='/sprite.svg#icon' xlink:href='/sprite.svg#icon'.
Why don't my CSS fill styles apply to icons from an external sprite?+
Symbols in external sprites are rendered in a separate browsing context with their own CSS scope — your page's CSS cannot reach them. Use currentColor in the SVG fill attributes and set the colour via the outer svg element's CSS color property.
Can I use SVG sprites in an email newsletter?+
No. Email clients strip SVG and use elements entirely. For email, use rasterized PNG icons or inline SVG (without sprites). The SVG use element has zero email client support.
Why does my icon appear blank in Firefox?+
Firefox blocks external SVG sprite references if the sprite is on a different origin without CORS headers, or if the sprite URL uses a protocol mismatch (e.g., http sprite on an https page). Ensure your sprite is served from the same origin or with correct CORS headers, and always over HTTPS.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.