A Guide to Using Icons in Web Design

by Matt on February 26, 2009 · 18 comments

in How-To,Web Design Tips

Some say that the design is in the details, and often times that is true. One of those details often used in web design is icons. Icons bring extra illustration to a layout, and can help attract attention to any object or element.

The following is an in-depth description of best practices for the icon, when to use the icon, and a description of working with metaphors, including a nice list of commonly used icon metaphors. There is also a comprehensive showcase of inspiration websites that use icons, and a list of great icon sets.

The Metaphor

Icons are metaphors for text, and it is most important that you get the metaphor perfect. Clear communication between the website is vital to usability. The icon should fully convey the message in place of text. The user needs to be able to immediately know what the icon is saying.

Use Recognizable Objects and Simple Metaphors - The user should know what the icon is showing immediately. Using common objects as the icons, such as a house (for home), is important. Here are more examples:

  • Speech Bubble for comments
  • Envelope for Email and Contact
  • Using an An Arrow and Hard Drive to show Download
  • A Question Mark for Support, “Help”, and FAQs
  • A Folder to Show Files
  • A Blow Horn for a Forum
  • Two Arrows in a Circle for Updates
  • A Monitor to Show a Video
  • Magnifying Glass to Resemble Search
  • The Letters ABC to Show an Alphabetizing Option
  • A Lock to Show Accessibility
  • A Star to Mark Importance
  • A Mouse To Show Links
  • And, Many, Many More!

Labels With Icon – If the icon is even somewhat confusing, then a small label can go nicely with the icon. The text clears things up for the user, and brings the icon to a new level of usability.

As a general rule of thumb, attempt to keep the label to three or less words, and only one line of text. Use readable text and clean colors.

Pixelmator does an excellent job of labeling the icon buttons in their support section.

pixelmator1

When to Use Icons

As a Button - Icons work very nicely as buttons. They look clean, and replace boring text with colorful illustration. Many designs feature this technique, and there are many ways that it can be done.

With Text on a Button – Also, it is a good idea to use icons on buttons along with text. It calls attention to the button and the color will attract the user’s eye.

Another good example from the works of Pixelmator, these buttons use icons to accompany the boring text. Also, these buttons feature excellent hover effects. As the user moves the mouse over the button, the icon appears in color. This is a great usability feature to show the user that it is in fact a button.

pixelmator2

Support and Call Attention to Information - Icons are to replace text. Use icons to show information, instead of writing it out. Use icons to compliment text and information too. Icons can be an excellent way to support text and add that extra little “umph” to a good website.

With Titles and Headers – The use of icons is a great practice to use to call attention to important elements. Icons are very commonly used with headers and titles. They had a visual aid to the text of the header, and bring the user towards the header.

Here is a very good example of an icon being used to accompany a header.

chachingicons

Best Practices

Make it as High Quality as Possible – Along with usability, quality is one of the more important characteristics of web design.

Along with quality comes the details. Include subtle details such as shadows, reflections, and gloss. Those small details can go a long way, especially when attempting to give the icon more depth and dimension.

Keep it Simple with Shapes - Creating icons that are overly complex is a common mistake made in icon design. Yes, as I said detail is good, but there is a fine line between detailed and complex. Get the basic shape and outline of the object perfect, then fill it in with simple shapes and shading to create a recognizable icon that is not overboard on details.

As I just mentioned, using simple shapes becomes key in icon design. Start with shapes to get the outline. Then, move on to your colors. Pick your colors. Finally, bring realism and dimension to the icon with lighting and shading.

Take a glance at the icons below. They are based on simple shapes, but still have some effects to add to the realism of the illustration.

280slidesicons

Perspectives – Perspectives depend entirely on the type of icon you are working with and the website itself. First of all, in web design it is good to keep all of the perspectives consistent. It brings the icons together and makes them seem like they are meant to be there.

In most cases, you will want simplyto use a straight on perspective, not too much tilt. If you are going to include a tilt, always use a vertical tilt, up or down. Looking at the icon from a side is too complex, and simplicity is key.

Keep the Light Source Consistent with that of the Website – Consistency is one of the most important usability tips. This also applies to design icons. Keep the light source and shadowing consistent throughout all of the icons. Also, be sure to keep it consistent with the site. Match the light source of the icons to that of the website.

Strong and Well-Defined Lines - Using strong lines to develop separation in the dimensions of the object is one technique to be wary of. This will make the shape the icon is forming easier to see, and will make the icon much more clear.

Icon Conveys Style of Website and Logo – Evidently, consistency is important. One more place to be consistent in web design is the style. The whole website should convey the same style all throughout. The is the same with the logo and icons. The style of logo (i.e. realistic, colorful, shiny) should be the same as the icons of the website.

Flashy Colors - Clean colors are the way to go, be you should remember to make them noticeable. One of the icons main functions is to bring attention to an element. Therefore, you should use noticeable colors that attract the user. Also, use colors that have a large contrast from the background color and are contrasted from the overall color scheme.

These large icons are very colorful on the dark background and stand out nicely. They are sure to grab the user.

traffikicons

Vector Format – I’m sure that you have seen this everywhere, but I thought it would be good to include it this list anyway. Vector formats allow the icon to be scalable. This is important especially in web design, because many times you will want the icon to be small in the site.

Vector formats are more convenient to you the designer, also. Most often, when you go to make the icon, you won’t already have a perfect locked in size. You may have a range in mind, but most often not a set size. If you use vector formats, you will won’t have the hassle of remaking icons.

Use a Strong Border – If your icon is being placed on a light background, use a dark border. This creates separation and gives the icon an extra “pop”.

Showcase

Below is a collection of clean layouts that have excellent icon use.

codaiconspsdtutsiconsuxiconvectortutsiconsmediocoreicontapbotsiconsthingsiconsmailchimpiconskomodoiconschuchiiconsgroovesharkiconsslingshoticondiscountboxiconslightcmsiconsiconresourceicons

macrabbiticonsdfwiconsgotmilkiconscheckouticons

extendmaciconscsseditwarehouseiconsrapidweavericonsvoicecandyjumsofticonsroxioiconscandybariconsanxietyicons

Good Icon Sets

Here are 12 high quality icons sets that are worth looking into when designing a website.

silkiconscoquetteicons

functionicons1practikaicons

pinvokeiconsfreshicons

deviconsidealicons

jonasiconsorbicons

milkyiconslockericons

Spread the Love:
  • StumbleUpon
  • Twitter
  • Digg
  • del.icio.us
  • Design Float
  • Reddit

{ 14 comments… read them below or add one }

Gabe Harris February 27, 2009 at 12:34 am

I love when I come to a site with icons instead of just text. Great explanations of how/when to use them, and even greater list of resources! Thanks for the inspiration!

Pliggs February 27, 2009 at 8:30 am

Good post, icons these days are being created are some very talented designers.

Thanks for the list of resources.

Desiztech February 28, 2009 at 12:18 am

Thanks for nice post .I love using icons. They able you to see thing visually it is easy to navigate.

April February 28, 2009 at 11:52 pm

Great links for all the icon examples. Good points made throughout, like “Keep the light source and shadowing consistent throughout all of the icons… Match the light source of the icons to that of the website.
Nice article.

Osvaldas March 1, 2009 at 10:38 am

There should be examples of wrong icons usage.

web design March 2, 2009 at 7:09 am

thanks for sharing such a nice article. i love using icons in web sites. they make things look wonderful.

John March 3, 2009 at 2:04 pm

I am all for icons as long as we know what exactly they are for. Good set of examples on this article. Thanks for sharing.

Thomas March 6, 2009 at 5:44 am

Thanks, Great list, veru usefull

Ef Rodriguez March 6, 2009 at 9:38 am

Excellent post. Clarity is so important when selecting and placing icons – I’m surprised that more people don’t grasp that concept.

I agree with Osvaldas above – a few examples of poor icon usage would be a great corollary to the rest of the post.

ptamaro March 17, 2009 at 9:20 pm

Great post — really thorough. I like the examples and it’s great way to ‘wrap it all up’ with some fantastic resources… Thanks!

Silva Stratz December 29, 2010 at 9:54 pm

Well I sincerely liked studying it. This information procured by you is very effective for accurate planning.

raf January 17, 2011 at 7:24 am

raf sistem

It’s nice. Thanks a lot.

seltzer maker January 25, 2011 at 3:30 am

I enjoy you because of every one of your efforts on this blog. My aunt delights in working on investigations and it is obvious why. Many of us know all relating to the compelling form you render invaluable steps on this web site and in addition cause participation from people on this situation then our own girl is always becoming educated a lot. Take advantage of the rest of the new year. You are doing a dazzling job.

motorlu panjur May 17, 2011 at 2:09 pm

Thanks, Great list, veru usefull

Leave a Comment

{ 4 trackbacks }

Previous post:

Next post: