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.

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.

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.

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.

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.

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.

Good Icon Sets

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

Tagged as: icon sets, icons, Web Design