Why you need a great app icon

With over 1 million apps on the App Store it’s now more important than ever to make sure the icon for your app stands out. A great app icon can be the difference between almost no downloads and hundreds, if not thousands of downloads. Think about how often you skip over apps with bad icons, I know I do it all the time.

Part of the problem is that the App Store is overcrowded - there’s literally an endless choice for any type of app you can think of. People are picky and you need to do everything you can to make your app stand out — having a great icon is one of the best ways to do this. No matter how amazing your app is, if it’s got a poorly designed icon, people will be more inclined to skip over it.

What makes a great icon?

A great app icon should be simple, memorable and beautifully designed, and it should convey the main purpose of the app from just a quick glance. Here’s a selection of icons that have been designed specifically for iOS 7 and fit in perfectly with the overall feel of the system. This is the standard and quality you should be aiming for.

iOS 7 Icon Design

From left to right: Tweetbot, Launch Center Pro, MindNode, Castro, Clear, Ember.

iOS 7 has made it easier for developers to design an icon that fits in with the rest of the system. However, it’s also made it easier to create a forgettable icon or one that’s nearly identical to a competitor’s app.

Generally, the design of an icon should give a sense of what the app is used for. You can break this rule if you have a strong brand or a character based logo (this is especially true for games).

A lot of iOS 7 style icons look as if the developer has just drawn a subtle gradient, placed a stock-icon over the top and shipped it. It may be tempting to do this yourself to save time and money, but your app could end up suffering because of it. If you’re not up to the task of designing it yourself, then make sure you hire a good UI/icon designer.

If you don’t know any designers, ask fellow developers for recommendations or take a look on one of the many design showcase sites out there. Dribbble is one of the better places to find talented designers.

You should also try to match the key colours of your icon to those within your app. This is especially true since the introduction of iOS 7, as the UI of an app now animates directly up from the centre of the icon, and this gives the user a feeling of visual continuity. They may not notice it but it’s all part of the experience and it helps to give that underlying feeling that your app is well-designed and professionally produced. Here’s an example of how Ember and Clear use a consistent colour scheme between the icon and UI.

Icon Design UI

Having clean, well-defined iconography works really well for iOS 7-style icons, but don’t restrict yourself to just iconography on subtle gradients. As long as your icon is fairly flat and you keep shadows and highlights to a minimum it should fit in just fine.

All the stock iOS 7 icons are designed around the same grid so they all have a sense of balance and work in harmony. You don’t have to work to this grid system, but I would recommend you take it into account as it will help your app sit nicely alongside Apple’s own apps.

Game icons are the exception in all of this; they shouldn’t follow the iOS 7 icon guidelines. Games need to look fun and exciting, and most of the time they actually benefit from being highly detailed. If all games adopted the flat iOS 7 style of icon it’d be pretty boring, not to mention near on impossible for them to convey what style of gameplay and graphics the player can expect.

A quick word about icon borders

Don’t use them. They look ugly, and simply don’t fit in anymore. The same goes for the faux 3D effect that makes an icon appear as though it’s been tilted back by 45º or so. This style of icon looks outdated, over designed and gaudy alongside the new cleaner icons found in iOS 7.

iOS 6 Icon VS iOS 7 Icon

Apple have changed the shape of icons in iOS 7 and this has made all iOS 6 based icons using borders or faux 3D look poorly designed. Apple could easily change the shape of icons again in iOS 8, so it’s probably best to avoid either of these effects.

Don’t forget the Mac

If you’re developing for iOS and Mac (and you really should be), you’ll want to make sure whatever metaphor or iconography you’re using translates nicely to both platforms. The branding of your app needs to be consistent; don’t just copy and paste your iOS icon over to the Mac. By doing this you’re sending out the signal that you see the Mac as a second class citizen. Design separate icons for the Mac and iOS to make them look at home on each system. Here’s some examples of this concept:

iOS and Mac Icon Design

From left to right: Ember, Clear, Tweetbot, Fantastical, Day One.

The icon is the face of your app and the thing it will be judged on first – Can you really afford to ship your next app with a less-than-perfect icon?

I hope you found this article useful, if you have any questions or would like to chat about anything app-related please feel free to get in touch.

Dan Counsell

I'm the Founder of Realmac Software. I've been designing, building, and shipping products for over fifteen years. I write new articles every month on how to run a profitable online business.

Brighton, well Hove actually.