Why it matters
An SVG sprite puts all your icons into one file of symbol elements, and each icon on the page is a small svg with a use element pointing at one. It's the lightest way to ship an icon set, and icons can take the surrounding text colour. Built by hand, though, sprites break in quiet ways: two icons exported with the same gradient id (they all seem to be called "a"), a gradient that vanishes because the sprite is hidden with display: none, or an icon that ignores CSS colour because its fill is hard-coded.
This builder fixes those as it goes. Every id is prefixed with its icon's name, and every url(#id), href and aria reference is rewritten to match. Gradients, clip paths and masks move into one shared defs block, and the sprite is hidden in a way that keeps them rendering. Icons with a single colour switch to currentColor, so they follow your CSS. Scripts and event handlers are stripped. The preview draws each icon from the finished sprite, so what you see is what you ship.
How to use it
- Drop your SVG files, or paste them with a comment line naming each.
- Choose the id prefix and when to use currentColor.
- Check the preview and the notes.
- Copy the sprite into your page or save it as a file, and use the snippets.
FAQ
Why do gradients disappear in my sprite?
If the sprite is hidden with display: none, Chrome and Firefox don't render gradients defined inside it. This builder moves them to shared defs and hides the sprite with zero size instead.
Inline sprite or external file?
Inline (pasted into the page) works everywhere and has no extra request. An external file can be cached, but it has to be on the same origin to work with use.
Why weren't my multi-colour icons changed to currentColor?
Because that would make them one colour. By default only single-colour icons switch. Choose Every icon to change them all.
Are my files uploaded?
No. They're processed in your browser.
