SVG sprite sheets with <symbol> and <use>

An SVG sprite packs many icons into a single file as <symbol> definitions. You then stamp any icon onto the page with a one-line <use> reference — one download, many icons, still recolorable.

How a sprite is structured

<svg style="display:none">
  <symbol id="i-home" viewBox="0 0 24 24"><path d="…"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24"><path d="…"/></symbol>
</svg>

Using an icon

<svg class="icon"><use href="#i-home" /></svg>

Each <use> clones a symbol. Because the icon is still SVG, you can colour it with fill: currentColor and size it with CSS — the sprite keeps the recolorability that icon fonts lacked while adding the single-request efficiency they had.

Are sprites still worth it?

With HTTP/2 multiplexing and modern bundlers that inline SVG components, sprites are less essential than they once were. They still shine when you serve many icons to a plain, framework-free site and want one cacheable file.

Frequently asked questions