Build an SVG Sprite from Icons Exported with IconVectors

This guide shows how to export clean SVG icons in Axialis IconVectors, combine them into a single SVG sprite using the svg-sprite CLI, and reference icons in HTML with <use>. The structure and SEO mirror your latest tutorials for consistency.

Why an SVG sprite?

• Performance & caching — one HTTP request fetches dozens of icons; the sprite is cached across pages.
• Consistent theming — when icons use currentColor, each instance adopts its parent’s CSS color.
• Clean HTML — instances are a tiny <svg><use> pair instead of inlining full paths everywhere.

Step‑by‑step in IconVectors & your build tool

1. Export clean SVGs from IconVectors
   • Open or create icons: File → Open… (Ctrl+O) or New Icon (Ctrl+N).
   • Make them themeable: set Fill/Stroke to currentColor so instances can be recolored via CSS. (Verify with View → Source Code (F3).)
   • Export compact SVGs: File → Export → Export Minified to produce lean files for your sprite.

   

2. Organize your exported SVGs

   Place all your exported icons in a folder such as icons/:

   project/
     icons/
       camera.svg
       check.svg
       user.svg
       ...

3. Build the sprite with svg-sprite

   Use the CLI to generate a single sprite.svg that exposes each icon as a <symbol>.

   Install (once per project):

   npm i -D svg-sprite
   # or run ad‑hoc
   npx svg-sprite --version

   Create a minimal config (save as sprite.config.json):

   {
     "mode": {
       "symbol": {
         "dest": "dist",
         "sprite": "sprite.svg"
       }
     },
     "shape": {
       "id": { "separator": "-", "generator": "icon-%s" }
     },
     "svg": {
       "xmlDeclaration": false,
       "doctypeDeclaration": false
     }
   }

   Generate the sprite:

   npx svg-sprite --config sprite.config.json icons/*.svg
   # → creates dist/sprite.svg with <symbol id="icon-camera">, <symbol id="icon-check">, ...

4. Use icons with <use>

   Reference symbols from the external sprite file. Each instance can be sized and colored independently.

   <!-- External sprite usage -->
   <svg width="24" height="24" class="text-slate-700" aria-hidden="true">
     <use href="/dist/sprite.svg#icon-camera" />
   </svg>
   
   <svg width="20" height="20" class="text-emerald-600" aria-hidden="true">
     <use href="/dist/sprite.svg#icon-check" />
   </svg>

   Inline sprite (optional) — embed the generated sprite.svg at the top of your HTML to avoid another request:

   <!-- Paste dist/sprite.svg somewhere near the top of the page -->
   <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
     <symbol id="icon-user" viewBox="0 0 24 24">…</symbol>
   </svg>

5. Theme with CSS

   Because the paths in your icons use currentColor, each instance inherits color from CSS:

   .btn-primary .icon { color: #2563eb; }
   [data-theme="dark"] .btn-primary .icon { color: #93c5fd; }

   <button class="btn-primary">
     <svg class="icon" width="20" height="20" aria-hidden="true">
       <use href="/dist/sprite.svg#icon-user" />
     </svg> Save
   </button>

Notes & troubleshooting

• Icon doesn’t change color? In IconVectors, set fills/strokes to currentColor before export, then verify in View → Source Code (F3).
• Wrong symbol IDs? The CLI uses file names by default. Adjust the generator in the config or rename the SVGs (e.g., icon-camera.svg → #icon-camera).
• Path issues when using an external sprite: ensure the href points to the correct URL (e.g., /dist/sprite.svg#icon-…), minding your bundler/dev‑server base path.
• Accessibility: decorative icons should be aria-hidden="true". For meaningful icons, add role="img" and aria-label.