Designing better app icons

After all the ruckus created by last weeks article “Let’s talk about white app icons” (which admittedly did have a bit of a preachy raised-finger vibe) I felt it necessary to follow up with a much more constructive and practical approach on what I actually think makes a great app icon. An article for everyone, newcomers and pros alike, about the magic of app icons and how we can make them better.

In the video above, in roughly 10 minutes, I go through 5 major aspects of app icon design and give real work examples of how I’ve worked with those qualities. It’s packed full of stories, advice and pixels and I hope there’s something in there for everybody — wether you’re just about to make your first app icon or a seasoned veteran. If you want a bit more context, then read on as I break down this theory I affectionately call ‘5 core aspects of app icon design’. I promise you, there will be bullet points.

Getting started

What is an ‘App Icon’?

The word ‘logo’ is thrown around carelessly these days. App icons are not logos. While they certainly share branding-like qualities, they’re under a lot of different restrictions. It’s an important distinction for the designer to make: logos are scalable vector pieces of branding designed for letterheads and billboards. Icons are most often raster-based outputs customised to look good within a square canvas, at specific sizes and in specific contexts. The approach, the tools, the job and therefore the criteria for success are different.

App Icon packages consist of a range of sizes. Get this template on

From a practical standpoint, what you are creating when you’re making an app icon is a set of PNG files in multiple sizes — ranging from smaller sizes like 29 x 29px all the way through to 1024 x 1024px — that needs to be bundled with your app. This set of carefully crafted designs will be used in the many contexts of the OS where users encounter your application — including the App Store or Google Play, Settings panel, search results and your home screen.

App icons can essentially be made in any application capable of producing raster files, but common choices are Photoshop, Illustrator and Sketch. Free tools like offer clever PSD templates that can help you get off the ground quickly.

A short video demonstrating how to use one of the templates on

The 5 core aspects

1. Scalability

An app icon needs to work at multiple resolutions retaining the legibility of the concept across the range of sizes

One of the most important aspects of an icon is scalability. Because the icon is going to be shown in several places throughout the platform, and at several sizes, it’s important your creation maintains its legibility and uniqueness. It needs to look good on the App Store, on Retina devices and even in the Settings panel.

Overly complicated icons that try to cram too much onto the canvas often fall victim to bad scalability.

A very big part of the conceptual stages of app icon design should be dedicated to thinking about if any given design scales gracefully.

● Working on a 1024 x 1024px canvas can be deceptive — make sure you try out your design on the device and in multiple contexts and sizes

● Embrace simplicity and focus on a single object, preferably a unique shape or element that retains its contours and qualities when scaled

● Make sure the app icon looks good against a variety of backgrounds

A few icons I’ve made that has scalability in mind.

2. Recognisability

Icons can be detailed or simplistic, just make sure that they’re creative, interesting and accurately convey your intentions

An app icon is like a little song, and being able to identify it easily in amongst all the noise of the store or your homescreen is a key component in great icon design. Like the verse of a song needs to resonate with the listener, so do the shapes, colours and ideas of an app icon. The design needs to craft a sense of memory and connection on both a functional and an emotional level.

Your icon will be vying for attention amongst thousands of other icons, all of which have the same 1024px canvas to make their impact and secure their connection with the viewer. While scalability is a huge part of recognisability, so is novelty. The search for a balance between these qualities is the very crux of the discipline.

● Bland, overly complicated icons are the enemy of recognisability. Try removing details from your icon until the concept starts to deteriorate. Does this improve recognisability?

● Try out several variations on your design. Line them up in a grid and try to glance over them, seeing what aspects of the designs catch your eye

● Try to deconstruct your favourite app icons and figure out why you like them and what methods they use to stand out

3. Consistency

The icon to interface consistency is important in strengthening your visual narrative.

There’s something to be said for creating consistency between the experience of interacting with your app icon and interacting with the app it represents. I feel like good icon design is an extension of what the app is all about. Making sure the two support each other will create a more memorable encounter.

Shaping a sleek, unified image of your app in your users’ minds increases product satisfaction, retention and virality.

In short: making sure your icon works harmoniously with the essence, functionality and design of your application is a big win.

● One way to ensure consistency between app and icon is to keep the colour palette of your interface and icon in line, and use a similar and consistent design language — a green interface reinforced by a green app icon, for example

● Although it’s not always possible, one way to tighten the connection between your app and your icon is for the symbolism of the icon to directly relate to the functionality of the app

Icons can also be consistent across a suite of apps that has a relation.

4. Uniqueness

The productivity category in the app store is a great example of how uniqueness didn’t enter into the design process.

This almost goes without saying, but try to make something unique. Mimicking a style or a trend is perfectly fine, but make it your own. Your app icon is constantly competing with other icons for the users’ attention, and standing out can be a perfectly valid argument for a design.

Uniqueness is a tricky part of design, because it not only relies on your skills but also on the choices of others who are trying to tackle a similar task.

● Consider what everyone else is doing in your space, then try a different direction. Always do your research — the world doesn’t need another checkmark icon

● A singular glyph on a one-colour background can be a tricky route to go down if you want to stay unique. Play around with different colours and compositions, and challenge yourself to find new and clever metaphors

● Colour is a great and often overlooked way of repositioning a concept

No matter what type of design you prefer, uniqueness is often an exercise in finding a novel idea.
Game icon design can be a great source of inspiration as there’s usually a broader range of ideas on display, free of convention.

5. Don’t Use Words

Words and pictures are separate representational tools, and mixing them in what is supposed to be a graphical representation often leads to a cluttered and unfocused experience, which is harder to decode. Is there really no better way to visualise the application than with dry words? Whenever I see words in app icons, I feel like the designer missed an opportunity to more clearly convey their intentions.

● There’s no need to include the app name in the icon — it will most often be accompanying the icon in the interface. Instead, spend your time coming up with a cool pictorial concept

● “But Facebook has the ‘f’ in its app icon”, I hear you say. If you’re using a singular letter and you feel like it’s a good (and unique) fit, then the letter loses its ‘wordy’ qualities and becomes iconic by itself. However, this is more often the exception than the rule

● Your company logo and name in a square is never
a good solution. Do you have a mark or a glyph that works well within the constraints? If not, you’re probably best off coming up with something new. Remember, icons and logos are not the same, and shouldn’t be forced into the same context

Making Your Mark

App icons are tiny little pieces of concentrated design and there’s a universal quality to mastering the aspects of good iconography: Improving scalability, recognizability, consistency & uniqueness are skills that spill over to other areas of design. Becoming an iconist will make you a better designer.

Whether they’re detailed or simplistic, conventional or creative, these icons have one unifying property: they all grasp for people’s attention within the same limited amount of space, on a completely level playing field. It’s a specific challenge, and the answer is always within those same pixels.

There’s no doubt it can be intimidating to crown your application with a singular piece of graphic design, but I hope the tips I’ve outlined above will make you more confident in taking on the challenge. Now go forth and make a fantastic app icon!

Whoa, you made it all the way to the end!? Can’t get enough of app icons? Here’s a talk I gave at Adobe MAX in L.A. In this 1-hour neon infused video I go over some of my work, the concepts outlined in this article and finally I give a demo on stage improving an existing app icon. I think I’ll shut up about app icons for a while now.

🗯 Join me on Youtube for Behind-The-Scenes, Design Tool Tips and Adventures!

Designer, entrepreneur & keynote speaker. I love making things, going on adventures and telling stories.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store