“Which color do you recommend for an app icon? Ours should stand out from the rest of the icons.”

“Don’t you have a brand color?”

“No. We are a start-up company and we are going to launch a mobile app soon.”

A couple of young guys asked me this question and so I embarked on a ‘highly unscientific study’ on 90 app icons that happen to come my way.

Insights

Following insights are based on my observations of the 90 app icons I managed to get hold of. The modus operandi is mentioned at the end of this article.

To stand out from the crowd of app icons, don’t follow the crowd in terms of color, name placement, shape of app icon canvas…

App Icon Colors

What should be the color of the app icon that you are going to design? Here is the color distribution chart we extracted using Adobe Color from the 90 app icons.

Blue colored app icons dominate — 35 blue app icons out of 90 apps (39%).

App icons in yellow, cyan, magenta or shades of grey will definitely stand out if most of the app icons in your mobile phone home screen are blue, red or green.

SnapChat (yellow), Zite (cyan), Flickr (magenta/blue), Medium (black)

Text in App Icons

Do we need to place the name of the app inside app icons? Or, is a simple logo good enough?

56 app icons out of 90 apps (62%) have logo/icons without any text

Only a few apps display names inside the app icon. A compelling reason why you should too.

LinkedIn (two letters), ebay (full name), Skype (single letter), Evernote (logo/icon)

Shape of App Icons

In android, we have the luxury of transparent canvas for app icons. This gives more room for creativity unlike an iOS app icon which is always a round edged square. Here is the current statistics of app icon canvas shapes.

46 app icons out of 90 apps (51%) have square shaped app icons

Would you like to see one example each for the above?

Pinterest (circle), BookMyShow (ticket stub), Twitter (square)

For a change, design circular app icons!

Family of App Icons

Let us say that we have more than one app in app store under a single brand. How can we show that all the app icons belong to the same family, yet they are unique enough for the user to distinguish one from the other? How can we maintain the brand recognition across apps?

There are four trends in front of us.

Same Graphic, Different Color

Let us take the example of 9GAG.

9GAG (black), 9GAG TV (red) and 9GAG First (blue)

Because of the prominent graphic/icon, users will instantly recognize the family of apps and understand that they all belong to 9GAG.

Different Graphic, Same Color

LinkedIn family tackles this brand recognition problem by maintaining the uniform blue color across its apps.

TOP row: LinkedIn, SlideShare, Sales Navigator and Connected; BOTTOM row: Job Search, Recruiter and Pulse

In my opinion, the LinkedIn icons don’t exactly belong to the same family. See the size, stroke width and orientation of the ‘magnifying glass’ icon in ‘Job Search’ app and ‘Recruiter’ app (Bottom row). Ideally, they should be identical.

Different Graphic, Same Color, Same Logotype

Yahoo! apps have the same ‘Yahoo!’ logotype (except Flickr) and the same color (except Flickr); but the icons are different for all of them.

TOP row: Yahoo!, Weather and Screen; MIDDLE row: Mail, News Digest and Finance; BOTTOM row: Fantasy, Sports and Flickr

Freestyle

Google generally follows the brand colors in a diverse array of icons and occasionally throw the “G” here and there.

At the time of writing, Google has changed some app icons to reflect the new logo change (Street View, News & Weather); but others like Google Plus still sport the old “G.”

TOP row with the new “G”: Street View, News & weather and Translate; MIDDLE row with the old “g”: Google+, Maps and Google; BOTTOM row: Drive, Analytics and Photos

Take the ‘Google Analytics’ app icon (bottom row, middle one). If you happen to see it alone, there is no way to infer that it comes under Google’s umbrella. Other examples are ‘Keep’ or ‘Primer’ apps from Google.

Moral of the Story

A yellow, circular app icon displaying the name of the app will definitely stand out from the crowd (at least in theory)!
;-)

‘Cyrcle’ Android Icon Theme by DjSkarpia (Andrea Corvi)

“Never Judge An App By Its Icon”
- DogHouse Diaries

I look forward to hear what you have to say about this exercise. Let’s talk…

Modus Operandi

ROW 1: Permission Friendly Apps, Hot Star, Downloads, Superbeam, Phone, IF, Drippler, Airbnb, Todoist, Photos. ROW 2: Pinterest, InShorts, Analytics, Tumblr, Pixate, ES File Explorer, AntTek Explorer, TuneIn Radio, Keep, Play Games. ROW 3: Expense Manager, Avast!, Uber, Play Movies, LinkedIn Job Search, Feedly, Battery Widget, VLC, Play Music, Firefox. ROW 4: BookMyShow, Yahoo! Weather, Play Newsstand, Flickr, FlipBoard, Calendar, Yahoo! Mail, Primer, Medium, Yi Camera. ROW 5: QR Droid, Messaging, Gallery, Quickoffice, Gmail, Circa, Yummly, Redbus, Messenger, Zite. ROW 6: Cogi, NaukriGulf, Connected, Sketchbook Xpress, News & Weather, Google Plus, Contacts, News Digest, Hangouts, OlaCabs. ROW 7: Dots, Google Maps, Spotify, Facebook, Twitter, 1Password, Youtube, Slack, Overcast, Pocket. ROW 8: Evernote, Dropbox, Snapchat, Skype, Facebook Messenger, Fantastical, Google, SoundCloud, Google Drive, Foursquare. ROW 9: Instapaper, Homescreen, LinkedIn, Shazam, WhatsApp, Tweetbot, Chrome, Inbox, Instagram, 9GAG.

I downloaded and saved 90 app icons. 28 apps are from #Homescreen ‘Top Apps of this Week.’ The rest are from my mobile phone.

I used Adobe Color (Kuler) to breakdown the color palette and noted down the dominant colors.

I filled a spreadsheet with the numbers and created some bar graphs for you!

Thank you.


Enjoyed this article? Spread the joy to others by sharing and recommending!
Also, head to
www.antzFxWay.com for more design and photography stuff.

Mobile Growth

Your app is live. Now what? You can also find us at our meetups: https://events.mobilegrowth.org/ and at our cross platform conference https://branchoutsf.com/

Anas KA

Written by

Anas KA

Designpreneur, UX Strategist, Design Blogger and Product Designer who is passionate in mentoring design teams. Writes at www.kikkidu.com and more...

Mobile Growth

Your app is live. Now what? You can also find us at our meetups: https://events.mobilegrowth.org/ and at our cross platform conference https://branchoutsf.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade