Visit The School

IcoMoon: The Solution To Your Icon Font Woes

Alexander Paterson
|
Posted 10 months ago
|
5 minutes
IcoMoon: The Solution To Your Icon Font Woes
You'll wish you'd discovered this tool a long time ago

Every application needs icons and simple vector graphics, and generally the most convenients means to embedding these is a font. Developers who take this route have likely run into the following frustrations:

  • Your chosen font library doesn't have an icon you need
  • You have an SVG you want to use but god knows how to turn that into a font
  • There's no way to text-search a font

Like a lot of people, I default to FontAwesome. Finding the icon I need involves googling "fa cheatsheet", and painfully scanning the list returned as the first result. While building iOS apps, I'll simply copy the icon I need directly from the cheatsheet, and paste it into either my source code or my interface builder. With other font libraries, you often have to figure out the unicode value. Sometimes even that is difficult. 

A few days ago I discovered a tool called IcoMoon which has actually existed since 2011, and it solves almost all of my icon-related problems.

How It Works

Built with Angular, IcoMoon is a primarily an icon-aggregator and font-creator. Upon launching the application, the user is invited to browse, search, and select from thousands of open-license and premium vector icons.

IcoMoon Application

Almost all the fonts you could want are there and tagged; Octicons, Iconic, FontAwesome, Material Icons, and a bunch of icon sets I hadn't heard of before. I did notice EvilIcons was missing though, and that's one I like. However, there are tonnes of original icons in the IcoMoon Free set to make up for it, and the premium ones look very tempting.

When you've selected the icons you need, you can choose to either view them as SVG's for download, or generate a font. Generating a font gives you everything you could need, including some CSS, the unicode value, and a character for copy+pasting.

IcoMoon Export As Font

I'm literally very impressed with this tool. What's more, for web applications, the reasonably-priced premium versions of the application provide hosting and content distribution along the same lines as Adobe TypeKit: manage the icons your app needs through icomoon.io, and they'll take care of updating the remote CSS and font files for you on their content distribution network.

Importing An SVG

By far my favorite feature of this tool is this big Import Icons button, which allows you to import any SVG or SVG font to add to your library.

Import Icons

I think a lot of people are going to appreciate that.

Pricing

Before you go creating icon libraries, be aware that any work you do without a premium account is only stored in your browser's cache. You'll have to sign up if you want an online account that can save libraries.

There are two types of premium accounts: a basic plan for $9/month or $69/year or, an unlimited plan for twice that amount. Both the basic and unlimited plans grant you the ability to save your projects and embed your icons in CSS, but only the unlimited plan provides asset hosting with S3 or Cloudflare.

IcoMoon was created and is maintained by Keyamoon, a web developer and designer. Nice work!



ALEXANDER
PATERSON