SVG sprite generator
Combine icons into an SVG sprite
Drop a set of icons and get one sprite file of <symbol> elements. Reference any icon with a single <use> tag and style it with CSS.
Runs in this tab. Nothing is uploaded.
Symbols
Click an icon for its snippet- Add two or more SVG icons, or try the samples.
Usage
sprite.svg
How the sprite is built
- IDs from file names.
Arrow Left.svgbecomesicon-arrow-left. Two files that end up with the same name get-2,-3and a warning. Change the prefix above, or leave it empty. - Safe internal IDs. Gradients, masks and clip paths inside each icon are renamed (
icon-flame-a), so two icons that both useid="a"no longer steal each other’s gradient. - Clean symbols. Each icon keeps its viewBox (one is made from width and height if missing), plus fill and stroke settings from its root. Editor data, comments, scripts and external references are removed.
Inline the sprite once near the top of the page’s <body>, then show an icon with <svg><use href="#icon-name"></use></svg>. You can also link to the file, as in /sprite.svg#icon-name, as long as it is served from the same origin. With currentColor the icons take the CSS color of their container. The sprite is hidden with a zero-size style rather than display:none, which would break gradients in some browsers.
Questions
Should I use a sprite or separate SVG files?
A sprite means one request and one cache entry for a whole icon set, and icons can be coloured with CSS. Separate files are simpler when a page only needs one or two icons.
Why doesn’t my external sprite show up?
Browsers only allow <use> to reference files from the same origin, and the server must send the sprite as image/svg+xml. Inline the sprite in the page if it lives on a CDN.
More SVG tools
- SVG RepairDiagnose and fix broken XML, missing xmlns or viewBox, editor junk, bad IDs and scripts.
- SVG OptimizerSVGO with plugin toggles, precision and multipass. Batch files and download a ZIP.
- SVG ViewerZoom and pan on a checkerboard or colour, see dimensions, file size and the element tree.
- SVG to PNGExport PNG, JPG or WebP at 1× to 8× or an exact width, with any background.
- SVG to JSXTurn an SVG into a React component with camelCase props, style objects and TypeScript.
- SVG to Data URIMinimal URL-encoding or base64, ready-made CSS background-image snippets, size comparison.
- SVG SanitizerRemove scripts, event handlers, javascript: links, foreignObject and external references.
- SVG Path EditorInspect path commands, drag points and handles, convert absolute ↔ relative, round and minify.
- SVG Sprite GeneratorCombine icons into one <symbol> sprite with IDs from file names and a usage snippet.