Icons have been used in design since, well, since design began. From the hieroglyphics on the pyramids of ancient Egypt to the orange RSS icon now gracing so many web sites, icons have been used in both print and in web design for the same purpose — to draw the eye quickly to important parts of the document or web page.

Practical Use

Icons sum up and convey lots of information quickly, and you can use them on your site to grab your visitor’s attention, rapidly communicate an idea, or highlight a section of your site.

Let’s take a look at some random sites and how they use icons to communicate, make navigation easier, or just make the page look pretty!

Some examples of the use of icons include:

1. Add visual interest to navigation.

digitalartifex

The digital artifex site uses icons in association with some text for a mid-page navigation setup .

2. Draw attention to specific parts of a page, such as special offers.

starbucks

On the My Starbucks Idea homepage, the icons draw the user’s eyes to what might otherwise be a fairly cluttered page with a lot of text.

3. Draw the eye to services that you provide.

sitemaker

Sitemaker uses icons to communicate using well understood images — for example, a pie chart icon to illustrate increasing sales.

4. Add extra “oomph” to headings.

ripple

The Ripple site is currently in beta but the homepage consists almost entirely of the four icons. It’s very simple and engaging.

As well as providing a very practical function, you can also use icons for aesthetically pleasing purposes too. On some web pages you’ll find that the icons used are an extension of the company branding, while on others there is sometimes a sense that they icons are there for no other reason than to look pretty. If you are using icons to add a little extra “oomph” to your site, remember that for most of your visitors, the icons should have some sort of meaning or association so make sure that your choice of icons does not confuse your users.

Evolution of the Web Icon

Old-school icons such as a little house representing “home” and the outline of an envelope representing “email” have now been replaced with miniature works of art.

car-icon
(Yes this is actually an icon!)

If you like a challenge, you can make your own icons in an image editor such as Photoshop or Paint Shop Pro. Otherwise, there are some incredibly beautiful icons available to download for free, such as the Silk icon set or those available at IconPot. A quick search on Google will astound you with what’s available.

A New Icon

I think it’s important to mention a new kind of icon that has evolved in recent times entirely for use on web sites — the favicon. As you’re no doubt aware, the favicon is that little picture that appears on the URL address bar of your browser, and also on the tabs of some browsers.

favicon

The favicon is now part and parcel of every web design, and should be included as part of your overall branding. Alyssa recently covered an amazing list of 88 outstanding examples.

What do you think makes a good icon? Do you use icons on your sites? If not, why not?

Related Reading:

Jennifer Farley
Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

  • James Hammermade

    That first example is a real rip-off of the expression engine website and not a good one. If you’re going to use an example I suggest the original at http://expressionengine.com/

  • http://www.jamesweston.co.uk/ rhythmic

    I’m surprised that SitePoint has not taken advantage of transparency in its favicon (white background)… is there some accessibility issue I’m missing? ;)

  • Tom

    Icons are undoubtedly a great way to enhance your online content, however there are some funny examples there… MyStarBucks uses a cog for “see”?

    I love the challenge of designing icons, I think my example above shows a clear reason not to use stock icons just for the sake of having an icon ;)

  • melissapbr

    I really don’t get the point of this article, especially since the example Jennifer chose are not even all that good. An icon represents some object or action and should be self-explanatory. Most of the examples shown in the article are actually very poorly chosen icons. This happens often, because we usually have to “make due” with existing icon libraries, since not all of us who need to use icons can actually create nice looking and cohesive icons.

    For example, the Starbucks example uses a cog wheel to visualize the action “see” – while it is usually associated with is most often used in conjunction with system settings, so it didn’t work for me. Another example are the Sitemaker (it’s actually Sitemakers) icons. “Low monthly payments” is associated with an iMac? Rather ironic given the prices of Macs and “Receive full support and training” with a pen and piece of paper? Compare this to the training icon at Ask Lilach. A lot of sites only use icons as “pretty pictures” which still do a good job of organizing content and drawing attention, but don’t really convey any meaning.

  • Pingback: WordPress, SEO & Blogging Articles for 30/04/09 | WPStart.org - WordPress themes, plugins and news()

  • WSBB

    Wow thanks for that tip about the “NEW” type of icon. Favicons “evolved in recent times”? Given that all of the other examples are from websites, I’d say something more like “another tpe of icon that’s been around forever”.

  • Pingback: Technology Related Links for April 30, 2009 - Jason N. Gaylord's Blog()

    • http://www.laughingliondesign.net jennyrusks

      Firstly, thanks everyone for taking the time to comment. I take your points that these aren’t the most electrifying examples of icon usage.

      @WSBB the favicon first appeared as a way to mark favourites in Internet Explorer 5 in 1999 but was difficult to implement. It became more commonplace in IE 6, but really didn’t become mainstream until Firefox 1 and IE7. So my point is, in the grand scheme of design things, at less than 10 years old it is a relatively new type of icon.

  • Pingback: Easy-to-use()

  • http://www.clearwind.nl peach

    @melissapbr
    I think icons can be great but I agree the examples here are not very good. Check out this article for some nice examples: http://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/

  • http://www.patricksamphire.com/ PatrickSamphire

    It is probably just coincidence, but it seems to me that several blog entries on sitepoint recently have been done a few weeks or months before on Smashing Magazine. This one is a good example.

    I know with so many magazines covering design out there, it’s hard to be original, but still.

  • Pingback: links for 2009-05-03 « Giri’s Blogmarks()

  • http://www.magain.com/ mattymcg

    Thanks Patrick. Rest assured that while we’re as big a fan of Smashing Magazine as yourself, the ideas and the content published on the SitePoint blogs are entirely original, and there are plenty of examples when they, and other blogs, have followed suit after a post on SitePoint.

    Thanks for commenting.

    Matt

    Managing Editor, sitepoint.com

Related books & courses
Available now on SitePoint Premium

Preview for $1