An Icon is a big part of any website these days. And no wonder, they are a great way of getting visitors to navigate around a site, while also providing at-a-glance information and without using a lot of screen space.

But how do you know whether the ones on your site are old and make your site look old-fashioned, or whether they’re bang up-to-date? Well, all you have to do is read this article and you’ll certainly know by the end of it.

First though, you might be wondering where the icon originated from in the first place. And even if you’re not, we’ll give you a potted history here. So, the word ‘icon’ is derived from a Greek word which sounds the same but is spelled ‘eikon.’

Greek’s came up with the word first

Basically, an icon is a tiny graphic symbol on your computer screen. The first ever computer icons were created back in 1981 by the computer scientist David Canfield and designer Normal Lloyd Cox. They weren’t very exciting to be honest. But then, neither was what they were representing – office stuff such as folders, documents, stationery etc. Nowadays you can get an icon to represent just about anything, and they’re anything but boring, as you can see here:

Popular icons you’ll find today

From icons which allow you to hover them, to others which give a three-dimensional effect on a two-dimensional surface – there’s a raft of them to choose from.

Hover over icons

These are incredibly popular icons today. Animation effects allow your arrow to float above the icon, making the website feel much more interactive than if it was static. The simpler the icon the better as far as this particular design point is concerned.

Glyph Icons

This time it’s the turn of the French to get a mention. The word ‘glyph’ is from the French ‘glyphe’, which means a hieroglyphic character or symbol. Glyphs represent objects using monochromatic shapes with subtle empty spaces to distinguish them.

Minimalistic icons

That Marie Kondo with her passion for decluttering has a lot to answer for… she’s now having an effect on the world of icons. The minimalistic icon is simple ie no elaborate shapes or colours but still significant. The idea behind this is that it doesn’t distract visitors from their true purpose ie to navigate through the website.

Hand scribbled Icons

Possibly our favourite icon design right now, hand drawn icons are like doodles in the sense that they’re drawn with a bit of a shaky hand ie they’re not perfect but in fact, look very realistic (or, to fit with the current buzzword, are very ‘authentic). The big plus of these icons is that they feel as if a real person is behind them, rather than a computer.

Pastel shaded icons

A bit like Pantone’s colour bible where there’s a favourite shade (or two) every year, web design has colour trends too. And right now, pastels – rather than bright bold or fluorescent colours – are in. Perhaps it’s because they have a calming and soothing feel about them.

Line icons

Icons drawn from simple lines, without colour and heavy emphasis, are another very popular trend these days. Despite their lightness of touch, they maintain a powerful feel. The beauty of these icons is that they work with any colour – or even style – of background.

Isometric icons

Getting back to Greek vocabulary, the word ‘isometric’ means ‘equal measure.’ This is the icon design we spoke about in the introduction to this session of our article ie the three-dimensional object in two dimensions. With this icon the top and sides of the shape are visible. It gives perspective and depth to flat images.

Circular icons

Circular icons are appealing because of their shape ie there is no sharp lines but cosy curves, which also give a sense of unity and security. Circular icons have been around for a while and they’re definitely here to stay.

Emoji icons

They’ve been around social media circles for donkey’s years and now emojis are making their way into web design too. Everyone knows what an emoji icon represents because they are so easy to read. They do away with cumbersome words – which is a big win for a designer.

Get in touch

Feel your website is looking a little tired or dated and much in need of an injection of freshness? Then do get in touch with the team here at Stylistic Design. We’d be happy to discuss your needs and desires. Contact us