SVG sprite generator
Merge a set of SVG icons into one sprite file. Each icon becomes a <symbol> named after its file, internal ids are prefixed so gradients and clip paths from different icons can't collide, and you get the <use> snippet to place any icon on a page.
How to use it
- 1
Drop the SVG icons you want in the sprite.
- 2
Check the symbol ids — each is derived from its file name.
- 3
Download sprite.svg and reference icons with <use href="sprite.svg#id">.
Questions
Why use a sprite instead of separate files?
One request loads every icon, the browser caches it once, and each icon can still be styled and sized individually where it's used.
What about icons that share ids?
Every internal id (gradients, clip paths, masks) is prefixed with its symbol's id, and references to it are rewritten, so icons can't break each other.
How do I use an icon from the sprite?
Inline the sprite once in your page (or reference the file), then write <svg><use href="#icon-id" /></svg> wherever the icon should appear.
More free SVG tools
Need more than one change?
The Splice editor edits SVGs visually — shapes, text, colors, layers — across many files at once, with the code in sync.
Open the editor