Font Awesome

Working with Icons: Expectations vs. Reality

by Matt Johnson

So, you’ve set sail to go make something awesome on your website. Congratulations! You’re one step closer to making an imprint on the world.

But what nobody tells you about are the snags that come up when you’re in a hurry to launch your site. 

Think about the first site you ever built. Tending to all the itty bitty details was endless, and it took you way longer than expected, right? 

Building and maintaining a professional looking site isn’t as easy as it first seems. There are dozens of tiny elements to consider. One of which is (cue drumroll) icons!

Icons Are Everywhere

From the moment you wake up in the morning, icons are there — on our alarm clocks, on our stoves and microwaves, and even in our cars. Icons abound in our digital interfaces, from mobile phones to websites.

Icons are so ubiquitous to websites that unless you’re a designer, you probably don’t give them much thought (it’s okay, we’re not offended. *sniff* ) Icons are just there. But they do serve an important purpose and help clarify your site’s message

Not All Free Icon Sets Are Created Equal

So, adding a handful of icons to your site is important for visual cohesion, and you can get by with lots of free icon options. But, before you saddle up to head out into the vast frontier of interweb icon discovery, here are just a few key things to consider. 

Searching for the right icons (and making design changes) gets tedious

Anyone who’s searched online for free icons knows there are a bazillion options. Some folks opt to mix and match individual icons and sets — and that approach can get you started. But sooner or later, you’ll likely need an icon that isn’t in a free set. That means you’ll have to roll up your sleeves and do some visual doctoring to an icon that sorta-kinda-but-not-really fits your needs.  And that whole process can be quite a chore. 

Icons don’t always play nice with certain browsers 

As you wrangle your icons to get the visual consistency you’re looking for, you may also notice that certain icons can be a little bit unpredictable, and create browser rendering problems. 

Drat! Foiled again!  

You know when an icon is supposed to appear on a page, but all that shows up is a little box instead? So not only does your site look like it was designed in the late 90s, fixing it becomes an annoying time suck when you’ve got better things to do. And a sluggish site may get you dinged on search rankings. 

We’ll Be Nerds About the Icons So You can Get Back to What’s Important  

We’ve experienced the hassle of working with icons firsthand. That’s why in 2012, we created our first batch of open-source icons, and we’ve been icon obsessed forever after. Since then, Font Awesome has become the web’s default icon set, used on over 100 Million websites. 

Font Awesome is a one-stop icon shop with over 1,700 free icon choices. And as you grow, we grow with you. With Font Awesome Pro, you get over 14,000 icons (and counting!) in five styles and 66 categories. Yowza. That’s a boatload of icons! 

But beyond sheer volume of icons, we fiddle with the icon tech ad nauseum. We’ve stress-tested each and every icon, so your icons and styling work and display perfectly in all modern browsers. That means less time wrestling browser rendering, and more time making something awesome. 

Get Free Icons on Your Site Fast and Easy

Get up and running fast with a Font Awesome Kit — your own personal version of Font Awesome set up exactly the way you want it, all with a single line of code on your website.

What’s a Font Awesome Kit? Glad you asked. Kits are a little bundle of settings and icons that we think is the best way to use Font Awesome. Kits allow you to package up your own version of Font Awesome just the way you like it. 

How A Font Awesome Kit Makes Icons Easy: 

  • Saves time getting icons onto your website.
  • Speeds up your website by serving your Kits on our global CDN. 
  • Nabs the latest version of Font Awesome (+ new icons) automagically.
  • Applies icon accessibility best practices in just a few clicks. 

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit code to the head of each template or page of your project where you want to add icons. Easy peasy! 

Get Started

P.s., you can use Font Awesome for the desktop too!