You can add icons as bare SVGs into your markup, but you'll need to do some heavy lifting to get them to fit in.

Advertisement

Before You Get Started

Make sure you:

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">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -.125em;
    }
  </style>
    What time is it...
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" aria-hidden="true" focusable="false" 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>
Advertisement

Make Sure to Add Some CSS

But one of the downsides to SVG sprites is that extra styling is necessary to make them behave. Our Font Awesome javascript normally handles this, but in this case you will need to handle this yourself.

Here's an example:

<!-- Simple styling to size an SVG -->
<style>
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
  }
</style>

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!