SVG sprite generator
Combine your icons into one SVG sprite file, ready to use.
Using toolbook means you agree to our Terms and Privacy Policy.
or drag them here
SVG icons · drop as many as you like
Your files stay on your device
How to use it
Drop your SVG icons here to combine them into one sprite file, with each icon named after its file. Your files stay on your device.
A sprite puts all your icons in one file, so a website loads them in a single go. Each icon gets a name, and you show it with one short line of code.
Drop all your icon files onto the box above. Each one is named after its file name, and a preview grid shows every icon so you can check them. Click an icon to get its code.
Ever merged icons yourself and had one show up with another icon’s colours? That’s a name clash inside the files. This tool fixes it automatically.
Icons keep their own sizes, so you can mix 16, 24, and 32 pixel icons in one sprite.
FAQ
How do I use the sprite on my site?
Use <svg><use href="sprite.svg#icon-name" /></svg> and size it with CSS. The tool gives you the snippet for each icon.
Why do my icons break when I merge them myself?
Icons often share hidden internal names, so one ends up using another’s colours. This tool renames them so they don’t clash.
Can I load the sprite from another website?
No, browsers block that. Host it on the same site, or paste the sprite code straight into your page.
Do icons keep their own sizes?
Yes. Mixed sizes in one sprite work fine.
How it worksFor the curious
Each icon becomes a symbol with its own id and viewBox; pages draw one with <svg><use href="sprite.svg#id" /></svg>.
Icon sets from the same exporter reuse internal ids — clip0, paint0_linear, a, b — in every file. Merged naïvely, every reference resolves to whichever definition came first. Here every internal id is prefixed with its symbol id, and every reference in url() values, href targets, and style selectors is rewritten to match.
A file without a viewBox gets one derived from its width and height, and a warning says so. The optional currentColor pass replaces flat fills and strokes so icons inherit the surrounding text colour. Previews render from the generated sprite, so a broken reference shows here rather than in your page.
Browsers block cross-origin <use> references and no CORS header re-enables them, so serve the sprite from the same origin as the page, or inline it. The wrapper is sized to zero and aria-hidden, so inlining takes no layout space.