What the SVG Icon Sprite Generator does
This SVG sprite generator combines many icon files into one SVG of <symbol> elements, so a page can draw any icon with <svg><use href="#id"></use></svg>. Each file name becomes a clean, unique id, each icon keeps its viewBox, and colours can be swapped for currentColor so icons follow the surrounding text colour.
It also gives you the <use> snippets for an inline or an external sprite, a table of what went in, and a standalone preview page. Files are read and combined in your browser and are never uploaded.
How to use it
- Drop your .svg icon files onto the drop area (up to 300 files, 512 KB each), or open 'Paste an icon instead' to add markup with a file name.
- Optionally set an id prefix such as
icon, sohome.svgbecomesicon-home. - Leave 'Replace fills and strokes with currentColor' on for single-colour interface icons; turn it off for multi-colour illustrations.
- Press Build sprite and read the warnings: missing viewBox, renamed ids and removed scripts are all listed.
- Download
sprite.svg, then either paste it right after<body>and use the inline snippets, or serve it as a file and use the external snippets.
Reading the results
Every symbol is the icon's own content with the root <svg> replaced by <symbol id viewBox>. Presentation attributes on the old root, such as fill="none" or stroke-width, are carried onto the symbol so outline icons still draw correctly.
Ids inside an icon, such as a gradient id="a", are rewritten to <symbol-id>-a together with every url(#a) and href="#a" that points at them. Without this, two icons that both define id="a" would silently use each other's gradient.
'Colours on shapes' lists the fill and stroke values found on the icon's elements before any currentColor replacement. More than one colour with currentColor on means the icon will become single-colour, and the tool warns you.
Worked example: Four outline icons into one 878-byte sprite
The 'Four outline UI icons' example loads home.svg, search.svg, close.svg and menu.svg, each a 24 x 24 outline icon with stroke="#111827" on its root. The sprite has four symbols with ids home, search, close and menu, each with viewBox="0 0 24 24" and the stroke rewritten to currentColor.
The four input files total 802 bytes; the sprite is 878 bytes because the wrapper <svg> and the four <symbol> tags repeat the shared attributes once per icon. The saving is not in bytes but in requests: the page makes one request (or none, inline) instead of four, and the browser parses each icon once.
In the 'Mixed exports' example, Star.svg and star.svg both slug to star, so the second becomes star-2; Arrow Right.svg has no viewBox, so one is made from its width and height (0 0 24 24); and an onload handler is removed.
Limitations: what the result does not prove
- An external sprite referenced with
<use href="/icons/sprite.svg#id">must be served from the same origin as the page; browsers block cross-origin<use>. - Content inside
<use>sits in a closed shadow tree, so page CSS can only reach it through inherited properties such ascolorandfill, or CSS custom properties. - Icons that rely on CSS in a
<style>block, masks with external images, or scripts will not behave the same inside a sprite. Styles are kept but not scoped, so class names can collide between icons. - currentColor replacement cannot make a multi-colour illustration adapt sensibly; it simply flattens every colour to one.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- W3C - SVG 2, The symbol element
- W3C - SVG 2, The use element
- MDN - <use>
- W3C - WAI-ARIA 1.2, aria-hidden
Frequently asked questions
What is the difference between an SVG sprite and an icon font?
An SVG sprite keeps each icon as vector shapes with its own viewBox, so it renders sharply, can have several colours, and is announced to screen readers only when you add a title. An icon font maps icons to characters, which can break with font loading, anti-aliasing and assistive technology.
Should the sprite be inline in the HTML or a separate file?
Inline sprites work everywhere and need no extra request, but they add to every HTML page and are not cached separately. An external sprite.svg is cached once and shared across pages, but must be same-origin. Many sites inline a small core set and use an external file for the rest.
Why does every symbol need a viewBox?
The viewBox tells the browser which area of the icon's coordinate system to map onto the <svg> that uses it. Without one, a symbol cannot scale, so a 24-unit icon drawn in a 48-pixel box stays at 24 pixels. The generator makes a viewBox from width and height when it can and refuses the icon when it cannot.
How do I make sprite icons change colour on hover?
Build the sprite with currentColor, then set color on the outer <svg> or its parent, for example .btn:hover .icon { color: #0d6efd; }. Because the symbol's fills and strokes use currentColor, they inherit the new colour through the <use> element.
Are the icons accessible to screen readers?
The snippets mark icons aria-hidden="true", which is right for decorative icons next to visible text. For an icon that stands alone, such as an icon-only button, give the button an aria-label or keep the title option on and add role="img" with a label on the outer svg.
Why were some ids in my icons renamed?
Ids in one HTML document must be unique, and a sprite puts every icon into the same document. Two icons exported from the same tool often both contain id="a" or id="clip0"; the generator prefixes each with the symbol id and updates every reference so both icons keep their own gradients and clip paths.
Last reviewed by the A2Z.Tools team against the sources listed above.
