SVGFlow
Open editor

SVG Sprite Builder

Merge several SVG icons into one sprite of <symbol> definitions, referenced with <use>. One request, one cache entry, and every icon still styleable from CSS.

Icons—
Drop several SVGs at once
Each becomes a <symbol> with the file name as its id.
Sprite
Add icons to build the sprite.
Symbols0
Usage
Add icons to see the markup.

How it works

Each dropped file's root <svg> becomes a <symbol> that keeps its own viewBox, so icons drawn on different grids coexist in one sprite. The ids default to the file names and are editable inline — they become the fragment you reference. The tool emits both the sprite document and a ready <use> snippet for every icon in it.

When to use it

The same icons appearing many times across a page or a server-rendered site: one definition, parsed once, referenced everywhere, with no per-icon markup weight beyond the <use> line. Sharing an icon set across pages that don't share a JavaScript bundle. It pairs with, rather than replaces, components — the practical split is components for the handful of icons in an app shell and a sprite for the long tail, as argued in the React guide.

Common problems

  • Icons don't render at all. The sprite is being referenced through <img> or from another origin. <use> needs the sprite inline in the same document — paste it at the top of <body>.
  • Everything vanished when you hid the sprite. Hiding it with display: none has historically taken gradient and filter definitions down with it in some browsers. Hide it with width="0" height="0" and absolute positioning instead.
  • CSS won't style the shapes inside an icon. <use> renders shadow content: inherited properties like color cross the boundary — which is why currentColor works — but selectors do not match inside. Style the <svg>, and design multi-part icons around inheritance.
  • Two sprites on one page fight. Ids are global to the document, not to the sprite. Prefix the ids per sprite — the rename field exists for exactly this.

Notes

  • Each symbol keeps its own viewBox, so icons drawn on different grids can live in the same sprite.
  • Inline the sprite at the top of the document body. A sprite loaded through <img> cannot be referenced by <use>, and a cross-origin one is blocked outright.
  • Ids must be unique across the whole page, not just the sprite — prefix them if you ship more than one.

Related tools