Performance

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

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.

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.