Website icons are visual cues that help communicate concepts on your website pages. they can act as a visual language to prevent the user from interpreting a concept incorrectly and to ensure effective communication.
Part of great website design are the icons you use on your website. The colors, the elements, the copy, the navigation and other aspects are all important, as they give the user an experience with your brand.
But icons are an especially important visual element that complement the copy and overall look of the page.
Here’s an example of a few icons that appear on our own website:
Note, for example, how the box for “email marketing” has an envelope icon. That website icon supports the content and further communicates critical information about that feature.
The most important function icons play is to give users instruction or direction for what they should do next. As a visual cue that accompanies content, users will quickly know what to do and where to go.
As a result, when your website enhances that user experience, individuals will stay on your site longer, and you’ll see an increase in conversion rates and various metrics that help your site rank well.
So let’s dive into some technical information about website icons and then we’ll show you specific examples of how we used icons in the design of one of our client’s websites.
Icons in web design have undertaken an interesting evolution since the early days of the Internet.
Let’s take a walk through visual cues over the history of websites:
Through all of these phases, website icons have proven through every era to be an essential design tool for communicating content messaging to the user.
You can learn more about web design trends here.
Website icons perform three main functions in design:
Icons in web design accomplish three core functions.
We’ll look at our recent website redesign of Kelly’s Choice for some context.
On the homepage of the Kelly’s Choice website below, we used website iconography to reinforce the message being communicated in the banner section of the page.
These icons support the concepts that the nutritional programs are physician approved, offer step-by-step instructions, the patient can know they’re doing the right things, and finally, get guaranteed results.
In the screenshot below, you’ll see that Icons help reinforce key statistics about the Kelly’s Choice program.
In the example below, we wanted to convey a step-by-step plan that users can follow to work with Kelly’s Choice, and ultimately, get the payoff they’re searching for, which was to “get results.”
By using a multi-column layout with numbered icons – instead of a just plain ordered list with only text – we’ve provided an easier way for the user to identify the program steps and convert through on the call-to-action (Choose Your Program).
When choosing icons, the primary thing to remember is that the symbol you choose should help to communicate the message in the copy. It should also match the overall branding.
Finally, avoid cluttering the page with too many icons, which will negatively affect the overall design.
As a general rule, keep this in mind: Use icons where they make sense!