How to Create an SVG Sprite Sheet for Icons

An SVG sprite sheet consolidates multiple individual vector graphics into a single file or container, dramatically reducing HTTP requests, improving page load speeds, and simplifying icon management across a web project. This guide details how to construct an SVG sprite sheet using standard <symbol> elements, implement the icons within your HTML using the <use> tag, and style them dynamically using CSS.

1. Prepare Individual SVG Files

Before assembling the sprite, each SVG icon must be cleaned and standardized:

  1. Remove hardcoded dimensions: Delete width and height attributes from individual SVGs so they can scale flexibly.
  2. Retain the viewBox: Ensure every SVG retains its viewBox attribute (e.g., viewBox="0 0 24 24"), which defines the coordinate system.
  3. Normalize fills and strokes: Replace hardcoded color values (such as #000000) with currentColor if you plan to style the icons using CSS text color properties.

2. Assemble the Sprite Using <symbol>

The most robust method for creating an SVG sprite is wrapping individual graphics in <symbol> tags inside a parent <svg> wrapper.

Create a file named sprite.svg (or embed it directly into your HTML document):

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <!-- Icon 1: Search -->
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-5.2-5.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </symbol>

  <!-- Icon 2: User -->
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" fill="none" stroke="currentColor" stroke-width="2"/>
    <circle cx="12" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
  </symbol>

  <!-- Icon 3: Settings -->
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" fill="none" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

Key elements in this structure: - style="display: none;": Prevents the sprite sheet from rendering visually when embedded directly into an HTML document. - id attribute: Serves as the unique identifier for each icon when referenced elsewhere. - <symbol>: Acts as an independent graphics template that is instantiated only when called.

3. Render Icons with the <use> Element

To display an icon on a web page, reference its unique ID inside an SVG container using the <use> tag.

Internal (Inline) Sprite Reference

If the sprite is embedded at the beginning of your HTML body:

<svg class="icon icon-search" aria-hidden="true">
  <use href="#icon-search"></use>
</svg>

External Sprite Reference

If the sprite is saved as a standalone file (e.g., assets/sprite.svg):

<svg class="icon icon-user" aria-hidden="true">
  <use href="assets/sprite.svg#icon-user"></use>
</svg>

Note: External referencing requires the sprite to be served over the same origin or configured with proper CORS headers.

4. Style the Icons with CSS

Because the icons use currentColor and lack explicit pixel dimensions within the sprite, they can be sized and colored using global or component-level CSS:

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
}

/* Modifier classes */
.icon-large {
  width: 32px;
  height: 32px;
}

.icon-primary {
  color: #0066cc;
}

.icon-primary:hover {
  color: #004499;
}

5. Automate Sprite Generation

Manually updating large sets of icons can become inefficient. Modern development workflows often automate this process using build tools: