Share on Facebook0Share on Google+0Share on Reddit0Share on LinkedIn0Tweet about this on Twitter

How to Design The Perfect Icon For Your Mobile App

Excellence is in the details.

It may seem like a mobile app icon is a no biggie – just some colorful square and nothing else.

Yet, overlooking this small element may result in a massive mess – your product may get rejected by App Store; the clicks will be low and your user base will grow painfully slow.

app-store-icons

Why Mobile App Icon Design Is So Important

You often don’t have a chance to make a second impression.

App Store and Google Marketplace are busy places where you are forced to compete with hundreds of other products in the same category.

A mobile app icon is an invitation.

It entices users to try your product and helps them build the initial assumptions about the experience – what does this app do, how delightful will it be and how well will it serve my purpose.

If the icon looks well crafted, it’s a solid promise – the rest of the app will likely offer equally sleek experience.

Best custom icon designs usually have two important elements – beauty and instant recognizability.

So how to design a mobile app icon that conveys your entire product concept in just 120px by 120px?

I’m going to show you the exact tips to design an app icon Alty’s design artists have been using.

But first…

What Apple Deems as Great App Icon Design?

Apple is notorious when it comes to app design. They don’t just want a sleek and easy to use product, but hell of an attractive one. Each year they give out a special award to the best designed apps. Here’s who got the all the praise this year:

apple-design-awards-apple-developer

What do these app icon designs have in common?

  • They successfully use the principle of closure – our brains tend to see a complete shape even when the lines are not closed (Frame.io, Auxy, Chameleon), which adds a delightful depth to the image.
  • The design is minimalistic and “white space” is used organically.
  • The apps convey clarity and simplicity.

In fact, the company has rather clear guidelines for designing iOS app icons:

  • Embrace simplicity
  • Be recognizable
  • Use a simple background and avoid transparency
  • Don’t be a copycat.
  • Offer a single focus point
  • Try not to use words
  • Don’t include photos, screenshots or interface design elements.

While most of the guidelines seem rather obvious, certain ones worth a deeper dig. For instance, how to design an app icon that is recognizable? What does that even mean?

shutterstock_359977430

Recognizability in App Icon Design

You feel delighted when you suddenly spot a familiar face in the crowd.

The same is true with app icons. Your eye feels instantly drawn to a familiar element.

When it comes to blending in recognizability, you have two options:

  • Use your brand colors and logo within the icon (the route for established brands)
  • For a startup, it’s better to use the familiar elements to convey a certain idea (e.g. you know that a bin icon is for trashing files, right?)

In general, your icon design needs to create a sense of connection on both functional and emotional level.

Here’s how you can achieve this:

  • Keep it simple and avoid overcomplicated design elements. Remove unnecessary details and clutter.
  • Take a closer look at your favorite icon designs and try to deconstruct them to the key elements. Is it the color? Is it the symbol? What makes it instantly stand out?
  • Create a set of icons and A/B test them with various tools to understand which perform better.

How To Encapsulate Your Entire Product Beauty in an Icon

To design a mobile app icon that gets those clicks, you should make it attractive as well. The general tips, in this case, are the following:

Scalability

Your icon should look great in different sizes, especially considering all the device variety. Both Android and Apple have clear guidelines on the required sizes:

iPhone and iPad Icon Sizes

app-icon-graphics-ios-human-interface-guidelines

Android icon sizes are bit trickier due to the large device variety and you are required to make 5 versions to ensure that the graphic design icon will look consistent on different gadgets:
android-icon-sizes-made-simple-icon-size-guide-by-icon-experts

  • Too complicated icons may end up looking obscure on a responsive scale.
  • Keep all the focus on a single object e.g. shape or unique element that will keep its contours and qualities when scaled.
  • Test your icon against a variety of different backgrounds to ensure consistency. Speaking of colors.

How To Choose Your App Icon Color

Colors influence our purchase decisions. A lot of research has been done on how exactly we decided to click the “orange button” instead of “green”, yet I’d like to focus on a specific related to app icon colors.

Stuart Hall has analyzed the color patterns behind the most popular apps on App Store. Here are some of his curious finds you can use to design your icon for a mobile app:

Top 200 Free iOS App

1-3wuis4yxvhbgmqpucovirw

Top 200 Paid iOS Apps

1-dpurs0nlb3tqt_wtucbdrq

Top 200 Social iOS Apps

1-xp3f5j9tp6tw5kgmpaa6kw

Facebook and Facebook Messenger, Twitter, Periscope and LinkedIn – all of them are blue.

So what dominant color should you choose for your app?

  • The best option is to stick with your brand colors of course if those were already defined.
  • You can follow the crowd and opt for a blue or red icon.
  • Or be a rebel and choose an obscure color like purple or pink.
  • Or stay in the middle ground and choose yellow or green color.

Keep It Consistent

As spoken earlier your app icon is a shiny invitation to your in-app experience.

When you receive a real invitation card you do judge it by the color, quality of paper, typography and so on to get a better idea of where you are asked to go.

The same is true for an app icon.

The best route here is to:

  • Ensure consistency between the app and the icon in terms of color palette and similar design language – blue and white interface highlighted by the same kind of icon.
  • If possible, you should also strive to tight the connection between your app functionality and the icon through symbolism – think a camera sign for Instagram.

Uniqueness

Blending together uniqueness and recognizability may be a tough job. Yet you don’t want to look just like every other app in your niche:

to-do-apps

To-do list apps like to play it safe here

What are your options?

  • Do your niche research and try a slightly different direction e.g. like Todoist.
  • Toy around with colors, overlays, and compositions to give your icon a 3rd feeling and make it pop.

A Final Word About Words

You don’t need to stick a label on your app icon. Mixing up words and pictures in one icon will likely result in a cluttered look. Here are some big no-nos:

  • Your company logo and business name never look good in square.
  • Using a single letter like “F” in Facebook is an exception rather than the norm.
  • Do not use the name in your icon. Save that space for something more enticing!

Interested in partnering with our designers and developers on a mobile project? Let’s talk about your ideas and the exact prices involved!

Rate the article
[Average: 5]
Want to Get our Digest to Your Inbox?
Great, You are Now Subscribed!
Hands-on Guides
4 Steps to Improving Your App’s Security

After putting so much work into designing, marketing, and maintaining a great app, the last thing you want is a security breach that could derail your users’ trust.

Slava Bushtruk
Hands-on Guides Startup Goodies
Mobile App Testing: Why You Should Always Test Your Apps?

Learn how to bulletproof your apps for excellency with the right testing approaches.

Leonid Gorev
Hands-on Guides Startup Goodies
Responsive Website vs. Native App: What To Choose & When

Mobile is the primary channel for content consumption. But what do you need – an app or a responsive website?

Slava Bushtruk