Skip to main content

SVG Icons

    SVG Icons

    The SVG Icon object gives us a very simple implementation of inline text icons without the need for hefty font libraries or complex JavaScript SVG icon implementations.

    Links:

    Overview

    The SVG Icon object can be used with standalone SVGs as well as SVG maps. The o-svg-icon object is relative sized with em units, so it will scale with an inherited or set font size. The lg and xl size modifiers can be used to modify the relative size of the icon to its parent.

    <span class="o-svg-icon">
      <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
          <path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
    </span>
    <span class="o-svg-icon o-svg-icon--lg">
      <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
          <path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
    </span>
    <span class="o-svg-icon o-svg-icon--xl">
      <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
          <path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
    </span>
    

    Examples

    You'll most commonly use the o-svg-icon object with plain text or within inline icon links.

    <p>
      <span class="o-svg-icon u-m-r-xxs">
        <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
            <path d="M224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96zm89.6 256c-11 0-21.8 2.6-32.2 6.2-18 6.3-37.3 9.8-57.4 9.8s-39.4-3.5-57.4-9.8c-10.4-3.6-21.2-6.2-32.2-6.2C60.2 304 0 364.2 0 438.4V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c0-45.5 35.4-82.4 80-85.8v50c-23.1 6.9-40 28.1-40 53.4 0 30.9 25.1 56 56 56s56-25.1 56-56c0-25.3-16.9-46.5-40-53.4v-44.7c20.8 6.3 42.3 10.1 64 10.1 21.8 0 43.2-3.8 64-10.1v36.3c-28.2 7.5-48 34.5-48 64.6V488c0 4.2 1.7 8.3 4.7 11.3l10.3 10.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-5.7-5.7V456c0-19.4 17.4-34.8 37.4-31.6 15.7 2.6 26.6 17.4 26.6 33.3v23.6l-5.7 5.7c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l10.3-10.3c3-3 4.7-7.1 4.7-11.3v-32c0-29.7-20.5-54.5-48-61.6v-41.7c44.6 3.3 80 40.3 80 85.8V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c.2-74.2-60-134.4-134.2-134.4zM168 456c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24z" fill="currentColor"/>
      </span>
      Some text goes here
    </p>
    
    <a class="c-inline-icon" href="#">
      <span class="c-inline-icon__link styled-link">Open in a new tab</span>
      <span class="o-svg-icon o-svg-icon--lg">
        <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
            <path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
      </span>
      <span class="u-visually-hidden">Open in a new tab</span>
    </a>