When I faced the challenge of drawing an app icon for the first time, I had a lot of questions—that I only found answers on some of them only after my first few completed projects. Now, as a designer at an app development agency, I want to share what took me time, experience, and energy to figure out for myself.
We’ll go into:
- Why every app needs an icon
- The importance of scalability
- How to keep design simple and interesting
- Maintaining consistency across devices
- Compliance with iOS and Android guidelines
Why every app needs an icon
An app icon is a unique image added for every mobile application, and the first users see when they find an app on the Apple App Store and Google Play.
At this early stage, when the user is still deciding whether to even check out the app, the icon is what will help generate interest and assure the user that the app is a useful, and trustworthy, investment.
A bad icon does twice as much—but the other way around. It confuses and casts doubt on the benefit of an app.
Once the user installs an app, however, the icon’s goal changes. Now it assists in the search for the app on the Home screen among other icons.
But what makes an app icon “good”?
3 rules of app icon design
Let’s get this out of the way: app icon ≠ logo.
If you want to learn how to design a good logo there are countlessarticlesonthetopic, and most are based at least partly on Paul Rand’s brand design principles. And that’s not surprising! An app icon is a piece of branding, and there is often intentional overlap between icons and logos. However, I can’t stress this enough: they are not the same.
A logo and an app icon have different goals, and while this doesn’t mean a logo can’t overlap with an icon, their separate goals need to be taken into account.
Now that that’s out of the way, here are four things you should be doing as part of your icon design process.
1. Scalability
There’s no flexibility in icon size—they come in tiny and tinier, and can’t be stretched or changed. That means that legibility is first priority for app icons. You’ll notice that icons don’t only appear on the home page, they also appear in sub-menus with an even more reduced size.
App icons in iOS and Android Settings
Users shouldn’t strain have to strain their eyes trying to understand the designer’s idea. Testing here on all kinds of devices is key (we use Appsparky for that); though the loss of details is inevitable, the idea has always to be clear.
Here is a good example of Russian fashion retailer lamoda simplifying their logo for the app
And that brings us to the second consideration of app icon design…
2. Recognizability
This is where apps and logos overlap.
At Messapps, we advise that for recognizability, simplicity is key—and that it doesn’t mean boring.
Look, aren’t these icons detailed?
Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s Journey
Simplicity here means concentrating on an idea and getting rid of any unnecessary or repetitive elements. Every pixel should help the user to understand, and be interested in, the big idea.
We, at Messapps, work continuously on designs that we create so that the clients could be truly amazed by the results. This work includes changing the concepts and ideas we implement in the designs — and that is what we’ve done with Mentissana app.
With Mentissana, we worked on some options until came to the final app icon
The key to recognizability is differentiation: the uniqueness of an app.
With close to two million applications in the App Store and 2.1 million in Google Play. That’s two million app icons—all of which are competing for attention. Big brands can use their logos to draw attention, but what do lesser-known applications do?
Show something new and unusual!
Todoist uses the standard for task managers “check mark”, but in an interesting composition.
To make sure your icon stands out, spend some time checking out apps in your niche. If most of the icons you see are colorful, consider using a monochrome palette. If there are a lot of images of one particular item, show something different.
Always search for your way to solve problems!
It’s difficult to come up with something new. Make mood boards, create mind maps, ask friends and coworkers for advice. You never know where you’ll find a great idea.
3. Consistency
An icon is part of an application, and the branding has to stay consistent between the two. An icon should describe an app and show its main features. This is especially important for games where an app can get a million downloads because of only one game mechanic.
Jazz Smash shows the main game feature in the app icon. In the game, you smash different items with a bat.
JazzSmash icon, explaining the features of the game from the very first sight
The Slack icon is a great example of consistency between icon and interface
Don’t include screenshots and interface elements in an icon—it can mislead the user. Instead, insinuate the functionality of the app and stick to the same style and colors as the app itself. And guidelines can help you to achieve this!
Compliance with icon design guidelines
Despite the fact that iOS and Android icons are starting to look the same, there are still a lot of differences that prevent us from using the same app icon on both operating systems: proportions, visual techniques, and special features. Users get used to their operating systems.
iOS guidelines are here.
Android guidelines are here.
iOS (on the left) and Android (on the right) icons of the same apps
It doesn’t mean you need to draw different app icons; in fact, significant differences will reduce app recognition.
Instead of a thousand words…
App icons accompany users from their first touch with an app through every interaction they’ll have after. The role of an icon is important and dynamic, requiring careful research and thoughtfulness.
There are also numerous courses and resources that we use & follow within our team and here we want to share some of these with you:
A good starter course for an icon designer is the Skillshare course Design App Icons by Michael Flarup. I recommend checking out the UX Planet post 10 case studies that show how an app icon affects the app’s conversion rate, discussing both app marketing and app icon design. When working on app icon concepts, we use the iOS Icon Gallery on a daily basis.
The most important advice I can give is, though, that you should never forget about the app itself! After all, it only takes a few taps to delete an app. No matter how cool your icon is, if an app isn’t useful, the user will delete it.
Want to learn more about design for mobile?
by Ivan Tuchkov
Ivan Tuchkov is a designer at Messapps. He builds products to improve people’s lives while generating value for businesses. In his spare time, he studies, creates tutorials, and writes about design.
