IcoMoon, Fontello and Fontastic.me: Best of Icon Fonts

Icons are the best invention since canned beer, at least designers might agree. They are definitely on the rise in popularity. Mobile devices with their comparably small screens boost the use of icons as natural choices for navigation menus in modern web design. New icon sets get created by the hour. Especially mobile design is the trigger for a new breed of icons. These are no longer implemented in the form of individual PNGs or so-called sprites. Icon's successor is the icon font. Iconfonts have many advantages with the biggest being their free scalability to any size, while at the same time reducing server requests to an absolute minimum. The downside of icon fonts is, that in most cases you will not need the whole font set or - even worse - need icons from different font sets. Font generators have come to deal with both of these problems. Today we'll take a look at three of the best generators the web has to offer...

IcoMoon: Custom Built and Crisp Icon Fonts, Done Right?

IcoMoon

IcoMoon by Keyamoon comes in two flavors. A free version with 450 icons delivers common pictograms for user interfaces as well as social media and browser symbols. The looks are plain enough to qualify them for use in any design without getting out of line. If you need more, you should consider going for one of the paid plans, both of which come with a more developer friendly license and not just CC BY 3.0.

Don't get me wrong at this point. Creative Commons (CC BY-SA 3.0) is great and even allows for commercial use. Yet, you'll need to care for proper attribution, which might not only not be in your business interest as a developer, but sometimes even practically impossible...

Icons come in different formats. Even with the free plan, you'll receive the pictograms as SVG, PDF, EPS, AI and PSD as well as in PNG format. If you go for the "Ultimate Pack" for 59 USD you'll get access to 1266 icons. Besides all I mentioned above, these symbols will be delivered as Photoshop shapes and in a dual tone variant, additionally. The "Essential Pack" with 900 icons for 39 USD lacks these two features as does the "Free Version", obviously.

The Heart of the Matter: IcoMoon generates Web fonts

We are talking about fonts here, so who cares about which image and vector formats you could possibly get? To make it as easy as possible for you to customize your own web font, IcoMoon comes with an easy to use web app. With the help of this app it is stunningly simple to create your individual web font.

Just click the icons you want to include in your font. Then download the whole selection as a font with all the necessary assets using the button "Font" below the icon overview (or download the image variants using the button "Images"). IcoMoon also integrates third-party icon sets, which broadens the available portfolio to more than 3,000 available icons. If you decide to go for pictograms from more than one set, make sure to double-check the licenses. Not all sets are equipped with a CC license.

Before you download the font-package, you can adjust parameters such as the encoding, the class-prefixes, the font-name and even the metrics. To get you going quickly, you'll find an example CSS with all available symbols right inside the download package.

If you need that arrow to point into the other direction or that phone-icon a little smaller, IcoMoon has you covered, too. No other tool in this overview is able to edit the icons, IcoMoon is. Manipulations are basic, but cover the most common needs.

If you need to import your own SVGs or fonts to make for the perfect mashup, IcoMoon allows you to do that, too.

Conclusion: IcoMoon's pictograms are not spectacular, but universally useful. They come in a variety of flavors and perfectly customizable icon fonts.

IcoMoon Pricing

Free Version: 450 icons, CC BY 3.0 | Price: Free
Essential Pack: 900 icons, royalty-free, PNG also in 64px | Price: 39 USD
Ultimate Pack: 1266 icons, royalty-free, plus shapes and dual tone variants | Price: 59 USD

Fontello: Icon Fonts Generator at a Radical Price

IcoMoon's initial weakness in the number of available fonts and icons has sparked development at a few other corners of the web. Unsurprisingly the evolving competitors resemble closely, yet try to extend in functionality and feature set. Fontello came to life a few months after IcoMoon. It looked like the natural successor of IcoMoon and introduced a radical pricing. Fontello was and still is completely free.

While IcoMoon's free offering is more like a teaser for the paid plans, Fontello never had the ambition to earn money. The tool is not only available as a free web service, but also as a download on Github under MIT license.

Fontello: No Clone - More a Symbiotic Advancement

The major difference between IcoMoon and Fontello is their price tag. While IcoMoon is a business, Fontello is an Open Source project. While IcoMoon sells its own icons, Fontello simply aggregates the icons of others and reworks them to better suit each other. Most of the icons in Fontello are licensed as SIL Open Font or CC-BY-SA, though you should always check before you choose. With Fontello's concept of slightly reworking the icons, the ones offered on Fontello are not always the most recent versions available. This is not a problem, yet should be kept in mind.

Fontello got incepted while IcoMoon was very limited. There weren't too many icons, SVG import was not possible. Fontello started with a broader portfolio of icons and offered SVG import from the start.

Today things are different, with IcoMoon being quite a few steps ahead. Here is a list of things, Fontello is not able to do:

• offer icons as pixel or vector formats
• define a Private Use Area to support the use of screen readers
• edit symbols (scale, move, flip, rotate)

So, if you are strongly into graphic design with the frequent need for icons as images, IcoMoon is the much better choice.

Speaking of third-party icons, which are Fontello's only offering, both competitors need not hide from each other. The choice of sets is decent. Most icon fonts are interchangeably usable. The web font download package Fontello generates does not stand behind IcoMoon's.

Conclusion: In the end it is a matter of taste, whether you prefer one over the other. Personally, I like the idea of Open Source. That's why I'd go for Fontello in that comparison.

Fontello Pricing: None

Fontastic.me: The Latest Addition to the Fontgenerator Arena

Vincent Le Moign aka Webalys is no stranger to web designers out there. He is one of those hyperactive creators who conjure up two new projects between lunch and dinner. You will certainly have heard about Agile Designers, a collection of high-grade design resources. Masses of freebies are all along his way. Besides all the free work he donates to the community, Webalys is the creator and maintainer of the massive icon set named Minicons with more than 1,500 individual pictograms.

A few months ago, Webalys decided to introduce the world to his idea of an icon fontgenerator. And, I have to admit, this idea is everything else but bad. Fontastic.me is not only powerful, it is also free...

Fontastic.me combines the best of IcoMoon with the best of Fontello

Looking at the handling and the design, Fontello and Fontastic are close competitors. The biggest plus for Fontastic.me is the much wider choice of icons. Almost 4,000 of our beloved pictograms are available. Fontello doesn't come close here - probably due to the concept of reworking the sets to better fit the project as a whole. Just like IcoMoon and Fontello, Fontastic.me is also able to integrate custom SVGs and fonts.

Fontastic will ask you for your email address and a password, before you get access to the tool itself. As there are no confirmations - no hassles at all - involved, you'll be directed to the tool interface immediately after having entered the desired credentials. If you already know IcoMoon or Fontello, you'll not be bewildered by the differences. Select your custom icon collection in the way you're used to.

Fontastic lets you save the new font under a custom name, lets you define class-prefixes and change the unicodes. Just like Fontello, Fontastic is not able to provide you with PNG, PSD, whatsoever. IcoMoon is your only alternative, if you need these assets.

What sets Fontastic apart from the other two is the possibility of placing icons via data-attributes. Data-attributes see wide-spread use in HTML5-based designs nowadays. In this case they are an alternative to controlling the pictograms using CSS classes. Just define a shortcut and call the icons like this:

text beside icon

Fontastic is very easy to get accustomed to. With its extensive help and accompanying documentation, Fontastic is ideal for designers who've just started to work with icon fonts. Newbies will have a hard time finding an easier solution. Webalys promises to keep the tool free forever. As to the icons, you should always keep an eye on the different licenses to make sure they fit your use-case. Not all of them are fully commercially usable. The licenses are stated right above the sets, so you won't need to dig in too deep to find out.

Fontastic.me had me from hello. It has this slightly more modern UI and that little bit of extra features to push me away from Fontello. Which one do you choose?

Related Links

• Custom Built and Crisp Icon Fonts, Done Right | IcoMoon
• Icon Fonts Generator | Fontello
• Join the Icon Fonts Revolution | Fontastic.me