What are SVG sprites and how to use them
Reusable icons
An SVG sprite groups several icons into a single SVG using <symbol>, and you reuse them on the page with <use>. This reduces requests and keeps the icons in one place.
1. Define the symbols
<svg style="display:none"> <symbol id="ic-check" viewBox="0 0 24 24"> <path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2"/> </symbol> </svg>
2. Use them with use
<svg class="icon"><use href="#ic-check"></use></svg>
Repeat the use wherever you need the icon. One symbol, many uses.
3. Style with CSS
If you use stroke="currentColor" or fill="currentColor", the icon takes the CSS color:
.icon { width: 24px; height: 24px; color: #6c8cff; }
Advantages
- Fewer HTTP requests (all icons in one file/block).
- A single point to update an icon.
- Styleable and scalable like any SVG.
Create your icons
Design each icon in svgdesk, copy its code and wrap it in a <symbol> with its id and viewBox.