How to Choose the Right Icons

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

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 tools

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/

http://365psd.com/day/4-188/

Metro UI Icon Set

Flat Red Icon

http://kemal-sanli.com/download/

http://kemal-sanli.com/download/

108 Mono Icons

Vectory Mini

Socialico

Mono Social Icons Font

Rectangular Icons

Softies

60 SEO Services Icons

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://cashwithatrueconscience.com/rbblog Ryan Biddulph

    Gabrielle,

    Pick icons which vibe with your brand. So many awesome options above. Visualize your ideal logo. Work off of that image to find the right icon. Excellent share here.

  • Jacquelyn Larae Chastain

    Great article! Thank you for sharing. I would say adding some examples of icon fonts would be super helpful too. I love the set that comes with foundation. They all look really great, work really well, and work perfectly with any responsive design.

    • Alex Walker

      I think there is more than enough for a separate article covering icon fonts.