Practical guide

Embed an SVG sprite with the img tag

Use one SVG file and select each image by its fragment identifier, for example icons.svg#heart. This guide uses the layer-based sprite produced by this generator.

Live example

Three images below load the same SVG file with different identifiers. No JavaScript is needed to display them.

#heart

#star

#home

Create your own sprite Download example ZIP

1. Place the files on your website

Unzip the example package. Keep index.html beside the img folder. For a generator export, also copy its CSS file and any included animation folder. Use the paths from your own export.

index.html
img/
  icons.svg
  css-sheet.svg

For a generator export, add its CSS reference inside your page’s <head>. With the standard folders:

<link rel="stylesheet" href="css/icons-sprite.css">

2. Insert the image tags

Insert these tags into the <body> of the example page. Paths are relative to that HTML file. The part after # must match the identifier in the SVG, including letter case.

<img src="img/icons.svg#heart" width="64" height="64" alt="Heart">
<img src="img/icons.svg#star" width="64" height="64" alt="Star">
<img src="img/icons.svg#home" width="64" height="64" alt="Home">

This only works with SVG files prepared for fragment selection. An arbitrary SVG containing several shapes or only <symbol> definitions is not equivalent to this example.

3. Set size and alternative text

The example icons are square. Set both dimensions to 32 to show them at 32 × 32 pixels. For other images, preserve their aspect ratio. The dimensions reserve space while the file loads.

Use a meaningful alt for informative images. Use alt="" for purely decorative images when nearby text already supplies the meaning. Do not repeat the same label unnecessarily.

<img src="img/icons.svg#heart" width="32" height="32" alt="Favourite">

Continue

SVG sprites vs. CSS sprites →

Generator FAQ

Technical references: MDN: SVG as an image · MDN: CSS image sprites