Ever wondered how to add sleek, scalable icons to your app without sacrificing speed or quality? That’s what icon fonts are for! Icon fonts are just like regular fonts, but instead of numbers and letters, we use icons. These icons can be anything from simple shapes and arrows to more complex representations of objects or concepts. Icon fonts became popular first in web design because they allow developers and designers to easily insert scalable vector icons on websites. Afterward, they became a must in the app world for the same reason.
Both in Grial UI Kit, and our custom services, we use icon fonts because they make our lives much easier. There are many advantages to using icon fonts:
In this article we will cover everything you need to know about icon fonts, from choosing existing icon fonts, to a step by step guide of how to build your own font.
There are many icon libraries dedicated to providing icons, a lot of them are subscription-based, but don’t sweat it! There are other great free options to start building your very own icon font. Material design from Google, has an extensive library of icons you can download for free.
Another great library that not only offers a free plan but also has a Figma plug-in is Font Awesome. But if you can always keep looking for other icon libraries that suit your app style, there are tons.
Even though it’s very simple, this step is important because in order to have a flawless icon font, we need the icons to have some special characteristics. Inside our Figma project file, we should have a frame containing these icons, we can even group them into subheadings for the sake of organization. The icons should have the following properties:
That’s it, if your icons meet these requirements you are ready to export them as SVG and follow these last few steps.
Now that we have chosen and prepared our icons, the next step is to build our icon font. At UXDivers we use IcoMoon, and I have great news! IcoMoon offers a free plan, as well as a paid plan. The only difference between the two is that with the free plan, you save locally in your browser’s cache, this means if you change your computer or clean your cache, that’s it, you can’t come back and edit.
1. Remove free set: The first thing you’ll see is a set of icons called “IcoMoon - Free”. You can go ahead and remove that set of icons by clicking on the three lines on the right of that title and “Remove set”.
2. Import Icons: On the left side of the navbar there’s a purple button that says “Import Icons”. When you click on it, a dialogue box pops up and you can import your icons.
3. Selection: Now that you imported your icons a new set should appear called “Untitled Set”. Select all the icons you want in the font.
Pro tip: To quickly select the icons you can just click and drag your cursor over the icons you want selected.
4. Generate font: After you select your icons, a button called “Generate font” should become available on the bottom navigation, click on it.
5. Preferences: At this stage, you can access the “Preferences” button located on the left side of the navbar in order to change the font’s name and other settings you might like to edit.
6. Download: That’s it! You can now download your font by clicking on the “Download” button on the right side of the bottom navigation.
By following these steps, you've now got the tools to create and implement your own icon fonts, enhancing both the functionality and visual appeal of your apps.
Icon fonts offer a seamless way to maintain consistency, scalability, and organization within your designs. Whether you're using them in Grial Kit or your own personal endeavors, icon fonts are an essential part of modern app development that can make your workflow smoother and your apps more engaging. So why not give it a try and see how icon fonts can elevate your next project?
