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.

Advertisement

Remove ads with a Pro plan!

Using this requires Font Awesome Pro Pro

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

• All 16,083 Icons in Font Awesome
• Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
• A Perpetual License to Use Pro
• Services and Tools to Make Easy Work of Using Icons
• Fresh Icons, Features, and Software Updates
• Plus Support From Real Humans

Already have a Pro Plan? Sign in

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

Before You Get Started

Make sure you:

• Plan to use the SVG+JS method of Font Awesome
• Are using a lot of the same icon or icons on a single page
• Have your project set up with Font Awesome

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.

Stop! Demo time!

See this working example on CodePen.io (opens new window).

Step-by-Step

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

  <!-- Define the symbols, these are invisible on the page -->
  <i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>
  <i data-fa-symbol="edit" class="fas fa-pencil fa-fw"></i>
  <i data-fa-symbol="favorite" class="fas fa-star fa-fw"></i>

  <!-- Use the defined symbols -->
  <svg><use xlink:href="#edit"></use></svg>
  <svg><use xlink:href="#delete"></use></svg>
  <svg><use xlink:href="#favorite"></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 xlink:href="#picture-taker"></use></svg>

Advertisement

Remove ads with a Pro plan!

Using this requires Font Awesome Pro Pro

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

• All 16,083 Icons in Font Awesome
• Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
• A Perpetual License to Use Pro
• Services and Tools to Make Easy Work of Using Icons
• Fresh Icons, Features, and Software Updates
• Plus Support From Real Humans

Already have a Pro Plan? Sign in

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: -.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 xlink:href="#picture-taker"></use></svg> Say Cheese!

---

Learn more

Pedal to the Metal

Get the Best Performance When Using Font Awesome

Web Fonts vs. SVG

Learn which tech works better for you