Icon: Sizes

<div>
  <p class="font-sans-2xl line-height-body-1 text-bold margin-y-0">
  An icon relative to font size
    <svg class="usa-icon bottom-neg-05" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="../../dist/img/sprite.svg#arrow_forward"></use>
    </svg>
  </p>

  <p class="">
  An icon relative to font size
    <svg class="usa-icon bottom-neg-2px" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="../../dist/img/sprite.svg#arrow_forward"></use>
    </svg>
  </p>

  <table class="usa-table usa-table--borderless width-full">
    <caption>Fixed sizes</caption>
    <thead>
      <th>Modifier</th>
      <th>Icon</th>
      <th>Units</th>
      <th>Pixels</th>
    </thead>
    <tbody>
  {% for item in icons.sizes %}
    <tr>
      <th><code>.usa-icon--size-{{item.units}}</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-{{item.units}}" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>{{item.units}}</code></td>
      <td><code>{{item.pixels}}</code></td>
    </tr>
  {% endfor %}
    </tbody>
  </table>
</div>