Skip to content
Font Awesome Docs

SVG Symbols

Looking to use the SVG + JS method to get your icon Sprites to make repeated icons more performant on your page? We’ve got your back.

We’ll cover the basics of when, and how, to use SVG Sprites to improve load time on sites that repeat the same icons.

You might be wondering how rendering icons with JavaScript affects performance. Well you’re not the only one. We worried about this while we were developing it and even took some special measures to make sure it was as fast as we could make it.

Our testing shows that for the typical number of icons most people use on a site, the loading and rendering time for SVG+JS method is faster than Web Fonts.

A Case for SVG Symbols

The case below is a great one for SVG Symbols – there are a bunch of the same icon repeated on the page, so you’ll get a big performance boost by loading each of them only once using the step-by-step method below.

Font Awesome 6 installed and being activated in Font Explorer X on Mac OS X

Step-by-Step

We’ll define these icons as symbols: pencil, trash, and star.

  <!-- Define the icon symbols, these are invisible on the page -->
  <i data-fa-symbol="truck" class="fa-solid fa-truck fa-fw"></i>
  <i data-fa-symbol="truck-bolt" class="fa-regular fa-truck-bolt fa-fw"></i>
  <i data-fa-symbol="truck-container" class="fa-light fa-truck-container fa-fw"></i>
  <i data-fa-symbol="truck-droplet" class="fa-thin fa-truck-droplet fa-fw"></i>
  <i data-fa-symbol="truck-field" class="fa-duotone fa-solid fa-truck-field fa-fw"></i>
  <i data-fa-symbol="truck-flatbed" class="fa-sharp fa-solid fa-truck-flatbed fa-fw"></i>
  <i data-fa-symbol="truck-monster" class="fa-sharp-duotone fa-solid fa-truck-monster fa-fw"></i>


  <!-- Use the defined symbols -->
  <svg><use href="#truck"></use></svg>
  <svg><use href="#truck-bolt"></use></svg>
  <svg><use href="#truck-container"></use></svg>
  <svg><use href="#truck-droplet"></use></svg>
  <svg><use href="#truck-field"></use></svg>
  <svg><use href="#truck-flatbed"></use></svg>
  <svg><use href="#truck-monster"></use></svg>

Using data-fa-symbol informs Font Awesome SVG with JavaScript to create the symbol. The value of this attribute becomes the name.

<!-- Name symbols with the value of data-fa-symbol -->
<i data-fa-symbol="picture-taker" class="fas fa-camera"></i>


<!-- Use the defined name -->
<svg><use href="#picture-taker"></use></svg>

Make Sure to Add Some CSS

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: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }
</style>


<!-- Name symbols with the value of data-fa-symbol -->
<i data-fa-symbol="picture-taker" class="fas fa-camera"></i>


<!-- Use the defined name -->
<svg class="icon"><use href="#picture-taker"></use></svg> Say Cheese!

What about xlink:href? What happened to that?

The MDN docs tell us that using xlink: is no longer needed for modern browsers.

SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

However if you do need to support an older browser that requires it, it’s recommended to use both href and xlink:href. This way, when modern browsers do eventually remove support for xlink:href things will continue working.

<!-- Name symbols with the value of data-fa-symbol -->
<i data-fa-symbol="picture-taker" class="fas fa-camera"></i>


<!-- Use the defined name -->


<svg class="icon">
  <use href="#picture-taker" xlink:href="#picture-taker"></use>
</svg>
Say Cheese!
Pedal to the Metal Get the Best Performance When Using Font Awesome
Web Fonts vs. SVG Learn which tech works best for your project