Font Awesome was released in 2012, and at the time was an extremely useful way to serve icons for two main reasons. Retina screens - introduced with the iPhone 4 back in 2010 - had been around for a couple of years, which was long enough for developers to realise that it was complicated to serve larger sized icons to people with retina screens and regular sized icons to everyone else. Using an icon font like Font Awesome allowed you to serve sharp, crisp icons to everyone.
The second benefit was that it was only one HTTP request. Back in 2012, everyone was still using HTTP/1.1 which would only download 6 resources from any one domain at any one time - queuing up the rest and delaying the load of later resources as a result. Serving all of your icons from one request went some way to fixing that problem.
But today, icon fonts have a number of pretty big disadvantages when it comes to web performance, and our advice is to avoid using them and use SVG icons instead.
If you're using HTTP/2 (or HTTP/3) then there's no cap on how many resources the browser can download at any one time, so you lose that benefit from Font Awesome. And SVG icons automatically scale so they look sharp in any browser.
SVG icons often have a smaller file size than the icon font
It's often the case that an icon font is used to serve just a handful of icons. But the browser still needs to download the entire icon font file (which includes every icon it contains), just to show those few icons. And frequently the SVG equivalent of those icons are much smaller in size that the font file itself.
The entire font file needs to be downloaded before it's usable
One of the biggest drawbacks is that you need to download the entire Font Awesome (or similar icon font) file in order to use one of the icons.
If you're using an icon for a hamburger menu in the navigation, a heart icon on a product thumbnail image, and some credit card icons in the footer, then you need to wait for all the icons in that file to load before you can display the hamburger icon.
If you were using SVG icons instead, you'd be able to show the hamburger icon as soon as the (much smaller) SVG had loaded.
You can't lazy load icons from an icon font
You can lazy load SVG icons really easily. If you've got an icon above-the-fold that you want to load in quickly, and other icons below-the-fold that you want to lazy load, then <img> tags are your friend. You can even use browser level lazy loading with the loading='lazy' attribute.
But you can't do that with an icon font, because if you want to load any of the icons, you need to load all of them at the same time.
Replacing your icon font
There are lots of places to find nicely designed SVG icons to replace your icon font, but we're big fans of The Noun Project and Feather. Google Fonts also has a large number of SVG icons available for free.