I’ve loved FontAwesome for a long time, but now I must say goodbye for a better icon service.

Icons are huge in websites today. They look cool and can be styled to different sizes and colors. Most importantly, they make for a good user experience, taking up little space while giving good direction. For example, having an email icon beats writing “email” in a toolbar each time.

This means having a good tool to manage icons is vital. For a long time I’ve used Font Awesome. It’s a remote library of almost 600 icons that only needs a single reference and the right tag references. It’s been my go-to tool for a while, but recently I’ve discovered Fontastic. It quickly made me a believer, and I plan to use it for my future icon needs for all the below reasons.

More Icon Options

Obviously the more icons the better, and Fontastic definitely has more. Font Awesome has 585, which is good, but Fontastic has an astonishing 4,286. That’s over 700% the number of icons, and that’s only counting the free icons. Plus, even with so many options, you can select specific ones for your library instead of using them all. This avoids extra bloat from including lots of icons you won’t be using.

To be fair, all the extra options may not matter much. Some icons are repeated several times (the Github OctoCat appears least three times). Plus I can’t think of 4,286 different situations when I’d need each icon. Especially since some are odd icon choices, such as one for each state, a cow, a chibi robot, a constipated ski pro, and a marijuana leaf. See those and some of my other favorites below:

I don’t even need, or want, to also describe the “Nasty Icon” set that’s there for whatever reason. These include classics such as:

Try and find them all below!

Knowing the Internet, I could see maybe half being used at some point. The other ones, give the Internet 15 more years until some site needs them.

Local Files

There’s been some debate on hosting extra files locally or through remote libraries. Local ones allow more control and can help sites run faster, while remote ones save lots of time in development and are generally more convenient.

Font Awesome is a remote library, while Fontastic allows for either remote or local file managing. While I’m more on the local side of things, Fontastic gives the option to people on both sides. Flexibility is vital for development tools, so it’s a definite plus.

Custom HTML references

Font Awesome requires specific class references for each one. This is just a small annoyance, but it’s still an obstacle. Fontastic gives a lot more control over how you reference them. You can decide to reference them with regular CSS classes, or with a custom attribute “data-icon” that you can change for each.

I personally think the custom attribute is the better way. It makes the markup for elements easier to manage by separating them from any CSS styling classes you’ll want to include. But like many things in web development, it comes down more to personal preference since many options work. Again, I see greater flexibility is what makes the better choice.

Add Custom Icons

This is the biggest advantage of Fontastic by far for professionals. Your library isn’t limited to the (admittedly many) icons that are provided. You can create custom SVG icons and import them to your icons, then you can still reference and edit their styles in the same way. So for big projects that need custom icons, Fontastic will cover you just fine.

Conclusion

This post can be summed up in the following tweet:

I’ve been loyal to Font Awesome for a while. But once I found Fontastic, I became a believer. Both have merit, but if I have to chose, I’m going with this Fontastic for all the above reasons. I encourage all other web developers out there to look at both tools thoroughly, and you’ll probably make the same decision.

Cheers, Max A