SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

20 Great Examples Of Icons In Navigation Design

July 16, 2010 by Jon 22 Comments

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

Author: Jon

http://www.24alta.ru

Filed Under: Design, Inspirational, Showcase

Comments

  1. Joel Reyes says

    July 16, 2010 at 11:11 pm

    Awesome post for Icon inspiration!

  2. Tecnologia says

    July 17, 2010 at 1:40 am

    Ho very cool the example of icons in navigation space in te webs sites :)

  3. Tyler Dawson says

    July 17, 2010 at 9:11 am

    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.

  4. Greg Dougherty says

    July 17, 2010 at 12:40 pm

    A lot of great examples here!!

  5. Lake says

    July 17, 2010 at 1:40 pm

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

  6. Riebelle Joshua says

    July 18, 2010 at 4:27 am

    Wow! Lovely Collection.

  7. Eko says

    July 18, 2010 at 8:16 am

    Great for the inspirations, I plan to use the icon for my site
    Thanks….

  8. Christian Louboutin says

    July 18, 2010 at 9:23 pm

    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.

  9. Deepika says

    July 19, 2010 at 5:01 am

    Interesting collection and I’m sure a lot more can be added here. A nice topic to pick upon :-)

  10. Kerem says

    July 19, 2010 at 12:07 pm

    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.

  11. Annif says

    July 22, 2010 at 3:49 am

    Olympic games icons are just awesome!

  12. Joffrey says

    July 22, 2010 at 11:13 am

    The hardest part is to find the best matching icons with labels. Nice showcase btw.

  13. Vikesh Patel says

    July 26, 2010 at 6:42 am

    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.

  14. Juan says

    August 6, 2010 at 1:11 pm

    Great collection! Thanks for including us!

  15. clintm says

    August 21, 2010 at 1:05 am

    Here’s one that absolutely shouldn’t be missed.
    https://www.missionbicycle.com/

  16. Toffeenut Design says

    August 24, 2010 at 8:11 am

    Thanks for including me in your list. Much appreciated! :)

  17. Lex says

    September 28, 2010 at 4:16 pm

    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.

  18. Sourav says

    January 18, 2011 at 5:29 am

    Definitely Toffeenut !

Leave a Reply Cancel reply

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

Please prove you're human *

SpyreStudios © 2018