Bare SVGs on the Web

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.

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.

What time is it…

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.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>

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>