SVG Sprites
Define icons in a hidden SVG using <symbol> and reuse them anywhere with <use href="#id">.
HTML
Intermediate
4 min read
SVG Icon Sprites
Example
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z"/>
</symbol>
<symbol id="icon-heart" viewBox="0 0 24 24">
<path d="M12 21C12 21 3 14 3 8a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-9 13-9 13z"/>
</symbol>
</svg>
<svg width="24" height="24" fill="gold"><use href="#icon-star"/></svg>
<svg width="24" height="24" fill="red"><use href="#icon-heart"/></svg> Pro Tip
SVG sprites replace icon fonts — more accessible and individually stylable.