20 Great Examples Of Icons In Navigation Design

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 ↓

tappgala

Komodo Media ↓

komodomedia

Toffeenut Design ↓

toffeenutdesign

Geng Gao ↓

genggao

Narwhal. Co ↓

narwhalcompany

Fragment ↓

fragmentlabs

Carbonmade ↓

carbonmade

Carsonified ↓

carsonified

Dan Wiersema ↓

danwiersema

GreenOlivz ↓

greenolivz

Ecoki ↓

ecoki

Freelance Folder ↓

freelancefolder

Vancouver 2010 ↓

vancouver2010

WP Bundle ↓

wpbundle

Dustin Allen Pace ↓

dustinallenpace

Media Loot ↓

medialoot

Ministry Spotlight ↓

ministryspotlight

Scarpo ↓

scarpo

Jonnotie ↓

jonnotie

Fresh01 ↓

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 :)

Comments

  1. says

    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.

  2. says

    Making a good first impressions is the main thing. Putting beautiful icons in navigation does add value to the website too.

  3. says

    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.

  4. says

    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.

  5. says

    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.

  6. says

    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.

Trackbacks

  1. Excellent Examples Of Icons In Navigation Menu Design…

    When done right, adding visual cues to your menu can prove very useful in making things a tad more appealing to visitors. Let’s have a look at some sites that make great use of icons nav design….

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *