How to use icons inside of Framer?

Everyone needs to use icons in some shape or form at a given time in developing or designing a website. It's a tedious task to go a website, search for an icon pack that you like, downloading each PNG or SVG file, importing them to your system... and so on and so forth

But TIL that if you are using framer, there is a very easy way of using icons and is just by pure text. Yes you read that right, just plain TEXT.

How to place icons as plain text

There is actually a font inside of framer called Material Symbols that let's you just type a keyword that represents an icon and it will insert that icon. It's actually just works text under the hood, so you can set different font sizes to increase or decrease the icon size, or even set it to bold to make the icon thicker.

Here you can find a list of all the keywords and you can search for specific icons: https://fonts.google.com/icons

So to make it clear here you have a Step-by-Step Guide to Using Icons in Framer

1.Open Framer:

Start by opening your Framer project or create a new one.

2.Select a Text Layer:

Add a new text layer where you want your icon to appear.

3.Choose the Font:

Change the font of the text layer to “Material Symbols”.

4.Type the Icon Name:

Simply type the keyword that corresponds to the icon you need. For example, typing “home” will insert a home icon.

5.Customize the Icon:

Use the text formatting options to adjust the size, weight, and color of your icon.

And if you’re ready to take your design to the next level, Aquila Design is here to help. Reach out to us today to see how we can transform your project!