SVG

Symbols

SVG Symbols are great!

Use in your code by referencing to a <symbol>.

<button>
  <svg width="44" height="44"><use xlink:href="#symbol-close"></use></svg>
</button>

Store your symbols inline inside a hidden div.

<div class="u-hiddenVisually">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="symbol-close-x" viewBox="0 0 23 23">
      <polygon fill="currentColor" points="21.301,0.646 11.5,10.447 1.699,0.646 0.646,1.7 10.447,11.5 0.646,21.3 1.699,22.354 11.5,12.553 21.301,22.354 22.354,21.3 12.553,11.5 22.354,1.7 "></polygon>
    </symbol>
  </svg>
</div>