Icons in Design

4th October 2018 / 4 minute read

simplicity is the key

Icons in Design – Why They’re So Damn Useful!

Have you seen an icon today? I bet you have – they’re everywhere!

We see them every single day, and sometimes, we might not even realise we’ve seen one. That’s the beauty of them – we might not register that it’s an icon we’re looking at, but we’re still able to take valuable information from it.

Why you should take advantage of icons online.

Icons are very handy when it comes to designing a website, especially when you’re creating a website that is easy for your users to browse.

Icons can appear anywhere on your website. But if you’re looking to find an icon on a website right now, you can expect to find some under a ‘key features’ or ‘key services’ section of a website. They act as the visual representation of a specific ‘feature’ or ‘service’, and will more than likely be accompanied by a slither of content too.

The key benefit of an icon is that it will help to symbolise and simplify what the text is saying.

For example, if your website has a variety of services listed and one of them is ‘bespoke design’, you may choose to have a paint palette image or a ruler and pencil combo graphic to accompany this service. If the icon is designed correctly, your users should be able to associate what the icon means even before with that particular service.

The best icons are simple yet effective, and require no explanation.

Create a uniform, on-brand icon collection.

Continuing with our bespoke design icon example, you can then follow up with various other icons for each ‘service’ you have to offer.

icon examples

We suggest that each icon is designed in the same style, simply because it will help your users to browse the site, understand the icons and get to know your brand. When you have a collection of on-brand icons repeated across a site, it will help initiate your brand’s feeling and lead to it becoming recognisable to your users and customers.

Icon design inspiration – consider your brand!

Some businesses will want their icons to link with the style of their brand and logo; whether that be the brand’s colour scheme or the pixel line weight. You can choose whether to keep the icon simple or go with an intricate design – you must ensure that the icons you create are not just on-brand but easy to understand.

Take advantage of icons to make content user-friendly and the page enjoyable to browse.

Icons, much like imagery on a website, are used to break up text on a page. Keeping a page engaging and appealing is what will keep a user attentive. The last thing you want is for a user to forget what they’ve read on your website, but images and icons will help to ensure a user does recall and understand the information.

They don’t just appear on websites… smartphones too!

It’s not just on websites where you can expect to see icons – pull out your phone, there’s tonnes of them there as your application shortcuts. Considering the fact that application shortcuts on a mobile are just a small image, it’s impressive to think that users know what an app is just from its icon.

Take a look at your phone now and pick one of the icons on your screen. If you were looking for that specific app again, would you be able to pick it out from a cluster of other icons? Is it clear and readable? Are the colours contrasting correctly? Could you identify the app just through the icon?

app store icon 1024x284

Icons for mobile applications are typically a simplified version of their logo. If the logo is already simple, then happy days! Mobile icons, in particular, are restricted on space and therefore must be the simplest version, as clarity will become the most important aspect.

There are many effective icons for apps and some of the biggest companies are still working on their icons.

Take a look below at the progress of the Apple App store logo.

It’s interesting to see how much they simplified the design whilst keeping the same shape. It’s still clearly an easel, but it’s no longer crowded with the unnecessary paint brush, pen and ruler. It would be risky to completely change this logo as users already associate the shape and colour with the App store, but keeping the shape the same means users can still identify the altered icon.

Honey, I’ve shrunk the… icons!

The smallest icons you will see are favicons. These are seen on the browser tab and are used to help distinguish what website you’re on. Does anybody else look at the icon on the browser tab instead of the text? I know I do most of the time!

icon comparisons from websites to apps

Favicons must be clear and simple – I know I’ve said this for all icons, but I really, really mean it for favicons – they’re the smallest icons you can get. Think high contrast and little to no text. A small symbol will suffice.

Icons are powerful – well thought-out and designed icons can make all the difference to conveying your message and keeping a user intrigued. Of course, not every web page or product requires an icon (although most probably do in some form), but it certainly helps; especially in terms of breaking up content or defining your brand with an emblem.

Let’s not ignore the fact that icons are meaningful and fun – they carry a message and help to present your brand’s identity!

Need some help crafting your icons?

If you have any questions about potential icon design work, we’d love to hear from you. Drop us an email to hello@equalscreative.com to schedule a call with our design team.

Alternatively, take advantage of our very own hand-crafted icons set – Equals Icons. You can see them over on our Equals Icons site!

What's up next?