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!
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This set of blue website menu navigation icons offers 15 icons for security, shopping, home, networks, support, search, and more.
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.
This set of 12 website menu navigation vector icons has support, chat, search, home, email, favourite, print, download, and network icons.
This free set of 20 website menu navigation icons features a transparent glass design.
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.
This free set of 128 free website menu navigation icons offers icons for payments, photography, home, social media, chat, and more.
This set of 30 blue, grey, and white website menu navigation icons comes with calendar, support, phone, search, and chat icons.
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.
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.
This free set of 30 website menu navigation vector icons includes phone, pencil, briefcase, flag, shopping cart, star, and pie chart icons.
This free set of orange, white, and black website menu navigation vector icons offers a glossy and scalable design.
This set of 15 simple website menu navigation vector icons includes padlocks, search, tools, clock, calendar, and home 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!
If you need to build an ecommerce website to sell computers, tablets, TVs, phones, and cameras, then you have to check out these Prestashop themes. All of these Prestashop...
Superb fast support and exceptional service, thank you! In particular Tim and Andy go the extra mile, thanks guys. Patient polite and professional :-) I had decided to try out another hosting company, which lasted about 24 hours before I realised that I was not going to get the same level of service from them that Evohosting provides. Without a glitch I was back with Evohosting... and putting it all down to experience! Highly recommended.