How to combine svg icons into a sprite sheet online
- Step 1Upload your SVG icons — Drag-and-drop multiple SVG files onto the builder. Icons are listed with their auto-generated symbol IDs (derived from the file names).
- Step 2Review and rename symbols — Check the symbol IDs and rename any that conflict or don't match your naming convention. The symbol ID becomes the fragment identifier you reference in HTML.
- Step 3Download and implement — Download the sprite SVG and place it in your public folder. Reference icons in HTML with: svg > use href='/sprite.svg#icon-name'. Add aria-hidden='true' to decorative icons and aria-label to interactive ones.
Frequently asked questions
Should I use an external SVG sprite or inline it in the HTML?+
External sprites (served as a separate file) are cacheable by the browser and preferred for most sites. Inline sprites (placed in the HTML head) avoid a separate HTTP request and allow CSS styling of icon fills — use inline for heavily styled icon systems.
Can I update one icon in the sprite without rebuilding the whole file?+
Yes. The Sprite Builder API supports a patch endpoint: POST the new SVG with its symbol ID and the API returns an updated sprite file with only that symbol replaced. Ideal for CI pipelines where individual icons change frequently.
Do SVG sprites work in all browsers?+
The svg use href pattern works in all modern browsers (Chrome, Firefox, Edge, Safari). Internet Explorer required the deprecated xlink:href attribute and did not support external sprite references — a polyfill (svg4everybody) was needed. In 2026 IE is effectively zero usage.
What happens to icon accessibility in a sprite?+
Each symbol in the sprite can contain a title element for a descriptive label. When you use the symbol, pass aria-label on the outer svg element and set aria-hidden='true' on the use element to prevent duplicate announcements. The builder generates correct accessibility markup for each icon.
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.