Icon Design Patterns for Website Navigation

A couple of recent posts showcasing icon use in navigation menus got me thinking again about icon design for the web.

Back in 2007, I wrote a post questioning the value of using icons in site navigation. My main rationale was that icons are useful when they provide meaning. If they don't provide meaning they are just embellishments — eye candy, if you will.

However, in order for icons to provide meaning, usage conventions have to arise so that designers use them consistently and appropriately. For desktop and web applications, icon conventions are well followed — the floppy disk for 'save,' scissors to represent 'cut,' a blank sheet of paper for 'new document.'

When it comes to websites in general, and in particular, website navigation, very few conventions have arisen concerning icon use. The main one, of course, is the house icon for 'home.' This lack of consistency makes it difficult for web designers to use icons for navigation in a way that will help visitors actually use the site.

I thought it would be interesting to look the icons highlighted by the two articles above, and see if any conventions (or 'design patterns') could be identified that web designers would do well to follow in using them as a navigation aide.

About Us

It's clear that there is a strong consensus for using a humanoid shape or group of shapes to represent the About Us page.

About Us icons

About Us icons


The use of a briefcase to represent a portfolio of work is common enough to be recommended as a convention. The exception to this might be if the work is in a different medium such as video or audio, where the use of another icon would be more appropriate for that audience.

Portfolio icons

Portfolio icons


There is a less strong convention here, but it is notable how the speech bubble has become a popular way to represent a blog. This was a discovery for me, as I hadn't realized that there was any sort of agreement regarding using icons to represent blogs.

Blog icons

Blog icons

Contact Us

The contact page has traditionally been represented by an envelope icon, and that convention is clearly in evidence here. It's worth noting that with the rise in popularity of the speech bubble to represent a blog, it could be confusing to a visitor if a site uses this icon to represent their contact page.

Contact Us icons

Contact Us icons

I'd be keen to hear about any other web-related icon design conventions or patterns that have become widely used. Please feel free to share in the comments.

Posted on: September 6, 2010 | No comments

Recent Entries in "Usability"


Comments are closed for this entry.




Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

Proud member of 9rules network