svg-icon-sprite-example.md

First add the svg sprite to the markup, just after the opening body tag or just before closing body tag:

/* Example sprite of 4 icons */

<svg class="icon-sprite" style="width: 0; height: 0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-chat" viewBox="0 0 24 24">
      <title>chat</title>
      <path d="M20.029 15.99v-12.019h-16.058v14.038l2.019-2.019h14.038zM20.029 2c0.545 0 1.010 0.192 1.394 0.577s0.577 0.849 0.577 1.394v12.019c0 0.545-0.192 1.018-0.577 1.418s-0.849 0.601-1.394 0.601h-14.038l-3.99 3.99v-18.029c0-0.545 0.192-1.010 0.577-1.394s0.849-0.577 1.394-0.577h16.058z"></path>
    </symbol>
    <symbol id="icon-pdf" viewBox="0 0 24 24">
      <title>pdf</title>
      <path d="M14.019 11.471v-3.005h0.986v3.005h-0.986zM3.971 5.99v14.038h14.038v1.971h-14.038c-0.545 0-1.010-0.192-1.394-0.577s-0.577-0.849-0.577-1.394v-14.038h1.971zM8.995 9.5v-1.034h0.986v1.034h-0.986zM20.51 8.466v-1.49h-3.005v6.010h1.49v-1.971h1.514v-1.514h-1.514v-1.034h1.514zM16.519 11.471v-3.005c0-0.417-0.148-0.769-0.445-1.058s-0.653-0.433-1.070-0.433h-2.476v6.010h2.476c0.417 0 0.773-0.144 1.070-0.433s0.445-0.649 0.445-1.082zM11.495 9.5v-1.034c0-0.417-0.148-0.769-0.445-1.058s-0.653-0.433-1.070-0.433h-2.476v6.010h1.49v-1.971h0.986c0.417 0 0.773-0.144 1.070-0.433s0.445-0.649 0.445-1.082zM20.029 2c0.545 0 1.010 0.192 1.394 0.577s0.577 0.849 0.577 1.394v12.019c0 0.545-0.192 1.018-0.577 1.418s-0.849 0.601-1.394 0.601h-12.019c-0.545 0-1.018-0.2-1.418-0.601s-0.601-0.873-0.601-1.418v-12.019c0-0.545 0.2-1.010 0.601-1.394s0.873-0.577 1.418-0.577h12.019z"></path>
    </symbol>
    <symbol id="icon-time" viewBox="0 0 24 24">
      <title>time</title>
      <path d="M12.529 6.976v5.264l4.495 2.668-0.745 1.274-5.264-3.197v-6.010h1.514zM12 20.029c1.442 0 2.788-0.369 4.038-1.106 1.218-0.705 2.179-1.667 2.885-2.885 0.737-1.25 1.106-2.596 1.106-4.038s-0.369-2.788-1.106-4.038c-0.705-1.218-1.667-2.179-2.885-2.885-1.25-0.737-2.596-1.106-4.038-1.106s-2.788 0.369-4.038 1.106c-1.218 0.705-2.179 1.667-2.885 2.885-0.737 1.25-1.106 2.596-1.106 4.038s0.369 2.788 1.106 4.038c0.705 1.218 1.667 2.179 2.885 2.885 1.25 0.737 2.596 1.106 4.038 1.106zM12 2c1.827 0 3.518 0.457 5.072 1.37 1.506 0.865 2.692 2.051 3.558 3.558 0.913 1.554 1.37 3.245 1.37 5.072s-0.457 3.518-1.37 5.072c-0.865 1.506-2.051 2.692-3.558 3.558-1.554 0.913-3.245 1.37-5.072 1.37s-3.518-0.457-5.072-1.37c-1.506-0.881-2.692-2.075-3.558-3.582-0.913-1.554-1.37-3.237-1.37-5.048s0.457-3.494 1.37-5.048c0.881-1.506 2.075-2.7 3.582-3.582 1.554-0.913 3.237-1.37 5.048-1.37z"></path>
    </symbol>
    <symbol id="icon-video" viewBox="0 0 24 24">
      <title>video</title>
      <path d="M17.016 10.488l3.984-3.984v10.968l-3.984-3.984v3.528c0 0.272-0.1 0.504-0.3 0.696s-0.444 0.288-0.732 0.288h-12c-0.272 0-0.504-0.096-0.696-0.288s-0.288-0.424-0.288-0.696v-10.032c0-0.272 0.096-0.504 0.288-0.696s0.424-0.288 0.696-0.288h12c0.288 0 0.532 0.096 0.732 0.288s0.3 0.424 0.3 0.696v3.504z"></path>
    </symbol>
  </defs>
</svg>

Next reference the icons anywhere in the file:

/* Example of icon use in ul */

<ul class="card-list">
  <li class="card-list-item">
    <svg class="icon icon-time" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-time"></use>
    </svg>48 hour turn-around
  </li>
</ul>

Add some sensible css defaults for all svgs:

/* Global svg stuff */

svg {
  color: inherit;
  fill: currentcolor /* fill colour of the SVG will be inherited from the color value of its parent */
  max-width: 100%;
}

.icon-sprite {
  display: none /* hides sprite from front-end */
}

Style your components:

/* Example of styles for the list above... */

.card-list {
  margin: 2em 0
}

.card-list-item {
  margin-left: 0;
  display: flex;
  align-items: center /* Keeps icon and text vertically aligned */
}

.card-list .icon {
  height: 1em; /* 1em width & height allows icon to be scaled proportionally with the text */ 
  width: 1em; 
  margin-right: 1em
}

Note: you can have the sprite exist as an external file rather than embedding it in the html file. In this case you would change the path for the href link for the icon.

/* local */
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-time"></use>

/* external */
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite-file.svg#icon-time"></use>