<div>
  <h1>SVG Source</h1>
  <svg width="32" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs>
      
      <symbol id="symbol-clock" width="32" height="32">      
        <path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1zM16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
      </symbol>
      
      <symbol id="symbol-heart" width="32" height="32">      
        <path d="M32,11.2c0,2.7-1.2,5.1-3,6.8l0,0L19,28c-1,1-2,2-3,2s-2-1-3-2L3,18c-1.9-1.7-3-4.1-3-6.8C0,6.1,4.1,2,9.2,2c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,1.9,32,6.1,32,11.2z"/>
      </symbol>
      
      <symbol id="symbol-arrow-right" width="32" height="32">
        <path d="M32,15.9l-16-16v10H0v12h16v10L32,15.9z"/>
      </symbol>

    </defs>
    <use y="0" xlink:href="#symbol-clock"/>
    <use y="32" xlink:href="#symbol-heart"/>
    <use y="64" xlink:href="#symbol-arrow-right"/>
  </svg>
</div>

<div>
  <h1>Icons w/ Background Position</h1>
  <div class="icon icon-one"></div>
  <div class="icon icon-two"></div>
  <div class="icon icon-three"></div>
</div>
<div>
  <h1>Same Icons Scaled</h1>
  <div class="icon icon-one icon-lg"></div>
  <div class="icon icon-two icon-lg"></div>
  <div class="icon icon-three icon-lg "></div>
</div>
.icon {
  width: 48px;
  height: 48px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/coyier-sprite.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}

.icon-two { background-position: 50% 50%; }
.icon-three { background-position: 50% 100%; }

.icon-lg {
  height: 128px;
  width: 128px;
}

/*Layout*/

body {
  height: 100%;
  margin: 0 0 0 10px;
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.