You're viewing docs for v5.15.4, an older version of Font Awesome.

Web

Performance

How can your project get the best performance when using Font Awesome? That's a complex question, but one worth exploring.

Do More with Font Awesome Pro!

Upgrade now and rev up your productivity with more icons, styles, and tools.

Test Performance for Yourself

Since every site and app are different it's important that you test and decide which implementation of Font Awesome works best for you.

SVG with JavaScript

This implementation encodes icon data and the mechanism to display them in the browser in JavaScript code that the browser executes.

Will be a good choice when:

  • you don't have a very large number of icons to display
  • you have a frontend app (like React, Angular, or Vue.js)
  • you can use JavaScript subsetting to reduce file size
  • the user agent (browser) is less resource-restricted (has a faster CPU and enough memory)

Web Fonts with CSS

This implementation uses web fonts as the file format and relies on the browser to render icons as it would any custom font.

Will be a good choice when:

  • you would prefer the battle-tested and mature web fonts technology
  • you have a very large number of icons to display
  • the use agent (browser) is resource restricted (slower CPU)

SVG Sprites

This implementation uses a technique where SVG icons are defined in a separate file and then referenced as symbols in the site.

Will be a good choice when:

  • you have a smaller number of icons
  • you can't or don't want to rely on JavaScript
  • you are willing to style with CSS the icons yourself
  • the use agent (browser) is resource restricted (slower CPU)

Individual SVG icons

This implementation represents just the raw SVG files where each file is one Font Awesome icon.

Will be a good choice when:

  • individual small file (requests) are efficient for you or you are embedding SVG directly in your page
  • you can't or don't want to rely on JavaScript
  • you are willing to style with CSS the icons yourself

Batched Mutations

SVG with JavaScript replaces <i> tags (and others) matching a set of criteria with <svg>.

These operations have been optimized to make use of window.requestAnimationFrame (opens new window).

The step of searching / reading the DOM and performing the mutations has been split up. This prevents layout thrashing in the browser and saves execution time.