Bare SVGs can be a powerful way to add icons to your pages, as long as you're willing to do some heavy lifting.

First Things First!

Make sure you’ve found the .svg files in Font Awesome Alpha zip in your project and are ready to manage some mischief. You can also copy any icon's SVG code when viewing their details.

Basic Use

With the power of vectors, the browser can draw an SVG in no time flat. Just add the SVG code straight into your HTML.

<div class="time-to-get-ill">
  What time is it...
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon svg-inline--fa fa-clock fa-w-16"
    aria-hidden="true"
    focusable="false"
    data-prefix="fa-regular"
    data-icon="clock"
    viewBox="0 0 512 512"
  >
    <path
      fill="currentColor"
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
    />
  </svg>
</div>

What time is it...

Some Styling Support Is Needed

But one of the downsides to SVG sprites is that extra styling is necessary to make them behave. When using symbols you will need to handle this yourself.

<!-- A quick, reasonable place to start with styling your symbols -->
<style>
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
  }
</style>