Call us 7am to midnight (GMT)
02037453658

Enhance Your Website Menu with Navigation Icons!

  (by )

I like looking at beautiful websites, but I love browsing sites that are easy to use.  Design is important, but usability is crucial.  One of the keys to making a website easy to use is intuitive navigation–when someone visits a site, they should be able to find the information or product they’re looking for quickly and easily.  A website’s menu system should be logical, and the emphasis should be on function, not form.  However, this doesn’t mean you can’t make your site’s menu visually appealing–just don’t sacrifice usability for appearance.

By incorporating navigation icons into your menu design, you can enhance both the form and function of your menu system.  Not only can the right navigation icons enhance the overall appearance of your website, buy they can also improve the speed at which your site’s visitors find the content they’re looking for.  A lot of websites have incorporated navigation icons into their menu designs, so I’ve rounded up a few examples to share with you.  I’ve also found some free and premium navigation icons, so you can get this same look on your site!

Youzee

youzee website menu with navigation icons example

I like the look of these navigation icons, and they work well for Youzee’s site, mainly because it doesn’t contain much content.  However, for larger websites with more content, I recommend including both text and icons.  By including both text and icons, your site’s visitors should be able to find what they’re looking for without having to click on every single icon.

Method & Craft

method and craft website menu with navigation icons example

Method & Craft has done an excellent job of incorporating navigation icons into their vertical menu system, proving you don’t need a horizontal menu system to get in on this trend.  The icons make sense, and they’re not too large.  Plus, they add a bit of polish and interest to the site.

SVN2FTP

svn2ftp website menu with navigation icons example

I think the hand drawn navigation icons featured on SVN2FTP’s site are perfect!  Without the text for each menu item, these icons probably wouldn’t work.  However, these small navigation icons, combined with text, really enhance the site’s handmade design.

Versions

versions website menu with navigation icons example

I really like the simplicity of the navigation icons used on Versions’ website!  They add a bit of polish to the site, without detracting from the overall design or usability, which makes these navigation icons the perfect addition to Versions’ horizontal menu.

HDLive

hdlive website menu with navigation icons example

The navigation icons featured on HDLive’s website are fantastic!  They’re a bit on the large side, but they match the scale of the other elements on the site, including the logo, header, and Twitter icon.  Plus, the icons change colour when you hover over them, which helps add a bit of interest to a rather simple (yet elegant) website.

Tokyo Illustrators Society

tokyo illustrators society website menu with navigation icons example

The navigation icons used on the website for the Tokyo Illustrators Society are very creative–instead of relying on the traditional home icon and text, they’ve used used an icon that looks like a mountain peak, along with the text ‘TOP’.  Feel free to be creative with your navigation icons (especially if you include text), but make sure you don’t use icons that might confuse your users, such as using a home icon for your ‘About’ section or a chat bubble for the link to your homepage.

Momento

momento website menu with navigation icons example

The navigation icons on Momento’s site are simple and small, yet they still manage to make the horizontal menu look sleek and sophisticated.  If you’re not sure how to incorporate navigation icons into your site’s design, then I recommend taking a page from Momento’s book–start by using small and classic icons combined with text, and then tweak the icons until you find a scale and look that you’re happy with.

Amazee Labs

amazee labs website menu with navigation icons example

The navigation icons featured on Amazee Labs’ website are great–when they’re inactive, these relatively large icons have a white and gray colour scheme that prevents them from detracting from the overall look of the site.  However, when a menu item is active, the colour scheme changes to red and white, which is great not only for the design, but for the site’s usability as well.

Carbonmade

carbonmade website menu with navigation icons example

The navigation icons used on Carbonmade’s website are bold and unusual, so they really complement the site’s quirky and colourful design.  Without text for each menu item, these icons would probably confuse some users.  However, combining these unusual icons with text makes this horizontal menu unique yet usable.

Navigation Icon Sets

As promised, here are 16 free and premium icon sets you can use as navigation icons on your site’s menu.  I’ve included a range of sizes, styles, and colours, so hopefully you’ll be able to find a set of navigation icons for your website.

Web icons set

web icons set navigation icons

This free set of blue, grey, and green website menu navigation vector icons features 36 icons for home, security, music, email, shopping, tools, security, and more.

Website & Internet Icons

website internet navigation icons

This free set of 9 vector website menu navigation icons includes a rocket, a paint bucket, a house, speech bubbles, a shopping basket, and more.

Website and Internet Icons | Blue

blue website internet navigation icons

This set of blue website menu navigation icons offers 15 icons for security, shopping, home, networks, support, search, and more.

2experts Icons Set

2experts navigation icons

This free set of 30 website menu navigation icons in black, orange, and white comes with icons for shopping, social media, contact, search, support, and more.

Internet & Website Icons | Premium Matte Series

premium matte internet website navigation icons

This set of 12 website menu navigation vector icons has support, chat, search, home, email, favourite, print, download, and network icons.

Transparent Glass Icons

transparent glass navigation icons

This free set of 20 website menu navigation icons features a transparent glass design.

PixelMixer Basic Set

pixelmixer basic navigation icons

This free set of 42 website menu navigation icons includes a calendar, address book, wallet, briefcase, charts, envelopes, arrows, and more in three different sizes.

Function Icon Set

function navigation icon set

This free set of 128 free website menu navigation icons offers icons for payments, photography, home, social media, chat, and more.

Website & internet icons

website internet navigation icons

This set of 30 blue, grey, and white website menu navigation icons comes with calendar, support, phone, search, and chat icons.

Token Icon Set

token navigation icon set

This free set of 128 minimal website menu navigation icons has light and dark variations and icons for travel, photography, security, games, music, video, and more.

Website and Internet Icons | Senso series

senso series website internet navigation icons

This set of 15 website menu navigation vector icons includes pink, white, black, and blue versions, and it features a glossy design and icons for security, shopping, email, information, and support.

30 Free Vector Icons

30 free vector navigation icons

This free set of 30 website menu navigation vector icons includes phone, pencil, briefcase, flag, shopping cart, star, and pie chart icons.

Web icons and RSS symbols

web navigation icons rss symbols

This free set of orange, white, and black website menu navigation vector icons offers a glossy and scalable design.

Website icons

website navigation icons

This set of 15 simple website menu navigation vector icons includes padlocks, search, tools, clock, calendar, and home icons.

Pink Badge

pink badge navigation icons

This free set of 20 pink website menu navigation icons comes with icons for ecommerce, email, home, support, and tools.

Special thanks to Rob from Pixel King Web Design for suggesting a post on navigation icons!

Are you looking for UK web hosting?  Then check out our UK web hosting plans!

11 Comments

  1. On August 27, 2011 at 3:52 pm

    Icebreaker Business Development said:

    Thanks for the response Cat – I’ve only just caught that now!

    I’ll give it a check to see what I can do. Thanks again! I’ll let you know how I get on

  2. On August 13, 2011 at 12:03 am

    Icebreaker Business Development said:

    I think the Icons are pretty cool and won’t hurt a website. The only problem is that I am running WordPress and I can’t seem to be able to change my navigation menu from text links to any sort of designed images. Unfortunately I’m no use with html or css so don’t have the ability to change it myself. Does anyone know of a plugin that does this (I’ve looked and can’t find one)?

    • On August 15, 2011 at 10:38 am

      Cat M. said:

      You might want to check out the AllWebMenus plugin–you can download it here: http://wordpress.org/extend/plugins/allwebmenus-wordpress-menu-plugin/

      It says floating Images can be added to any of your menu items, so this might do what you’re after. I’ve never used it personally, so I can’t say how well it works or how much HTML and CSS you need to know to use it. However, it has a pretty good rating. Still, I would recommend making a backup of your site before installing it, just in case it breaks your site.

      If you give it a try, let me know how you get on with it.

      All the best,
      Cat

  3. On July 18, 2011 at 11:31 am

    Pallet Wrap said:

    These icons look great and will really enhance my text links. However James’ point is crucial. Good SEO requires text.

  4. On July 16, 2011 at 4:58 pm

    Cute Quotes said:

    Awesome.Love them.Too bad I cannot use them since I run a blog 🙁

  5. On July 15, 2011 at 9:50 am

    vendre son or said:

    Thank you for these examples, I find some of them very inspiring. I like especially the youzee ones and also svn2ftp.

  6. On July 11, 2011 at 11:33 am

    Mumbai Hotels said:

    I agree with you on the point that usability should not be overlooked or sacrificed in the altar of appearance. Visual appearance is good, but it should not divert the reader from the actual content. Navigation icons which are simple and trendy can really add to the aesthetic value of the website no doubt about it!

  7. On July 10, 2011 at 6:46 pm

    pubs in bolton said:

    Another great article, I think navigation icons look better on a website but i would always use some sort of text to go with them for ease of use to the web surfer

  8. On July 8, 2011 at 9:44 am

    James said:

    I agree, icons for nav etc. can make a great user experience, but don’t forget the SEO importance of text navigation too… it helps give your page relevance on the inter-linking etc.

  9. On July 4, 2011 at 12:36 pm

    Rob said:

    Thanks for these, most useful. Interesting questions at the end of the article as well, in all honesty I think that using icons in menus can hurt on an SEO level however, using the ALT= and TITLE= variables inside each image surely should allow search bots to navigate websites properly. I mean, come on, this is the 21st century after all 😀

  10. On July 4, 2011 at 12:18 pm

    Andrei said:

    excellent…love them…many thanks