App Icon Design: How to Do it Right

Choosing the right icon for your client’s app in Apple’s App Store and the Google Play Store may seem like a very tiny job among the many others involved in developing and launching an app, but it’s actually extremely important. Not only is an app’s icon one of the key elements of a user’s first impression, it’s also how they’ll (hopefully) interact with the app in the future on a (hopefully) regular basis!

If you’re in any doubt as to the important of app icon design, have a think about some of the apps you regularly use personally; The chances are there are one or two you just never seem to be able to find on the screen of your smartphone or tablet, despite flicking back and forth and feeling sure you knew where it was before? If so, it’s more than likely that the app in question has a poorly designed and unmemorable icon. Not to mention the fact that there’s not a lot of point into pouring resources into App Store Optimization if you’ve got an app icon design that’s going to drive away users in the first place.

Still unconvinced that iconography’s important? If so, also consider the fact that anecdotal evidence suggests that icon issues are one of the most common reasons for Apple App Store rejections. Icons that are unclear or look too much like something else won’t get into the store in the first place. This part of app development is not one to take shortcuts on.

With all of that in mind, here are five things to consider when designing icons for your client’s apps:

Limit your colors

Look at the icons for some of the most popular apps in use today. With some notable exceptions (Slack and Just Eat spring to mind) the vast majority use only two or occasionally three colors. (It is, however, fair to say that game apps are something of an exception to this rule).

That said, Netflix, Fitbit and Groupon all use just two colors for their icons, as do most of Apple’s native apps. The reason for this is that this simple design works best for “everyday apps.” While it is possible to make an icon with more colors work, it’s a very difficult task. Were it easy or wise, the market-leaders would be doing it.

Prioritize simplicity and clarity

Following on from the above, it’s fair to say less is more when it comes to designing app icons. If you want a few case studies for this, take a look at the icons for Facebook, Twitter and Spotify. All are bold and simple, instantly recognizable and (returning briefly to the previous point) only use two colors! Icons are about brand recognition and familiarity. They are not the place to make a try to illustrate features or attempt to say too much.

On this subject, they’re also rarely a place you’ll want to put text. Although some market leaders do this it is an exception to the rule, and usually when a brand’s logo is already extremely well-established (BBC News is a good example here). Broadly speaking, text in icons looks squashed and messy – and is best avoided.

Look at the icon in all sizes

Your client’s app icons will show up in all kinds of places, and in all kinds of sizes. App stores can use different sizes depending on whether you’re on a desktop, tablet or smartphone. Then once the app is downloaded sizes can differ too. As such, it’s no use having an icon that’s clear and eye-catching when it’s large but jumbled when it’s small. Nor is it any use having the reverse scenario when the small icon looks just right but the larger version looks pixelated and amateurish. Truly good icon design will work in all the relevant sizes.

Consider different devices and configurations

The different devices your app icon will appear on are highly relevant too. Does the icon look good on a budget Android device as well as the latest “Retina” style display? How about in “low light” modes, against a plain black or white background, or against the plethora of colors that may be part of a photo a user has chosen to use as their device’s wallpaper? Suddenly designing the perfect icon doesn’t seem so simple any more once you take all these things into account. This is all the more reason to give this task the dedicated attention it deserves.

Don’t copy!

Now it’s clear just how much is involved in creating the perfect icon, the temptation may be to have a thorough look at what’s already out there with a view to “imitating” something that works. Don’t succumb to this temptation. For starters, if you come too close to plagiarizing someone else’s design you run the risk of App Store rejection (or worse). You also risk giving potential customers a poor perception of your business ethics. Worst of all, however, it means you’ve not invested the time to find the perfect distinctive iconography for your app, which will hopefully be something thousands of people eventually tap on daily.

You will find a useful Q and A on App Store iconography here on the Apple Developer website.