How can your project get the best performance when using Font Awesome? That's a complex question, but one worth exploring.
Advertisement
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 7,864 icons in Font Awesome 5 Classic styles of every icon 3 Sharp styles of every icon 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
Test Performance for Yourself
Since every site or app is 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
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 7,864 icons in Font Awesome 5 Classic styles of every icon 3 Sharp styles of every icon 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
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.