If a picture is worth a thousand words, then an icon must be worth a million. An icon is a universal symbol, easily recognizable by many. When used on a website, its purpose is often to help visitors quickly recognize and interact with a design. Most commonly, it’s used as a tool for wayfinding or navigating.
Icons are graphic symbols that are so familiar to people, viewers should recognize what they mean without reading any words. Icons speak a common visual language that is understood by all, regardless of native tongue, race, nationality, gender, or age.
An icon can convey a lot of information that is delivered instantly through a simple picture. However, they can be subjective to each viewer, which is why we recommend showing them around to different people before you consider them final. The most effective icons follow these guidelines. How do your icons stack up?
Basic Requirements for a Great Website Icon:
-
Must be UNIVERSALLY understood
-
Must convey ONE message succinctly
-
Must NOT be too complex
-
Must be identifiable at SMALL sizes
-
Must be CONSISTENT stylistically with other icons in the set
-
Dimensions should be roughly SQUARE
Don’t Over-think Icons
It’s important to remember that icons are not meant to tell the entire story. It can be tempting to get really creative, but a word of caution: Do not over-think an icon. The first image that pops to mind is usually the best solution because it is the most obvious.
For example, an icon of a wheelchair in a parking lot is widely understood to mean a space is reserved for persons with a disability. We understand that it does not exclusively mean people in wheelchairs, and applies to people on crutches, on scooters, with vision problems, etc. Similarly, if you are considering a set of icons to represent different types of buildings, a book would be an obvious choice for libraries. Of course, libraries also have DVDs, music, offer lectures and classes, and tons of other things, but books are still universally symbolic of libraries.
Survey Says!
Try not to let your own personal definitions influence your icon design. In the library example, above, if you personally only use the library for borrowing movies, that does not mean an icon of a DVD is the best choice. Use the “Family Feud” approach: If you surveyed 100 people and asked “Name something you find at a library,” what would be the top answer? Sometimes, the “correct” answer is not the top answer.
Here are a few examples of icons we’ve used in a few of our website designs:
Explore each of the links below to see how we’re using icons strategically throughout the entire design.
Sanborn Head
SanbornHead.com – Icon Style: Solid
Environmental Partners
EnvPartners.com – Icon Style: Thin Line
Cirtronics
Cirtronics.com – Icon Style: Line
Grimes & Company
Grimesco.com – Icon Style: Duotone
Helpful Links:
- We adore fontawesome.com, they have a HUGE library of icons to choose from in different styles. You can also download them as vectors so you can create your own icons in a similar style if they don’t have exactly what you’re looking for. It’s a great resource and a really handy jumping-off point.
- This article was inspired by Unblast.com where they wrote a great article on how to create an icon set.
About The Author
