4 Websites to Look to for Icon Inspiration

Posted / 31 July, 2015

Author / Enginess

Here are four websites that nail iconography and inspire you to nail your own.

Icons can drive your user experience forward and communicate complex ideas quickly and effectively, or it can leave your users scratching their heads puzzling over meaningless squiggly lines. Here are four websites that nail iconography and inspire you to nail your own.

1. Orangina

Orangina has some of the best iconography that we’ve found. Ever. It’s fun and playful, perfectly representing their brand, but without losing any focus on functionality.

What we especially like is how all of their icons move just a little bit. It makes them far more interactive, which is both engaging but also a great way to provide essential user feedback.

In particular, we love their carousel icons. Instead of two or three simple dots to let users know that they’re hovering over a carousel, Orangina uses an icon of their distinctive bottles.

orangina carousel icons

But that’s not all. To indicate when the carousel is going to change, the bottles fill up. When one is full, the image changes.

That one little icon instantly make the carousel far more functional and  much more fun to use, without sacrificing the power of the full image power at all.

2. Avenir Clinic


Not all iconography is for typical creative agency services.

Avenir Clinic is a dental clinic in Laval, Quebec. This is hardly the ultimate source of incredible web design that you’d expect, but in fact they’ve done a fantastic job.

Designed with Phoenix, The Creative Studio they’ve created a set of intuitive animated icons for each and every dental service they provide. This includes root canal therapy, gum treatment, restorations, and treatments related to TMJ dysfunctions. TMJ dysfunctions! An icon. For TMJ dysfunctions.

lavenir icons

They’re creative, they’re intuitive, and they’re even just a little it fun. We strongly recommend you check them out.

3. Don Q Rum

don q rum

Don Q Rum tells the story of their sustainability efforts with a heavy reliance on iconography.  Their challenge is that the process of how you make rum and where they’ve implemented sustainability measures is complicated. So to do it, they’ve used icons to really drive the point home.

don q sustainability

What we really like about Don Q Rum is that they use icons to support their copy rather than replace or simply reiterate whatever they’re written. While icons are often asked to communicate on their own, it’s nice to see them being deployed effectively in a slightly different way.

For example, one step of the steps of turning waste water into something useful is microfiltration. Here’s the copy and icon they use to describe it:


From the copy alone most people will understand what’s going on. But the icon provides a small visual reference point for readers to really grasp what the microfiltration process looks like. They work nicely together so it’s easy and clear to understand the process.

4. Nine Hours Hotel

9 hours hotel

Good iconography doesn’t have to be on a screen. The Nine Hours Hotel is a capsule hotel in Kyoto, Japan, and is bringing a much-needed simplistic design to the Japanese concept.

The hotel uses iconography for everything, to reduce any potential language barriers between the service and its guests. They use icons to tell guests where to check in, where to take their shoes off, where to find showers, and even what elevator to use.

9 hours hotel iconography

In conjunction with a brutally simple black and white colour scheme, the icons help guests move and operate within the hotel entirely independently for their entire 9 hour stay.

You can check out a report on the hotel below:

Wrap up

Iconography is an essential part of a web designers skillset. Whether you’re creating them from scratch or using an icon set, how you choose to deploy them can make or break your site. Hopefully, these clever, tasteful examples of both icon design and deployment will give you some ideas on how you can use a picture to tell a thousand words.

Plan your project right - a step-by-step guide to ensure a successful digital project launch. Read now.


See all ≫ ≪ Hide all

Subscribe to Enginess Digital Insights

Share the insights /