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?
- How UX research will up your mobile app design game
- The most important 20 seconds of your mobile app onboarding
- Mobile app monetization done right
Insights, advice, suggestions, feedback and comments from experts
Introduction
As a designer at an app development agency, I have gained extensive experience and knowledge in app icon design. I have completed numerous projects and have learned valuable lessons along the way. I understand the challenges and considerations that come with designing an app icon, and I am here to share my expertise with you.
Why every app needs an icon
An app icon is a crucial element of any mobile application. It serves multiple purposes and plays a significant role in attracting users. When users come across an app on the Apple App Store or Google Play, the icon is the first thing they see. It helps generate interest and assures users that the app is useful and trustworthy.
Once the user installs the app, the icon's goal changes. It assists in locating the app on the home screen among other icons. A well-designed icon can enhance the user experience and make the app more memorable.
3 rules of app icon design
When designing an app icon, there are three important rules to keep in mind:
1. Scalability: App icons come in various sizes, including tiny ones for sub-menus. Therefore, legibility is crucial. The icon should be clear and easily understandable, even at reduced sizes. Testing the icon on different devices is essential to ensure its clarity and effectiveness.
2. Recognizability: An app icon should be simple yet distinctive. Simplicity doesn't mean boring; it means focusing on a clear idea and eliminating unnecessary elements. Each pixel should contribute to the user's understanding and interest in the app.
3. Consistency: An app icon should be consistent with the overall branding of the application. It should accurately represent the app's main features and functionality. Avoid including screenshots or interface elements in the icon, as it can be misleading to users. Stick to the same style and colors as the app itself to maintain consistency.
Compliance with iOS and Android guidelines
While iOS and Android icons may have some similarities, there are still important differences that need to be considered. Each operating system has its own guidelines regarding icon design, including proportions, visual techniques, and special features. It's important to adhere to these guidelines to ensure the best user experience on each platform.
iOS guidelines can be found . Android guidelines can be found .
Remember, while it's important to follow the guidelines, it's also crucial to make your app icon stand out among the millions of other icons in the app stores. Find a unique and creative way to represent your app while still maintaining consistency and adhering to the guidelines.
Conclusion
Designing an app icon requires careful consideration and attention to detail. It is a crucial element that can greatly impact the success of an app. By following the rules of scalability, recognizability, and consistency, you can create an effective and visually appealing app icon. Remember to also comply with the guidelines provided by iOS and Android to ensure a seamless user experience.
