Great minds think alike, or so they say anyway. It’s obvious that there are great minds working at Facebook and Google, just look at how successful they are. Recently they’ve both made a noticeable change (well to graphic boffs like us) to their iconography. Gone are the days of #666666 and #222222 (they’re hex code colours to those not in the web design loop). Now, the unselected, or default states as they are better known haven’t strayed away from grayscale, and rightly so, they don’t need to. But the selected icons and hover states have stepped up and found sixth gear. We no longer have a slightly darker icon, instead, we have colour.

I know, I know, it’s unbelievable how exciting this is. Perhaps you think this hype is a facade? Well, you’d be right, but let’s not take anything away from the UX experts at two of the world’s biggest and ‘best’ technological companies. Anyway, back to the question in focus here, is it time for coloured icons? I won’t answer that just yet, there are a few things we need to weigh up and consider, which I’ll be sure to go over before giving you my answer.

What do coloured icons bring?

There is a short and simple answer to the question; they’re a lot more visually appealing and obvious, you don’t need hawk eyes to distinguish the difference between the selected and unselected tabs. There is also the not so short answer, so let’s delve into the theory surrounding icons, user journeys, experience and branding.

Where to start… as a designer I suppose the logical place will be with branding, so let’s get that out the way first. Coloured iconography can be a great asset for your branding. Essentially you’re creating a style that can be carried across all manner of formats, be that on your website, business card or leaflet. Of course, the same could be said for simple black outline icons, but they’re generic, everyone uses those. It’s the custom appearance of multi-coloured icons that add an extra hint of class, it’s a nice touch that brings everything together and further enforces your branding. Let’s say you have a business card with a white back where your details go. Now, this could be generic, you might even use one of those generic templates you see on sites like Vistaprint (don’t… don’t do this). In any case, your logo and typeface might be all that relates to your branding. Colouring your icon will help enforce your colour palette and strengthen your brand image. It’s also going to help you stand out in that pile of business cards every director and salesperson keeps.

While colouring your icon can definitely help your branding, customising them with a little TLC takes you to the next step. Perhaps you use a gradient, or shadows or outlines, either way, it’s the little touches that will get you noticed, make your brand recognisable from just it’s icons and help you to stand out. More importantly, you’ll get designers ‘oooh-ing’ and ‘aah-ing’.

Of course, your industry and your business might not be suitable for custom icons with a more illustrated approach, and in which case don’t change your branding and company image to make it. Facebook, it’s a social platform, it’s fun, used for laughs, news, connecting with friends and looking at Area 51* memes. (*Other memes are available). Google, on the other hand, are Google and can literally do whatever they want, but they’ve thought about it. Google’s red, yellow, green and blue colour palette features in all of their search type icons. We know these colours from their logo and also Google’s favicon/app icon. The bold ‘G’ divided up into the 4 colours. Sit a coloured icon next to the ‘G’ and you can make the connection straight away (below). Now looking at the icon on its own. It’s so obviously part of Google’s branding.

So hopefully that gives you a decent idea on what coloured icons bring to your branding and company image. Let’s now look at the impact they have on user experience, focusing on usability and the user journey.

I’ll start with usability and am actually going to focus on how custom illustrated iconography isn’t always the best choice. Take the example above. Yeh, ok, it looks alright on its own and would be perfect as part of an infographic. But using it on a menu and as a form of navigation? Alarm bells ringing. At the size you’d expect such icons to appear, it simply won’t do the job. The illustration (for that’s what it is) is too detailed for such use. Just have a look below and compare the illustrated icon with a more generic coloured one.

So what’s more usable? That’s rhetorical. Not only is the standard icon easier to interpret, but it will also scale better, which is a must as all websites should be responsive.

Now, let’s look at the role icons play in user journeys. Facebook is where I suggest we turn our attention to. The coloured icon indicates the tab you are on and the other icons are simply greyed out. I don’t think it could be any clearer which tab you’re on. Of course, you could add a title below the icons, but that’s not needed. Why isn’t it needed? The icons are so informative, a title would be redundant. Facebook users can make the connection between the icons and the content they’re seeing. While first-time users might be unsure, a quick look at each tab allows an easy connection between the two. To summarise, the colour usage in Facebook’s icon navigation defines what page you’re on and the detail (and lack of) in the icons make them self-explanatory, they represent what they need to very well.

Another trend for 2019?

We designers love a good design trend. Are coloured icons a trend in 2019? Perhaps. PayPal has also jumped on the bandwagon, and while their navigation methods don’t use solid filled icons, they’ve introduced icons with a gradient fill on their homepage.

PayPal has now got a coloured icon style, and if they opted to go with any icons in their navigation, this style would work and wouldn’t be a completely new entity. Maybe that’s the plan; to have icons as part of the navigation. By gradually introducing this style, PayPal can improve the user experience and overall design without a sudden jolt to the user, which would be a great achievement.

Google, Facebook, PayPal, three big-name players. Trend-setters. Expect to see websites and apps using the same icon navigation styling hit the internet and app stores soon. To go all the way back to the original question; yes, I’d say it very much is the time for coloured icons.