Using font icons in Webflow in seconds (the easiest way)

Using font icons in webflow may be tricky if you are coming from a front-end web development background. You might be comfortable using Font Awesome or Fontello, etc. Where you may be used to using class names to choose from your icon set.

In Webflow, if you are limited with Font-awesome or Fontello or similar, there is a way, you will have to copy your glyphs over into text spans and give the class names that would assign that text your icon font as font-family.

There is an even easier way to implement font icons if you are not constrained by those choices.

The solution is… drum roll …

Google’s Material Design Icons

Also known as Google’s MUI Icon or Material symbols. This collection has more than enough unique icons to offer for your projects.

Now let’s see how to go about implementing it in a Webflow project.

Install Google Material Icons font to your Webflow Project.

It is 1 click install, all you have to do is,

1. Go to Site settings
2. Go to the Fonts tab
3. In the field, Choose font from list -> Type in Material
4. You get to choose from various styles like outlined, rounded, etc if you need.

Use the font icons in Design mode

Now go to design mode and create a new class name called mi or icon or whatever feels right to you. And change the font to Material Icons or whichever variant you installed.

Now you will be able to use this class name to create icons.

With material icons font you can simply write the name of the icon, and use the class name you defined earlier to convert that text to an icon.

For example, if I want a home icon. I would create a text span with text home and then assign it the class name. See the animated GIF below for the demo.