Blog Post

Digital Marketing Blog

When To Use Icons On Your Website

  • By James QUINN
  • 15 Aug, 2017

Choosing between an image or an icon

when-to-use-icons-on-your-website-screen-
We are a visual society, so you should be using at least one of these options on your website.

Just like website design ranges from no use of images to the overuse of them, same is true with icons today. More than ever, some webpages are being cluttered with icons, that often add no context to the page or just add nothing to the user experience.

When is it good to use an icon on your website? Here's a few criteria I follow plus some resources for putting icons on your website.

When to place an icon on a webpage

First and foremost, I ask myself: Is this going to provide a clear visual context to the user?
If the answer is no, then the answer to placing the icon is also no.

For instance, take a look at this example for a design-build company specializing in basement remodeling that we recently developed a responsive website for.
when-to-use-icons-on-your-website
Using three icons to visually represent their 1, 2, 3 process.
This company has an easy 3-step process for getting your basement remodeled.

First is an in-home consult, which is of no charge to the homeowner. This is represented by a chat bubble. A chat bubble represents speech, a conversation, which is the goal of that first step. Second step is designing their basement, which is represented by the pencil. Third and final step is to build it, which is represented by the tools crossing each other.

None of this needs to be explained however, but it's understood quite clearly and well, automatically.

Now an image could have been used in replace of the icon, but what image would we put in there?
One option would be to get a photo of the salesperson greeting a homeowner or sitting down with them, but that's not always an option to get that original photograph.
A second option would be to purchase a high quality stock photo, but no matter how nice and unique the photo is, it will never be as genuine as an original photo that can be taken.

So the third option, and in my opinion, the best option is to use an icon like we did here.

How To Get Icons On Your Website

There are several ways to get icons up on your website. If you're using Wordpress, your theme might have a built in icon widget.

If you're one of our clients and using a Breeze Digital Website, we have a built in icon picker for you that's very easy to use, with hundreds of built-in icons to choose from and easily changing the size, color, background and more. You can also upload your own icons, as long as they are in an SVG format (Scalable Vector Graphic).

There's another easy option though, besides our own icon picker.

Using Icon Fonts

Another option to get icons onto your website is the use of what's called an icon font.

What is an icon font? It's basically the same thing as a regular font, just appears differently.

Take 'Comic Sans' for example. (Actually, you should take that font and delete it from your system and everyone else's)
When you choose Comic Sans for the font on your website, you are telling your website to display all of the letters and characters in that font style. Simultaneously you are also telling the world you have poor judgement in font selections.

An icon font works the same way, except you're not using it to display letters, and you also do not insert the icon from a keystroke.

Let's look at one icon font to use as an example, Font Awesome.

(P.S. They're also working on a great icon project known as Font Awesome 5, their fifth iteration of their icon font system. You really should check it out. I backed them on Kickstarter, I think I was backer #6 or 7 or something like that. Actually I was in the hundreds, but it's really a great system. I use it all the time.)
Website using font awesome
Website Icons using Font Awesome
In the same example website as above, on their contact page we are using two icons from Font Awesome, version 4.
An icon font, will take on the inherit style of the <body> font. So in this case, it's set at a relative size of "20px" and is the same green RGB of 41, 165, 85. You do have the ability to change that and do more to it, but to make this a very easy and simple illustration, that's all it's doing here.

How To Place A Font Awesome Icon On Your Website

There really is a more detailed version that's explain much better than I can on Font Awesome's own Getting Started page. But the jist is this:

  1. Get Font Awesome onto your website, usually either through CSS or their nifty CDN.
  2. Place the html <i> tag wherever you want the icon to appear, followed by the proper font awesome classes you are applying.
  3. You can optionally add your own classes to the tag as well to customize this.
It will look something like this:
<i class="fa fa-heart"></i>
Which then produces this:

The Moral Of The Icon

1. If you're looking to place icons on your website, just always ask yourself if it's going to enhance the experience or just because everyone is doing it today and it looks "cool".

2. When choosing your icons, find ones that actually relate to the text it's being used to enhance. If you're using an icon by itself with no text, make sure that when someone sees the icon, they'll instantly discern what it's representing. If in doubt, show it to a few people.

3. If it's a single color icon, match it to one of the colors being used on your site.

4. Use a multi-colored icon, as long as those colors are being used on your website. Don't clash your colors.
By James QUINN 08 May, 2018
There are no less than 35+ companies that fall under the umbrella of Marketing Automation. Not including the amount of CRM’s (Customer Relationship Manager) and ESP’s (Email Service Providers) that are out there. There are no less than 35+ companies that fall under the umbrella of Marketing Automation. Not including the amount of CRM’s (Customer Relationship Manager) and ESP’s (Email Service Providers) that are out there. When considering the technology differences between MA, a CRM and an ESP, many of the features are overlapping. However, only Marketing Automation offers what a CRM can do, what an ESP can do & much more.
By James QUINN 05 Feb, 2018
Do you know that the number one visited page on a restaurant website is, besides their homepage? The restaurant menu. Chances are, if you recently visited a restaurant's website, you were probably looking for their menu to whet your appetite. It's possible that you might also go their to see any specials or events going on, but primarily you want to see what's cooking. If you own a restaurant, you're in the business of guest service. Google is in the business of getting the right information to the right person at the right time.
By James QUINN 18 Dec, 2017
If you’re working with some budget constraints, and you’re working with a professional designer – choosing to start with a template can be a great way to get your website up and running. If you’re on time constraints, templated websites work great for that as well. However, if you're looking for a professional, one of a kind user experience, then custom is the way to go.
By James QUINN 22 Nov, 2017
If you’re like me, then you my friend, are a data junkie. Even if you’re not a data junkie, you can still appreciate measuring your ROI. What I’m saying here, is that while the world is going (has gone) digital, you can still make excellent use of offline marketing campaigns and advertising.
By James QUINN 13 Jul, 2017
What’s more important to you: A shiny trophy for being number one on Google or a boat load of new clients coming your way. Yes, we have said before that the number one position on Google gets 33% of the traffic for that keyword, but what do you see coming up as number one now-a-days? Local Directories come up first. Do a quick Google search for anything local business related, and the first page of results will be review sites and directories.
By James QUINN 18 May, 2017
Are you still creating posts that say "Mention this post and get 10% off your next in-store purchase"? It's important to keep track of what's working in your marketing plan, but you're making it difficult for people to redeem your offer. Facebook has a built-in post to create what we'll call a coupon, they call it an offer. I walk you through how to create a Facebook Offer/Coupon and there's a video walkthrough also.
More Posts
Share by: