SVG Sprite Generator
Pack icons into one <symbol> sprite with ids, viewBoxes and ready-to-paste <use> snippets.
Drop SVG icons
They become symbols in one sprite file you reference with <use>, one request for the whole set.
About this tool
Combine an icon set into one SVG sprite: each file becomes a <symbol> with an id from its file name and its own viewBox, ready to use anywhere with <use href="sprite.svg#name">. One file and one request serve every icon.
Ids inside each icon are prefixed with the symbol’s id, so gradients and masks from different icons can’t collide. Turn on currentColor and every icon follows the text colour around it, which makes hover states and dark mode a single line of CSS.
The download includes the sprite, a demo page that shows every icon with its id, and a JSON list of ids and viewBoxes for build tools.
Why doesn’t <use href="sprite.svg#id"> work from my local file?
Browsers only allow external <use> references from the same origin, and opening HTML from your disk counts as a different one. Serve the page, or paste the sprite inline in the page.