SVG Sprite Generator
NewCombine multiple SVG icon files into a single <symbol>-based sprite sheet, with ready-to-use <use> usage snippets.
Select two or more .svg files. Each becomes a <symbol> named after its filename.
Choose SVG files to build a sprite.
Frequently Asked Questions
How does it turn each SVG file into a symbol?
For each uploaded file, it parses the SVG with the browser's DOMParser, pulls out the inner markup (paths, shapes, etc.) and the viewBox, and wraps that content in a <symbol id="..."> element inside one combined <svg> sprite — the id is derived from the file's name.
Why is the generated sprite wrapped in style="display:none"?
A sprite sheet's outer <svg> just holds reusable <symbol> definitions and isn't meant to be visible on its own — hiding it prevents an empty or oddly-sized box from appearing on the page, while individual icons are still rendered wherever you reference them with <use>.
What if two of my files have the same name-derived id?
The tool automatically appends a numeric suffix (like icon-2, icon-3) to keep every symbol id unique within the sprite, since duplicate ids inside one SVG document would cause <use> references to become ambiguous.
How do I actually use an icon from the sprite in my HTML?
Paste the full sprite markup once, anywhere early in your page (or load it via fetch/innerHTML), then reference any icon elsewhere with a small <svg><use href="#icon-id" /></svg> — the usage-example panel below the sprite shows the exact snippet for every uploaded icon.
Does this work with complex SVGs that have gradients, clip-paths, or multiple colors?
It preserves whatever markup was inside the original <svg> element, including gradients and clip-paths, since it copies the raw inner HTML rather than simplifying it — just be aware that id-based references inside a copied SVG (like a gradient's url(#grad1)) could collide if two different source files happen to reuse the same internal id.