Matt JohnsonWhy you going to the airport? Flying Somewhere?
Oh, hey. I see you’ve stumbled across Font Awesome. Looking to put icons on your site? Great choice. It’ll look cooler that way.
Creating a functional and beautiful website is complex, and adding visuals is just one more box to check in a long list of website building to-dos. You’ll need to choose a template, write copy, dial in the SEO, and the list goes on and on. But are icons really that important?
Well, at the end of life, you probably won’t regret forgoing icons. But are they worth the effort to make your site better? Um, yes. Yes, they are.
Look, we both know your product is genius. So, whether you’re building IGotWorms.com, starting Mutt Cut, the mobile pet grooming business, or launching a site dedicated to travel in Aspen, California if your message is complicated, users will bounce.
As one marketer says, “if you confuse, you lose.”
Users get antsy when they experience “cognitive load“, which is just an eggheaded way to say, users don’t want to think when navigating your site.
Here are 5 Ways Icons Help Clarify Your Message
Icons make crucial content easier to digest.
Icons can help signal key information that users need to know, like statistics or steps to solve the problem your site claims to fix. If you don’t guide users by the hand, they may not take the extra time or energy to figure out what they need for themselves. Clear iconography can help.
Icons help balance text-dense content.
Sites that require deeper explanation and lots of text will benefit from icons, too. The images and the text are two different elements that share the same job: communicating something complex in simpler terms. When you get icons to do some of the explanatory heavy-lifting, you’ll also free up web page real estate — and negative space improves your page aesthetic and scannability.
Icons help users navigate your site.
Imagine driving in the unfamiliar countryside, and you notice all of the side-road signage displays multiple lines of text instead of discernable images. That’d be weird — and make for a stressful drive as you squinted to read each message. Nobody wants to end up going 600 miles in the wrong direction.
A well-placed icon acts as a sort of roadmap for the eyes that says, “important information up ahead!” and lightens the cognitive load so your brain can navigate more intuitively.
Icons add personality to your site.
You want to get a tone and personality across through your brand. Choose icons that visually reflect your brand’s personality and style. But one word of caution: use icons that are universally recognized. Otherwise, you may confuse users with unnecessary information.
While cutesy design may be fun for you, it may not result in guiding users. As our own Jory Raphael has said, “as a communication tool, an icon should almost be invisible.”
Icons grab attention.
While icons should always serve to simplify content and lessen that cognitive load, occasionally it makes sense to add a little more pop to an icon to highlight an action you’d like a user to take. Don’t overdo it, of course. Nobody wants to be assaulted by a glitter bomb of images, but thoughtfully placed animations can go a long way.
Font Awesome 6 comes bundled with basic animations in our support styling, so now you can create icons that:
Beat Animation
Fade Animation
Flash Animation
Flip Animation
Beat Use the fa-beat animation to scale an icon up or down. This is useful for grabbing attention or for use with health/heart-centric icons.
Fade Use the fa-fade animation to visually fade an icon in and out and grab attention in a subtle (or not so subtle) way.
Flash Use the fa-flash animation to grab attention by visually scaling and pulsing an icon in and out.
Flip Use the fa-flip animation to rotate an icon in 3D space. By default, flip rotates an icon about the Y-axis 180 degrees. Flipping is useful for transitions, processing states, or for use with physical objects that one flips in the real world.
Spin Use the fa-spin class to get any icon to rotate, and use fa-spin-pulse to have it rotate with eight steps. This works especially well with fa-spinner & everything in the spinner icons category. If you would like an icon spin in reverse (e.g. counter-clockwise), add an additional class of fa-spin-reverse.
And this is just the start of all the ways icons can help improve the clarity of your site. And when you get clear on communication, I’m telling you there’s a chance to gain customers and keep them.
Get Icons on Your Site. Fast.
While building a site can become an involved process, adding icons with Font Awesome is easy-peasy!
CDN-powered Kits. 1 line of code. Live in under 1 minute. For real. (Oh, and did we mention, Font Awesome is free?)
PS. Did you ever think about what Mary Swanson’s name would have been if she’d married Lloyd Christmas?
