How to Choose the Right Icons
Photo: SlipStreamJC
Icons are nothing new when it comes to web design, but that doesn’t mean selecting the right icons to use is an easy task.
Like anything else when it comes to your website, careful thought is required to determine the use and need for each component. Whilst sprinkling your pages with decorative icons may give your site a unique feel, it’s rarely the wisest of choices.
In today’s article, we’ll look at some tips to keep in mind when selecting an icon set, and then we’ll run through a shortlist of some of my current favorites.
Universal Symbolism and Shape
Mondrian.io uses a typewriter icon to denote the text tool
First and foremost, your icons need to be easily and instantly recognizable. Don’t try to get too clever.
At times, it can be easy to become enchanted by a particularly beautiful icon set — despite the fact the icons available may not be suited to your intended messages.
Other times, it can be tempting to try to be particularly original or clever in your icon choices. Why not make the submit button a rocket, eh?
Rule of thumb: If you have to think about the choice, you’ve more than likely made a bad decision.
Mondrian.io is an raw, open-source, browser-based vector application that looks very promising — but I think it illustrates this icon selection dilemma very well.
The current version of Mondrian uses a typewriter icon to denote the text tool (see diagram).
At first glance, this might not seem like an unreasonable choice. After all, typewriters are real-world text tools, right?
However, ask yourself:
- How many people do you know that actually own a typewriter?
- Could the average primary school kid identify one?
- Besides movies, when was the last time you even saw one?
Formally a symbol of writing, technology and the modern office, the typewriter has been gradually losing its meaning to us for 30 years — and that continues everyday.
Text tool icons in Fireworks,
MacPaint,Freehand and Photoshop
Luckily, there’s already a well-established history — dating back to the earliest 80’s GUIs — of graphics apps using either a capital ‘T’ or ‘A’ as their text tool icon. Everyone from secretaries using MS Word, to architects using Autocad, to high-end 3d modellers understands this idea.
In short: if you get a chance for a ‘free ride’ on an established idea, don’t be too proud to take it.
Like poor color decisions, bad iconography can ruin your site. Do note however, that some icons can have more than one meaning in different contexts.
If you are unsure of your choice, don’t be afraid to test it: Ask friends and family for feedback and if all else fails, include text to inform the visitor what it is they are seeing.
Remember, the sole purpose of the icon is to convey its meaning through its imagery.
Choosing Size and Placement
The size of your icons is an important factor when you’re picking icons to insert into your project. Typically in web design you will want to establish a visual hierarchy — from largest to smallest — by u sizing web elements to create easier readability.
For items like logos and headings, this helps create balance and harmony.
However, with your icons it’s important to remain consistent with your size as to not leave your page looking disorganized.
Overall sizing is also an important decision. Icons that are too large will crowd your page and interfere with reading flow, while too small will be hard to decipher. User test your sizing to find a workable middle ground.
Ultimately this will ensure that the eye of the viewer flows from element to element without having to pause. Proper size choices will keep the eye from becoming strained and will increase the speed of the viewer comprehending each icon.
Color and Consistency
As designers, we’re all well aware how important color is.
Color is generally used to evoke emotion and the same goes for your icons. If your icons are needed to cause urgency or inspire action, then make sure you colors support that task.
Also keep in mind that icons serve a very different purpose to illustrations or diagrams — they are a ‘visual shorthand’ for communicating, rather than either instructional images or decorative touches.
This means neither detail nor color accuracy are your priority.
Seriously question how many colors you need to accomplish your goals — or if, indeed, you need color at all. A good icon is a visual note, not a painting.
So, now that we’ve have looked at how to choose your icons, here are ten of my favorite (and free_ icon sets for your downloading pleasure.
50 Glyph Icons
http://365psd.com/day/4-188/
Metro UI Icon Set
Flat Red Icon
http://kemal-sanli.com/download/
