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! 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 7,864 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
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)
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 7,864 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
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
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 7,864 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
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.