Instead of letters and numbers, an icon font contains glyphs, symbols, or pictograms. They are the simplest way for a UI designer to add icons to a UI design project.

One of the great things about using an icon font is its scalability. They can be resized without losing quality, making them perfect for responsive web design. With CSS media queries, they can be scaled up for desktop or down for mobile. Icon fonts are also fully customizable, allowing you to adjust the size and edit colors to fit the aesthetic of a UI design.

Adding icon fonts to any web design or mobile app project is easy using CSS. You load the font file using @font-face, and using standard CSS rules, you can set the font-size, color, padding, margin, or other properties.

Although very popular, icon fonts do also have their pitfalls. Ian Feather has discussed his reasons for switching from an icon font to SVG, and CSS Tricks have outlined some considerations when choosing between icon fonts or SVG icons. Both favor SVG.

As a counter-argument, Pictonic has said that icon fonts are 10% faster than SVG. These are just things you should consider before using icon fonts.

To ensure that your icons always load correctly and have reliable fallbacks for browsers that don’t support @fontface, you should take a look at the guidelines set out by the Filament Group, here.

---