Embrace simplicity: In an increasingly mobile world, there is a pretty good chance that your icon will be displayed on a small screen. Because of this, shapes must be simple and unique. Details such as numbers will either be completely lost or at the very least, hard to discern.
Provide a single focus point: If your icon hasn't conveyed its meaning instantly, you lost the game. Attempt to keep it to a singular point of interest to make it "click".
Design a recognizable icon: . A rotary phone might be recognizable, but is it really your best idea for a "call now" button? Attempt to use imagery that is universally associated with the icon's purpose.
Use words only when they're essential or part of a logo: .Don't include nonessential words. If you feel like the icon needs an explanation, it might be time to scrap it.
Don't include photos or interface elements: .Both of those might create a confusing user experience and will be hard to discern.
Don't include photos or interface elements: .Both of those might create a confusing user experience and will be hard to discern.
Let's also add another two elements, since we're talking about web design:
Provide a memory trigger: While adding text to the icon itself goes against the core idea, initially seeing the icon with accompanying text can then provide an important memory trigger when it is repeated by itself somewhere else on the website.
Harmonize the look and feel: When using icons on a website, you should always attempt to use visual elements that follow the same guidelines. Keeping the colours similar (or staying monochromatic), the finish, the use of shadows, the geometry, etc.

Too much of a good thing?

There's a fine line between "not enough" and "too many"; it's often the reason why a design might go through multiple iterations. After my initial design and review, I will usually take a step back and weigh the pros and cons of my icon decisions.

On one hand, limiting the amount of icons I use will:

Make navigation easier

Grab the user's attention faster

Help guide the user

While using too many icons could:

Cause a loss in the user's attention

Make navigation more convoluted

Will cause a failure to deliver a clean interface

Adjusting for the experience across all devices

Websolutions.ca makes fully responsive websites , which means we deliver websites to our clients that will work smoothly and look beautiful on any devices. The use of icons becomes especially important in a case where a client is looking to create a cross-device experience (e.g.: start off on a desktop and finish converting on a mobile device).

If your website "feels" right on all devices, it doesn't create a wall between your business and your potential customers. They will navigate without too much forced guidance by being given the right hints at the right time, with a clear hierarchy in terms of interaction importance, just like a good GPS would.

It might be their first visit, but the icons will make them feel right at home.