Categories / Tutorials

How to Create a Simple Icon Font

Larisa Deac March 31, 2021 · 5 min read
Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web. Today, we’re going to learn how to create a custom icon font using the icon set of your choosing.

What Is an Icon Font?

Icon fonts are typical fonts that simply contain symbols and glyphs instead of letters or numbers. Each character or symbol can be easily displayed in HTML or CSS. For example: css_html There are some great advantages to using icon fonts instead of bitmap images:
  • Scalability: because they are vector graphics, you can easily scale them up or down without losing their quality
  • Fast loading time: since they have a small size, your website will load much faster than it would load if you used bitmap images
  • Effects: you can add CSS3 effects and animations to them
  • Lightweight: icon fonts are more efficient because they require only one http request to load one font file
  • Retina display: since the icon font uses .SVG, your icons will look great on retina

How to Create an Icon Set

To create an icon font, you need to design your icons first and then turn them into a font. Think about the theme of your icons and the style that you want to achieve. Some popular themes are: business, technology, sports, or social media. Minimal, flat, and light design seems to be a popular trend for iconography nowadays, so you might start with this one. This type of design uses thin lines as the basic form, so just make sure you take this into consideration when you set the weight of your strokes in Illustrator. The first step is to design your icons and save them as SVGs. You can use any software you want to create vector files – but now I will show you how to do it using Adobe Illustrator.

Step 1

You can start with a 64x64px Illustrator document. Using the “Number of Artboards” option, you can indicate the amount of artboards you want to create. new_document

Step 2

Draw an icon on each artboard. As you draw, give each artboard a logical name. This will come in handy when you save your files because it will be the name of the SVG file! artboards

Step 3

Take these things under consideration before saving:
  • You must have transparent backgrounds
  • Glyphs will be interpreted as black
  • use the Pathfinder panel to combine overlapping shapes
  • Convert paths to filled shapes by using Expand (Object>Expand; Object>Path >Outline Stroke)
expandoutline_stroke

Step 4

Use “Save As” to export the SVG file. Select SVG from the dropdown menu and make sure the option “Use Artboard” is checked. save_asdropdown_SVG Now that your icon set is ready, you can move on to the next step!

How to Create an Icon Font

Creating an icon font on your own sounds difficult, but there are lots of tools out there that make the task quick and painless. IcoMoon is my personal favorite, so that’s what we’ll use. Since your icon set is done, you can now upload your files to IcoMoon. To begin, click on “IcoMoon app” on the right side. Use the “Import icons” button to upload your SVG files. Your set will appear at the top. ico_app importset

Step 1

From the top panel, select Edit to resize your icon (if you need to). Click on Edit, select one icon and the Edit window will open. Here you can resize or move the icon, download the SVG file or replace it. edit_button edit_window

Step 2

From the hamburger menu, select all icons (the selected ones will have a yellow frame). Click Generate Font at the bottom of the page. Add a font name. Now download your font and add it to your CSS. select_all generate_font download The downloaded .zip file contains the font in various formats (.eot, .svg, .ttf, .woff), a demo file, a .json file that you can use to restore your project and a .css file. icomoon This is an example of how the CSS will look: css

Try It Out!

Using an icon font saves a lot of time and fixes all your problems with size, effects, retina display and performance. There are some solid alternatives to IcoMoon, such as fontastic.me and fontello.com. Try them and see which one suits your project needs best. In the meantime, if you need some inspiration to design your icons, check out these great icon sets:
Minimalistic icon set by Larisa Deac
Streamline Icons by Vincent Le Moign
Healthcare Icons by Larisa Deac
2090 icons in UniGrid set by Icojam
Squid Ink Flat Icon Pack by Web Icon Set
Larisa Deac is a designer and photographer from Romania, who lives and works in Finland. She creates user interfaces and prototypes for web and mobile at Affecto (part of Affecto Design team). In her free time, she creates resources for designers and photographers on Creative Market and runs a design blog at www.larisadeac.com
getpaidtowrite-banner
About the Author
Author
Larisa Deac

UX/UI designer. I create graphics and photos for small businesses. Follow my shop for updates!

View More Posts
Go to My Shop
Related Articles
3 Comments
  • I'm assuming if I passed along a set I created, and someone strictly used the .TTF loaded onto their system, that they'd have the ability to resize, color, etc. a specific icon as they normally could with any other font/typeface? 7 years ago
  • @Duane Romanell Yes, they should be able to do all that. In order to be able to use regular Latin letters, use the "Reset Encoding" button in the font tab of the app before downloading your font pack. 7 years ago
  • Very good. Thanks. 7 years ago