Last updated
What Are SVG Sprites?
An SVG sprite is a single SVG file containing multiple icons or symbols,
each defined as a <symbol> element with a unique ID.
Individual icons are referenced using <use href="#icon-id"/>.
This technique reduces HTTP requests (one file instead of many) and allows
icons to be styled with CSS and reused multiple times without duplication.
SVG Sprite Structure
<!-- sprite.svg -->
<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>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
</svg>
<!-- Usage in HTML -->
<svg width="24" height="24" aria-hidden="true">
<use href="sprite.svg#icon-home"/>
</svg>
<svg width="24" height="24" aria-hidden="true">
<use href="sprite.svg#icon-search"/>
</svg>Inline Sprite (No External File)
For better performance (no extra HTTP request), inline the sprite SVG directly
in the HTML <body> at the top, hidden with CSS.
Then reference icons with <use href="#icon-id"/> (no filename needed).
This also allows CSS to style the icon fills and strokes using currentColor.
/* Make icons inherit text color */
.icon { fill: currentColor; width: 1em; height: 1em; }
/* Override per context */
.btn-danger .icon { fill: #E74C3C; }