Some Great Tips For Effective Icon Design

Icons are part of the fabric of the web. They're used for everything from contact links and "buy now" buttons, to social media tags and URL graphics.

Icon means a simple graphical representation of a command or function in a user interface, according to Princeton Wordnet. In other words - that means that an icon should help a user do something, not just look pretty.

Here are a few tips to bear in mind when designing web icons:

Don't think "logo"

And icon is not the same thing as a logo.

A logo might aim for general goals such as memorability or evoking an emotion. Icons are designed to prompt a specific action or demonstrate a particular function. This is an important distinction. It means that an icon should visually relate to what it represents. Logos can usually get away with being more obscure and indirect.

Keep it simple

"If you have to think about an icon to 'get it', the metaphor is too complex," according to the developer's handbook for the Gnome platform.

Like all great professional website design, icons should convey their function in as simple a way as possible. Off-the-wall visual metaphors like using a carrier pigeon icon for your "contact us" link may not be the best option. One way to stay simple is to:

Avoid superfluous detail

A common mistake a lot of icon designers make is to add an extra detail that has no functional advantage. For example, it might look good to have a green tick in all of your icons, but it could confuse the message.

Make the form reflect the function

There's a reason that the majority of email buttons on the web are letters or stamps. It's a visual shorthand for the activity the icon represents.

Sometimes, real-world equivalents make useful icons, such as paper-clips for attachment icons, padlocks for secure sites, credit cards for payment options and so on. However:

Be aware of cultural differences

Remember that icons don't always mean the same thing in every culture. For example, a US mailbox is usually blue. In the UK, it's red. In Sweden, it's a small yellow wall-mounted box. This subtle difference between cultures means that what might seem to be visual shorthand to you, is no such thing to your American or European colleagues.

Stand out from the surrounding content

An icon that blends in with page content isn't distinct enough to prompt a user to engage with it. Make it stand out with strong, contrasting colours or shapes (within reason, of course!)

Make each icon distinct

While consistency is important, so is differentiation. If icons on your site all look very similar, then how will users know which one to click?

Make them work at different sizes

Sure, your icon may work well at 258 x 258 pixels. However, what about on a mobile device? Most icon designers create several versions of the same icon in a variety of sizes. This isn't just a case of shrinking the original. For example, in your large version, you may have some detail in a folder graphic. However, when shrunk to half-size, the detail looks muddy and confusing. So the smart designer simply takes the essence of the original icon and simplifies it for the smaller size.

Icon design is a discipline all of its own. However, follow these few simple tips and you'll be heading on the right track for great web icons.