This article describes how to create fonts from SVG icons with two tools of your choice: either Icons8 App or Icomoon.io.
Icons8 Web App fully supports the generation of web fonts.
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.
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:
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:
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):
Done! As we’ve got readers lost on each step, congratulations! You’re 0.00001% of winners who finished all the steps!
Font is an awesome thing, but for the rest, you can use an icon generator.
Also, get the lists of free vector software and free photo editing software.
A deep dive into the smallest images in graphic design: the history of icons, their…
Learn how to use visual hierarchy to guide attention, prioritize elements, and create designs that…
WOKONEO, a puzzle book for kids that blends playful learning with creativity, featuring Icons8’s Color…
Find the perfect gift for graphic designers! Explore everything from ergonomic tools to creative resources,…
Here’s a case study from UNIKO™ on how premium website design drives growth. See how…
Here’s a case study from our friends at Red Collar on how they reimagined CSSDA…
This website uses cookies.