svg-sprite

<!-- 
Place the SVG sprite inside a div with its display set to none. 
SVG sprites must appear before they are used in HTML source order and they must be hidden from view. 
Inlining the CSS means if there's any delay loading your stylesheet then the sprite will still be hidden
-->
<div style="display:none;">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 8.3 8.3" id="icon-close" aria-label="Close"><title>Close</title><path d="M8.3,0.3L8,0L4.2,3.8L0.3,0L0,0.3l3.8,3.8L0,8l0.3,0.3l3.8-3.8L8,8.3L8.3,8L4.5,4.2"/>
    </symbol>
  </svg>
</div>

<!-- 
Okay let's reference our SVG now:
Always put the height/width values in there. SVG can be a bit of a nightmare cross browser. 
Miss a height/width but declare a width/height in your CSS and you can get oddly shaped SVGs (e.g. too wide or too tall)
-->
<svg role="img" width="30 height="30">
  <use xlink:href="#icon-close" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>


<-- 
Sidenote about accessiblity (a11y): 
If I'm honest, I'm not 100% sure whether it is better to put your <title>s and/or aria-labels in your sprite or the SVG reference.
-->