SVG Sprite

by davidxmartins

HTML

<svg width="0" height="0" class="hidden">

    <symbol id="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
      <title>Search</title>
      <circle cx="348.28678" cy="349.28678" r="303.28678" transform="translate(-144.97221 348.57967) rotate(-45)"></circle>
      <line x1="569.26355" y1="570.26355" x2="752.56558" y2="753.56558"></line>
    </symbol>
    
    <symbol id="shopping-bag-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
    <defs>
    <style>

    </style>
</defs>
      <title>Shopping Bag</title>
      <path d="M688.46315,754H113.03685a38.462,38.462,0,0,1-38.24467-42.54507L130.25,192h541l55.45782,519.45493A38.462,38.462,0,0,1,688.46315,754Z"></path>
      <path d="M544.5041,301l.48566-110.76025A144.23975,144.23975,0,0,0,400.75,46c-79.66142,0-144.23975,64.57834-144.23975,162.23975V301"></path>
    </symbol>
</svg>



  <svg class="small-icon">
    <use href="#search-icon"></use>
  </svg>
  <svg class="small-icon">
    <use href="#shopping-bag-icon"></use>
  </svg>

CSS

.small-icon {
    stroke: black;
    stroke-width: 80;
    stroke-linecap: round;
    fill: none;
    width: 50px;
    height: 50px;
    transition: all 0.25s ease;
  }