This article describes how to create fonts from SVG icons with two tools of your choice: either Icons8 App or Icomoon.io.

Option 1. Icons8 App

Icons8 Web App fully supports the generation of web fonts.

  1. Free users, upload your own SVGs, go to Collection tab and click Generate Font.
  2. Paid users, select the icons and click Generate Font.
How to Convert Icons to a Web Font | picture

One can generate a font in two easy steps in Icons8 Web App

Update March 2014: We’re including simplified SVGs into the icon packs, and that simplified the process a lot: you only need steps 1 and 6: buy icons and immediately create icons with third party tools.

Option 2. Icomoon.io and Other Tools

1. Buy SVG icons or download them somewhere.

There are numerous icon packs; for example, here we keep our collection of the largest icon packs on Pinterest. Alternatively, you may want to try generating font with this free sample.

2. Open in Adobe Illustrator
From the remaining 1%, we’ve lost another 50%. But hey, here’s a free 14 day trial. You’ll see the icon like this:

How to Convert Icons to a Web Font | picture

As you can see, all lines are separate objects. It’s great if you’d like to edit it, but it’s not if you produce a font file.

3. Remove the invisible box around the icon
It’s needed for better rasterization in Photoshop, but now we don’t need it. Select it and press Delete or Del. Try pressing everything until it goes to hell. The icon looks the same, but now you can’t select only the box.

4. Merge it
Select all (Cmd+A or Ctrl+A) and choose Object → Expand from menu. Check everything and click ok.

5. Join it
In Pathfinder palette (if it’s not on the screen, choose Window → Pathfinder in menu). Click this button:

How to Convert Icons to a Web Font | picture

Now save.

6. Create a font in a font viewer.
There are many, for example, Fontello or IcoMoon (check our full review of tools for icon editing):

How to Convert Icons to a Web Font | picture

 

Done! As we’ve got readers lost on each step, congratulations! You’re 0.00001% of winners who finished all the steps!

Further Reading

Font is an awesome thing, but for the rest, you can use an icon generator.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit