SVG — Icon Sprite Pipeline

A build step merges many .svg files into one cached <symbol> sheet. You stamp icons with <use href="#id"> — one request, infinite reuse, themeable with currentColor.

folder of files → one sprite

Source: five separate icon files, each its own HTTP request and its own copy of <svg> boilerplate.

home.svg
search.svg
bell.svg
user.svg
gear.svg
↓ svgo + svg-sprite build step ↓
sprite.svg — one file, <symbol> per icon

    

    

      5 files, ~2,150 bytes + 5 requests
      → 1 sprite, ~780 bytes + 1 request
    

    
SVGO strips boilerplate from each icon; svg-sprite wraps each in a <symbol id> and concatenates. Shared xmlns and metadata are written once, not five times.

  


  

    
use it + theme it

    
Reference any symbol with <use>. Because the paths use currentColor, one CSS color re-themes every instance.

    

      color:
      
      size:
      
      
      
    

    

      
#ic-home

      
#ic-search

      
#ic-bell

      
#ic-user

      
#ic-gear

    

    

      
usage

      

    

    
For caching, the sprite is often an external file referenced as <use href="/sprite.svg#ic-home"> (cacheable across pages), or injected inline at the top of <body> for zero extra requests.