Starting with open-source fonts, you don’t need a huge font collection with hundreds of high-end typefaces to make ground-breaking designs. And the best part, most of them are free to use. All fonts in the selection are readable, efficient, and mobile-friendly. The good news is, we’re going to look through the best Figma fonts to bet on for your designs. On the other hand, you also want a typeface that is readable, effective, and mobile-friendly to perform the best across all platforms and screen sizes. On the one hand, you want user interface fonts that are memorable and consistent with your brand. It can be difficult to choose the ideal UI font for your website or app.

That's it! Check out more of our articles and follow us for future updates.What are the Best Figma Fonts for Modern UI Design? You can now add an icon to any element by simply adding two classes: The font-size is set to 32px by default, so I changed it to my 24px. To get started with development, copy the files in /fonts and /css to your project and import the style sheet in the HTML. Once finished, you will find numerous files in there, including a demo.html to see all icons and their names. You can also change the metadata if you so desireĬlick 'Export Icons' and select an empty folder. Click on 'Icon Font' and you will be asked to choose a name for the font. To create the icon font, right-click on the set name and select 'Export'. It should reflect the dimensions you chose in Figma. Make sure that the grid size at the bottom left only shows a single option. You can drag and drop a folder with your icons into the application and give it a name. Note: While they are currently not offering a Linux client, I had no trouble installing and using the Windows version with Wine.Īfter installing and starting the desktop app, click on the '+' in the top left corner, to create a new set. Using their organizer for external icons is free. In case you don't want to start your collection from scratch, Nucleo offers over 28.000 high-quality icons for a one-time payment with lifetime updates. To bundle our icons to a font, we use Nucleo's desktop app. Once you are happy with what you created, export them to SVG in the bottom right corner. Select all icons you would like to export as separate files. They cannot contain any pixel-based graphics, like PNGs or JPEGs, and have to be in a single color. When you draw your icons, make sure to stick to the same dimensions - common sizes are 16x16, 20x20, 24x24 or 32x32. There are many great tutorials on how to get started with Figma and what to look out for when creating icons, so I won't get into much detail. Figma is great because it's free to use, its vector capabilities are powerful enough to create any kind of icon and it exports clean SVG files we can continue with. After importing it to any project, you will be able to use them by adding a single line of HTML. In this article I will walk you through the process of drawing, exporting and bundling your icons to a font in the same way we do it at Emvi.

Icon fonts: Combining all icons to a font brings additional benefits, like being able to freely change their color using CSS.Inline SVG: Pasting a single line of code to your HTML is even faster, but keeping track is difficult.This is quite useful in the early stages of development. png files in a folder lets you add and remove them quickly. When it comes to managing the growing number of icons inside the project, different approaches are viable: You can match them perfectly to the design language, making the experience more visually pleasing. While there are many free options like Google's Material Icons or FontAwesome, building a custom set on your own has its advantages. Icons help to convey certain actions faster, because they are easier to process, need no translation and resemble established patterns users are already familiar with. At some point in creating a web application, you might find yourself in need of some sort of iconography.

Export font from figma