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 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



Metro UI Icon Set

Flat Red Icon



108 Mono Icons

Vectory Mini


Mono Social Icons Font

Rectangular Icons


60 SEO Services Icons

Gabrielle is a creative type who works as a freelance graphic designer, animator, photographer and filmmaker. She has worked doing various jobs from designing logos to filming commercials and animating music videos for both domestic and international music artists.

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


    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.

  • http://www.danielrosca.ro Daniel Rosca

    Thank you for sharing this great collection of icons. They all look great; more than this they may represent a starting point for any flat design.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.