20 Great Examples Of Icons In Navigation Design
Tweet Navigation design is one of those things you simply cannot overlook. When looking for specific information on a website, a lot of people will look at the main or sub navigation or use the search bar (if present).
When done right, adding visual cues to your main menu can prove very useful in making things just a tad more appealing to visitors. Let’s have a look at some sites that make great use of icons in their navigation menus.
One trend I noticed while looking for sites to include in this post was that a lot of them used monochrome/greyscale icons – subtle but very effective.
TappGala ↓
Komodo Media ↓
Toffeenut Design ↓
Geng Gao ↓
Narwhal. Co ↓
Fragment ↓
Carbonmade ↓
Carsonified ↓
Dan Wiersema ↓
GreenOlivz ↓
Ecoki ↓
Freelance Folder ↓
Vancouver 2010 ↓
WP Bundle ↓
Dustin Allen Pace ↓
Media Loot ↓
Ministry Spotlight ↓
Scarpo ↓
Jonnotie ↓
Fresh01 ↓
Your Turn To Talk
Which ones did you like the best? Feel free to chime in and leave a comment below. Of course let us know if you found other sites that make great use of icons in their navigation menus :)
About the author:
Jon Phillips is the founder and owner of SpyreStudios and the co-founder of MediaLoot. Jon is a designer, developer, typography lover and musician.
jump to the comment form ↓
July 16th, 2010
Awesome post for Icon inspiration!
July 17th, 2010
Ho very cool the example of icons in navigation space in te webs sites :)
July 17th, 2010
Very nice examples. Design Shack just had a similar post, but I was glad to see you featured a number of sites I hadn’t seen before. Very inspiring, I enjoy icons enough that i used them in my site, too.
July 17th, 2010
A lot of great examples here!!
July 17th, 2010
Making a good first impressions is the main thing. Putting beautiful icons in navigation does add value to the website too.
July 18th, 2010
Wow! Lovely Collection.
July 18th, 2010
Great for the inspirations, I plan to use the icon for my site
Thanks….
July 18th, 2010
Blog headers need more functionality. Other web designs may differ in terms of their use and therefore, what’s included in the website header and how it’s presented can vary greatly.
July 19th, 2010
Interesting collection and I’m sure a lot more can be added here. A nice topic to pick upon :-)
July 19th, 2010
Some examples are great, although this also depends on your target audience as well. If you’re looking from a usability point of view, keeping it simple would be the best bet. But let’s say, I’m a freelance designer who does work for a certain industry, then the whole scenario changes. But again, great examples.
July 22nd, 2010
Olympic games icons are just awesome!
July 22nd, 2010
The hardest part is to find the best matching icons with labels. Nice showcase btw.
July 26th, 2010
Some really good examples of icons in navigation design.
I’ve found that having icons with an image make navigating around the site much easier, and they normally make the site looks better.
However dependant on the project images will not always work, for example having these types on navigation on a corporate business website wouldn’t be necessary as their websites tend to be simple an clean cut.
August 6th, 2010
Great collection! Thanks for including us!
August 21st, 2010
Here’s one that absolutely shouldn’t be missed.
https://www.missionbicycle.com/
August 24th, 2010
Thanks for including me in your list. Much appreciated! :)
Who Linked To This Post?
Share your thoughts, leave a comment!