Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.
The problem of course is, we need more control over which icons we embed. Sometimes we pull from a variety of sources, including our own work, and we need a good way to put it all together. Enter icon font generators. Follow along as we compare a few of our favorites.
Why a Generator?
The downside of using an icon font is that you’re limited by the icons that happen to be in the set that you downloaded. If you want to include three different icons from three different sets, you’ll have to load in three different fonts, which might actually mean loading in hundreds of icons that you simply don’t need.
Obviously, if you’re going for a lean, mean site with no superfluous resources and unnecessary loading lags, this isn’t the best way to go about embedding icons. This is where custom icon fonts come in. In this scenario, you take your three icons, toss them into a single tiny custom built font, and embed that into your page.
Unfortunately, not all of us have the knowledge or resources to build our own fonts. Don’t worry though, these custom icon font generators have you covered. Whether you want to use your own icons or leverage existing icon sets, there’s a tool below to get the job done.
The first generator that we’re going to check out is Fontello. This app is super slick, really easy to use and has eleven completely free icon sets including Font Awesome and Iconic. There aren’t thousands of icons to choose from, but there are definitely enough that you should be able to find what you’re looking for.
Speaking of finding what you’re looking for, that task is made simple by the instantly updating search feature at the top of the page. I love the live filtering here, which is way better than waiting for a new page to load with your search results.
Choosing icons for your custom font is as easy as clicking on them. After you’ve found and selected the icons that you want to include, jump over to the second tab where you can change the names of each icon. It’s little customization options like this that make Fontello so great.
The next step is to check out the “Edit Codes” tab so you can customize the characters that are associated with each icon. Doing this is easy enough, simply use the provided fields.
After completing the steps above, you’re all ready to go. Simply type in a file name and click the download link to receive your custom font.
The Fontello download includes a whopping fourteen files spread out over several folders. The footprint of each file is tiny, but the sheer number of items that you receive can seem overwhelming to someone who was looking for a simple solution. That being said, it’s really nice to have a fully functioning example to work from and they’ve gone through lots of effort to make sure everything is as browser compatible as possible.
The next app that we’re going to take a look at is IcoMoon. In all honesty, it’s a lot like Fontello, but there are some key differences worth examining.
Just as with Fontello, you can either browse through the icons by scrolling or use the integrated search feature to find something specific.
There are a lot more icons available than you see by default. To check out the rest, hit the “Library” button near the top of the screen.
This will take you to a page that currently has sixteen different collections to choose from, many of which are free while others must be purchased.
Importing Other Resources
One of the best features of IcoMoon is the ability to import other resources to include in your custom build. You can upload other icon fonts or even your own custom SVG graphics. This makes IcoMoon an awesome resource for anyone looking to build their own icon font from scratch.
Generating the Font
Once you have your icons picked out, you can proceed to your font download via the button at the bottom of the page. Also notice that you have the option to download the icons as an image (it will generate a sprite page).
Just as with Fontello, before the download, you’re given some options for changing the settings and encoding for your font.
The download here is considerably smaller than with Fontello. There are only nine files, five of which are the actual font. Basically, Fontello gives you a bunch of CSS files while IcoMoon condenses it to one. This makes everything a lot easier to sift through and the demo page is a bit nicer as well.
Next on our list is Pictonic. To use this site, you have to sign up for an account. From there, you get three options. You can use the free icons, use paid icons at a rate of $ 0.59 per icon or receive unlimited access for $ 199.
Here we see the same drill as before, use the live search feature or browse through the available icons by scrolling and clicking on the ones that you want.
There’s also a dropdown menu that lets you easily filter the results by category. This is also a good way to get a look at the 320 free icons (which are mostly social and software logos).
This time around, I don’t really see any options for customizing your download, you simply click “Continue” then “Download” and you receive what turns out to be our largest download yet.
With Pictonic, you automatically receive the files in pretty much every way you could want them: font files, PNGs, and SVGs. The number of files you receive depends on the number of icons that you chose. I love that I have all of these options, but I’d like to choose what I do and don’t want before the download.
I saved the outlier for last. Pictos Server goes about things quite a bit differently than the other sites. Instead of building a custom font that you download and embed on your own server, Pictos hosts the icons for you. It’s generally known as “the Typekit of icons”, which is a decent description of what you can expect from the service.
By my count, there are currently around 338 icons to choose from. You can slim down the offering by choosing from one of the Pictos sets or searching for something specific.
Once you’ve chosen the icons, you can type in the characters that you want to represent each icon. From here you simply click the “Generate Code” button, which gives you a CSS embed link that you simply toss into your file.
Since Pictos is a hosting service, there’s obviously a monthly fee involved. The prices for the plans are set according to page views, starting with $ 0 for up to 25,000 monthly views up to $ 50 for up to 4,000,000 monthly views.
It’s also important to note that the free plan seems to be limited to twelve icons per font.
How Do They Compare?
Obviously, the answer to the question of which site is “best” depends on your specific needs. Each site seems to excel in its own way. If you’re looking for the easiest solution, you can’t beat Pictos Server. There’s really very little work involved and embedding the icon font is a snap.
If you’re looking for a ton of free fonts without the hassles of signing up for an account, check out Fontello. It’s a great service with plenty of options and is likely to be all that you need.
In terms of features and options, IcoMoon is hard to beat. I love that it allows you to upload and integrate your own work or even other icon fonts that you’ve found. There are also a ton of free icons here and even some premium packs if you really want to go all out.
Overall, Pictonic was probably my least favorite of the bunch. The free icon selection wasn’t all that great and you don’t have the customization options that the other services have. One thing that I do like about Pictonic is the straightforward pricing model for premium icons: $ 0.59 per icon or $ 199 for unlimited access. Nice and simple!
Which Icon Font Generator Is Your Favorite?
Overall, all four of these services are worth checking out. They’re all really easy to use and packed with value.
Now that you’ve seen my thoughts on these four font generators, leave a comment below and tell me your thoughts. Have you used any of these services in past projects? Which do you recommend? What other options are out there that I missed?