SVG Sprite Sheet Generator
Combine multiple pasted SVG icons into a single sprite sheet using <symbol id> elements, each keeping its own viewBox. Emits the sprite markup plus ready-to-use <use> reference snippets (external file, inline, or CSS background).
Input
Each <svg> block becomes its own <symbol> in the sprite. Add <title>icon-name</title> inside an icon to name it — otherwise it's auto-numbered (icon-1, icon-2, …).
Options
Strip fill and stroke attributes so icons can be colored with CSS instead.
Remove comments, metadata, editor namespaces (Inkscape, Illustrator), and collapse whitespace.
Output
| Property | Value |
|---|---|
| No data yet | |
Guides
Combine several separate SVG icons into a single sprite sheet, the standard <symbol id="..."> pattern used by icon libraries and design systems everywhere. Instead of shipping ten separate .svg files (ten HTTP requests, ten sets of <svg> wrapper boilerplate), you ship one sprite and reference each icon with a lightweight <use> element.
How to use it
- Paste two or more complete
<svg>...</svg>documents into the input box, one after another — copy them straight from an icon set, an exported Figma/Illustrator file, or any existing SVG source. - Name an icon by adding a
<title>element inside it, e.g.<svg ...><title>arrow-right</title>...</svg>. Icons without a<title>are auto-numbered (icon-1,icon-2, …). - Optionally strip
fill/strokeattributes so icons can be recolored with CSS (fill: currentColor), and/or optimize the output (removes comments, editor metadata like Inkscape/Illustrator namespaces, and collapses whitespace). - Pick a usage snippet style — External Reference (
sprite.svg#id, for a separately hosted sprite file), Inline Reference (#id, for a sprite pasted directly into the page), or CSS Background (background: url(...), for non-<use>contexts like list bullets or::beforecontent). - Copy or download the sprite sheet (
sprite.svg) and the matching usage snippets.
How the sprite is built
Each pasted <svg> document is parsed independently: its root wrapper (and any xmlns/viewBox/width/height attributes) is stripped away, and its inner markup — paths, groups, whatever it contains — becomes the children of a <symbol>. Critically, each symbol keeps its own viewBox, taken from the source SVG's viewBox attribute, or derived from width/height if none is present (falling back to 0 0 24 24 otherwise). That's what makes a sprite work for icons of genuinely different native sizes — a 16×16 glyph and a 512×512 logo can share one sprite and each still render at correct proportions via <use>.
The final sheet wraps every symbol in one <svg style="display:none"> — hidden from layout, but still parsed and available for any <use> element on the page to reference by #id.
Where do I put the sprite?
For Inline Reference, paste the generated sprite <svg> once near the top of your page's <body> (it renders nothing, since it's display:none), then use <svg><use href="#icon-id"/></svg> anywhere you want that icon to appear. For External Reference, save the sprite as sprite.svg on your server and point <use href="sprite.svg#icon-id"/> at it — cacheable across pages, but requires same-origin hosting (Safari has historically been stricter about cross-origin <use xlink:href>).
Does combining icons into a sprite actually save bytes?
Sometimes — it depends how much wrapper boilerplate (xmlns, <?xml?> declarations, per-file viewBox/width/height) each individual SVG was carrying. The size comparison table shows the exact before/after. The bigger win is usually fewer HTTP requests and simpler markup, not raw byte count.
Is my SVG uploaded anywhere?
No — the sprite is built entirely in your browser (or in memory, if called via the API). Nothing is stored or logged.
Can I use this with icon fonts or emoji instead of SVG?
No — every input must be a well-formed <svg>...</svg> document; icon fonts and emoji aren't compatible with the <symbol>/<use> pattern this tool generates.