Introduction
Icons are an essential building block used when designing a website. Having a consistent icon style used throughout a website helps to tie the whole theme of the design together.
Designing all your icons from scratch helps to create a unique look and feel for a website, but eats up far too much time when there are already plenty of great icon sets that you can find online.
When working with icons for Webflow, the usual process is: dropping all the icons you want to use into a design program such as Figma, recolouring them, exporting them, and uploading them to Webflow.
You can then create a folder for all of your icons to keep things as neat and tidy as you can.
The issue with this is that you still have to source all of the icons yourself, and once you've added them you can't change the colour of any of them. You also will still have all the icons in the rest of your images files when trying to browse for other assets.
Though this way of working with icons is straight forward, it's not as flexible as it could be, and when you start adding in too many icons, it becomes even more of a pain to browse them.
So what's the alternative?
Using an Icon Font
Icon fonts are a type of font we can install to add icons into our Webflow project. Instead of working with them in the assets tab of a project, we install the font, and change our font to the icon font whenever we want to add an icon.
Working this way we can change the colour of all our icons at any time, as the icons will be coloured the same way fonts in our projects are. This is much more flexible to use the icon how you want, and gives you plenty more icon options to choose from without it taking up any space in your assets library.
How to install an icon font
If you've never worked with an icon font set before, a good one to start with is Google's Material Icons. The style options to choose from include outlined, filled, rounded, sharp, and two tone. Through their Github page, you can download the font for the style that you want.
Once you've downloaded the option you want, upload it in the fonts tab of your project settings. You upload this font the same way you upload any other custom font, through the Custom Fonts section. Format the name in all caps so you can see the font name easily in the designer.
Now that you've installed the font, jump into the project designer so we can use it.
