In this article we will quickly go over the pros and cons of using 'Icon' fonts (e.g. Font Awesome) versus the increasingly popular SVG icon format and help guide you in what situations either should be used.

What happened to good old JPGs and PNGs?

Before a world of Icon fonts and SVGs there just used to be plain old images that developers alike used for their website’s icon needs. Images of course had its drawbacks, particularly with file size bumping up page load speed and then also the unreliable render quality of the image depending on how it was being viewed. Even though the clever practice of  multiple images being replaced with one ‘sprite’ file significantly reduced file sizes and server requests, it wasn’t until Icon fonts entered the scene where web icon practice changed dramatically.

Icon Fonts

Icon fonts are indeed just like any other typeface, but instead of letters etc. its made up of icon shapes. And like a normal font, Icon fonts so are able to scale up perfectly to any size without any loss of render quality. Additionally there were now the options to add CSS styling to your icons such as changing colour, weight, shadows and any other styles normal website text would be able to utilise.