Toolcroft

Image Tools

SVG Sprite Generator - Combine SVG Icons

Upload multiple SVG files and combine them into a single SVG sprite sheet with <symbol> elements. Download the sprite sheet and get <use> snippets for each icon.

What is an SVG sprite?

An SVG sprite is a single SVG file containing multiple icons defined as <symbol> elements, each with a unique ID. Individual icons are referenced anywhere in the page using <use href="#icon-id">. This pattern eliminates multiple HTTP requests for icon files and allows re-using the same icon at multiple sizes.

Sprite structure

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
</svg>

<!-- Use anywhere -->
<svg width="24" height="24">
  <use href="#icon-home" />
</svg>

Advantages over icon fonts

  • True vector shapes, not glyphs - better rendering and accessibility.
  • Can include multiple colors and gradients per icon.
  • Individual icon accessibility: add <title> and aria-label inside each <symbol>.
  • No font loading FOUT (flash of unstyled text).

How to build a sprite file

  1. Collect your individual SVG icon files (e.g., from Heroicons, Feather, or custom designs).
  2. For each icon, strip the outer <svg> tag and keep only the inner paths and shapes.
  3. Wrap each icon's content in <symbol id="icon-name" viewBox="0 0 24 24">…</symbol>.
  4. Combine all symbols inside a single hidden <svg style="display:none"> at the top of your HTML body.
  5. Reference icons anywhere with <svg><use href="#icon-name"/></svg>.

Icon sizing with viewBox

Always set a viewBox attribute on each <symbol> element (e.g., viewBox="0 0 24 24"). Without it, icons will not scale when referenced at different sizes via CSS width and height. The viewBox defines the internal coordinate system of the icon, independent of how large it is rendered on screen.

Lazy loading large sprite files

Very large sprite files (hundreds of icons) can delay initial page render if inlined in the HTML. Mitigation strategies:

  • Inline only the icons needed above the fold; lazy-load the rest after the page loads.
  • Fetch the sprite SVG file via JavaScript and insert it into the DOM after the initial paint: fetch('/sprites.svg').then(r => r.text()).then(svg => document.body.insertAdjacentHTML('afterbegin', svg)).
  • Use icon bundlers (like vite-plugin-svgr) to split icons into per-route chunks.