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 :)
Awesome post for Icon inspiration!
Ho very cool the example of icons in navigation space in te webs sites :)
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.
A lot of great examples here!!
Making a good first impressions is the main thing. Putting beautiful icons in navigation does add value to the website too.
Wow! Lovely Collection.
Great for the inspirations, I plan to use the icon for my site
Thanks….
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.
Interesting collection and I’m sure a lot more can be added here. A nice topic to pick upon :-)
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.
Olympic games icons are just awesome!
The hardest part is to find the best matching icons with labels. Nice showcase btw.
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.
Great collection! Thanks for including us!
Here’s one that absolutely shouldn’t be missed.
https://www.missionbicycle.com/
Thanks for including me in your list. Much appreciated! :)
Very nice collection! Although many icons are very similar – for obvious reasons, yet I believe one can do a lot more with them, especially when you have an artist or designer portfolio with a very strong theme, or a site with a rather narrow target audience. E.g. if you have a science fiction theme, you may want to use a more futuristic building as homepage icon, while a site about first person shooter games could use a flag instead, as any gamer of that genre would get the hint.
Definitely Toffeenut !