SVG sprite generator
Merge icon files into one sprite sheet of symbols, ready for <use>.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag them here
SVG icons · drop as many as you like
Your file never leaves your browser during processing
How it works
To build an SVG sprite sheet, drop your icon files onto this page — each becomes a <symbol> with an id taken from its filename, internal ids are namespaced so gradients and clip paths cannot collide between icons, and you get the sprite plus the <use> snippet to reference it.
A sprite sheet is one SVG document holding many symbol elements, each with its own id and viewBox. A page then draws any of them with a short use reference rather than repeating the full markup: one request for the whole icon set, one cached file, and markup that stays readable.
The part that makes this more than concatenation is id collision. Icon sets exported from the same tool routinely reuse the same internal ids in every file — clip0, paint0_linear, a, b — because within a single file those are unique. Merge twenty such files and every reference resolves to whichever definition landed first, so one icon renders with another icon’s gradient or gets clipped by a path that belongs to something else. It looks like a rendering bug and is actually a naming one. Here, every internal id is prefixed with its symbol’s id before merging, and every reference to it — inside url() values, href targets, and style block selectors — is rewritten to match.
Each icon keeps its own viewBox, so a mixed set of 16, 24, and 32 pixel icons stays correct rather than being forced into one grid. A file without a viewBox gets one derived from its width and height, and that is called out in the warnings.
The optional currentColor pass replaces flat fills and strokes so icons take the text colour of wherever they are used, which is what lets one sprite serve a light and a dark theme. The preview grid renders each symbol out of the generated sprite rather than from the source file, so a broken reference shows up here rather than in your page.
FAQ
How do I use the sprite in a page?
Reference a symbol by id: <svg class="icon"><use href="sprite.svg#icon-name" /></svg>. Size and colour the outer svg with CSS. The snippet is generated for whichever icon you select.
Why do my icons break when I merge them myself?
Almost always duplicate internal ids. Two files that each define a gradient called paint0_linear cannot both keep that name in one document, so one icon inherits the other’s paint. This tool renames every internal id and rewrites the references.
Can I load the sprite from a CDN or another domain?
No. Browsers block cross-origin references from use elements, and there is no CORS header that re-enables it. Serve the sprite from the same origin as the page, or paste the sprite markup inline.
Should I inline the sprite or link to the file?
Linking gets you HTTP caching across pages. Inlining removes a request and works without same-origin concerns. The wrapper is already sized to zero and marked aria-hidden, so pasting it into your HTML takes no layout space.
Do the icons keep their own sizes?
Yes. Each symbol keeps the viewBox from its own file, so mixing 16, 24, and 32 pixel icons in one sprite works — the size at the use site is set by CSS.