Svg markup and symbol svg for multiple icons.

svg-markup.html

<svg role="img" aria-labelledby="uniqueTitleID uniqueDescID" id="" class="" viewBox="# # # #" >
  <title id="uniqueTitleID">Title</title> <!-- for screen readers, must be first child -->
  <desc id="uniqueDescID">Title</desc> <!-- for screen readers -->
  <g>
    
  </g>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=""></use>
</svg>

symbol-svg.html

<!-- Standalone Icon, Meaningful -->
<svg role="img" height="" width="" fill="#fff">
  <title>Title</title>
  <use xlink:href="symbol.svg#symbol-1"></use>
</svg>

<!-- Standalone Icon, Decorative -->
<svg role="img" aria-hidden="true" height="" width="" fill="#fff">
  <title>Title</title>
  <use xlink:href="symbol.svg#symbol-1"></use>
</svg>

<!-- Linked Icon, no paired text -->
<a href="link" aria-label="Descriptive, alternative text">
  <svg height="" width="" fill="#fff">
    <title>Title</title>
    <use xlink:href="symbol.svg#symbol-1"></use>
  </svg>
</a>

<!-- Linked Icon, with static text -->
<a href="link" aria-label="Descriptive, alternative text">
  <svg height="" width="" fill="#fff">
    <title>Title</title>
    <use xlink:href="symbol.svg#symbol-1"></use>
  </svg>
  Static Text
</a>

<!-- Linked Icon, with dynamic text -->
<a href="link">
  <span id="descriptive-dynamic-value"></span>
  <span class="descriptive-offscreen-text"></span>
  <svg aria-hidden="true" height="" width="" fill="#fff">
    <title>Title</title>
    <use xlink:href="symbol.svg#symbol-1"></use>
  </svg>
  Static Text
</a>

symbol.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0">

  <!-- Symbol 1 -->
  <symbol id="symbol-1" viewBox="# # # #">
    <!-- path stuffs here -->
    <path transform=""/>
  </symbol>

</svg>