SVG Sprite Generator

Combine multiple SVG icons into a single SVG sprite sheet with symbol references.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG Sprite Generator does, with a checked example

An icon set usually means many small SVG files. This tool takes the icons you paste and packs them into one sprite: a single SVG document whose symbols each hold one icon, addressable by id. Pages then draw an icon with a one-line reference instead of re-inlining its markup, and the browser fetches one file instead of many. The part people get wrong is the viewBox: it must travel from each source icon onto its symbol, or the icon cannot scale. The generator carries it over, but an icon pasted without a viewBox gives the sprite nothing to scale by.

Worked example

A concrete input and expected output from the current implementation.

Input

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>
<svg viewBox="0 0 24 24"><path d="M12 4l8 12H4z"/></svg>

Expected output

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-1" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></symbol>
  <symbol id="icon-2" viewBox="0 0 24 24"><path d="M12 4l8 12H4z"/></symbol>
</svg>

Each pasted icon becomes one <symbol> carrying its original viewBox and inner markup, so the drawing still scales inside any <use>. Ids are assigned in paste order; the root stays hidden because a sprite renders nothing until a use element references a symbol.

How the result is produced

Packing icons into symbols

Every pasted icon is reduced to its drawing content: the root wrapper's own attributes are discarded, while the viewBox and inner elements move into a <symbol> under one shared root. Each symbol gets a unique id, in paste order unless the source already names the icon. Because the root is hidden, the sprite is only a store of definitions; it contributes nothing visible by itself.

Drawing with use

To draw an icon, place a <use> element that points at the symbol: <svg><use href="#icon-1"/></svg>. The use element sets the rendered size, either through width and height attributes or CSS, and the symbol's viewBox scales the drawing into it. All symbols share one document, so one fetch serves every reference - the reason a sprite replaces a directory of icon files.

Good uses

A site that reuses the same twenty interface icons: generate the sprite once, load it in the layout, and draw every icon with a <use> tag, so the browser caches one asset instead of twenty.
A page that inlines the same handful of icons over and over: paste each icon once, inline the sprite in the body, and replace the repeated markup with short references - the HTML shrinks and every icon stays identical.
A design handoff that arrives as dozens of exported SVG files: combine them into one sprite, then update every icon site-wide by regenerating one artifact.

Limits and checks

Opening the generated sprite shows nothing or a blank block. That is correct: symbols are definitions and draw only where a <use> points at them. A page that inlines the sprite and nothing else looks exactly like a page that never loaded it.
An icon pasted without a viewBox yields a symbol that cannot scale: the <use> sets the box, but nothing maps the drawing onto it, so the icon renders at its raw coordinates. Preview the result at two or three sizes before trusting it.
Keeping the sprite as a separate file and referencing it cross-document with <use href="sprite.svg#icon-1"> works only over same-origin HTTP(S). From a file:// page or another origin the reference silently draws nothing; inline the sprite into the page when in doubt.

Common questions

Why can't I recolor an icon with CSS?

If the icon's markup uses fill="currentColor", the icon takes the text color around it and CSS coloring works. If the source has a hardcoded fill, that fill wins and no stylesheet rule overrides it. The generator preserves the markup as pasted, so check the source icons - switch their fills to currentColor to make them tintable.

How do I put one of these icons on a page?

Load the sprite into the document once - it is hidden, so position it anywhere - then at each spot where the icon belongs, write <svg width="24" height="24"><use href="#icon-1"/></svg>. The width and height (or CSS) control the rendered size; the symbol supplies the drawing. Change the size by editing the use element, not the sprite.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

JSON Formatter & Validator

Format, validate, and beautify JSON with syntax highlighting and error detection.

Base64 Encoder / Decoder

Encode text or files to Base64 and decode Base64 strings back to their original form.

SQL Formatter & Beautifier

Format and indent SQL queries for better readability across all major dialects.

HTML to Markdown Converter

Convert HTML markup into clean Markdown syntax with support for tables and lists.

Markdown to HTML Live Preview

Write Markdown and see the rendered HTML output in real time with live preview.

Diff / Patch Viewer

Visualize unified diffs and patch files with color-coded additions and deletions.