18F/web-design-standards

<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="{{ img_path }}/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="{{ img_path }}/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="{{ img_path }}/sprite.svg#accessibility_new"></use>
            </svg>
          </td>
          <td><code>{{ item.units }}</code></td>
          <td><code>{{ item.pixels }}</code></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>