SVG Symbol Definitions

1-global-symbol-list.html

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32">
      <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
    </symbol>

    <!-- etc. -->
    <symbol>
      <path></path>
    </symbol>
    
    <!-- etc. -->
    <symbol>
      <path></path>
    </symbol>

  </defs>
</svg>

2-use-in-template.html

<svg class="icon icon-home">
  <use xlink:href="#icon-home"></use>
</svg>

3-icon-styles.css

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

e.g. https://icomoon.io/app