You know, we use ad-blockers as well. We gotta keep those servers running though.
Did you know that we publish useful books and run
friendly conferences — crafted for pros like
yourself? E.g. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.

Creating that singular piece of graphic design1 that users will first interact with each time they encounter your product can be intimidating. A beautiful, identifiable and memorable app icon design can have a huge impact on the popularity and success of the app. But how exactly does one make a “good” app icon? What does that even mean? Fear not, I’ve put together some tips and advice to help answer these questions and to guide you on your way to designing great app icons.

I’ve been designing2, making resources3 and giving talks4 about icon design for the past couple of years. In this article, and in the video at the end, I’ll sum up what I’ve learned about this amazing craft.

The first things you need to understand when setting out to create an icon is what exactly an app icon is and what job it performs. An app icon is a visual anchor for your product. Think of it as a tiny piece of branding that not only needs to look attractive and stand out, but ideally also communicates the essence of your application.

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 a designer to make: Logos are scalable vector pieces of branding designed for letterheads and billboards. Icons are most often raster-based outputs customized 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.

From a practical standpoint, when you’re making an app icon, you are creating a set of PNG files in multiple sizes — ranging from small sizes like 29 × 29 pixels all the way up to 1024 × 1024 pixels — that need to be bundled with your app. This set of carefully crafted designs will be used in the many contexts of the operating system where users will encounter your application — including the iOS App Store and Google Play, the settings panel, the search results and the home screen.

App icons can essentially be made in any application capable of producing raster files, but common choices are Photoshop, Illustrator and Sketch. Tools like the ones found on Apply Pixels211210 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 Apply Pixels

Now, let’s look at some of the best practices in designing app icons. I’ll discuss each of my five core aspects of app icon design, give tips on how to improve each aspect and show off some examples of how I’ve worked with that quality. A lot of these examples will be based on my own work. That’s not because I feel like it is the best or only way to illustrate these things, but it has the added benefit of my knowing what thoughts went into the process. When going through the aspects, try to imagine icons that you like and how the individual aspects take shape in the icons on your home screen. Let’s get started.

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 that your creation maintains its legibility and uniqueness. It needs to look good in the App Store, on “Retina” devices and even in the settings panel.

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

Overly complicated icons that cram too much into the canvas often fall victim to bad scalability. A very big part of the conceptual stage of app icon design should be dedicated to thinking about whether a given design will scale gracefully.

An app icon is like a little song, and being able to identify it easily amidst the noise of the store and the home screen is a key component in great icon design. Just as the verse of a song needs to resonate with the listener, so do the shapes, colors and ideas of an app icon. The design needs to instill a memory and sense of connection on both a functional and an emotional level.

15An icon can be detailed or simple; just make sure it’s creative and interesting and accurately conveys your intentions.

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

There’s something to be said for creating consistency between the experience of interacting with an 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.

16Consistency between icon and interface is important to strengthening the visual narrative.

Shaping a sleek, unified image of your app in the user’s mind increases product satisfaction, retention and virality. In short, getting your icon to work harmoniously with the essence, functionality and design of your application is a big win.

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 icon will be constantly competing with other icons for the user’s attention, and standing out can be a perfectly valid argument for a design.

18The “Productivity” category in the iOS App Store is a great example of how uniqueness hasn’t entered the design process.

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

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

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

Color is a great and often overlooked way to reframe a concept.

19Whatever your design style, uniqueness is often an exercise in finding a novel idea.20Game icon design can be a great source of inspiration because there’s usually a broader range of ideas on display, free of convention.

This is one of my all-time top pet peeves. Only on the rarest of occasions is it OK to use words in an app icon. If you have to retreat to another tool of abstraction — the written word — then I’d say you’re not using the full force of your pictorial arsenal.

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

There’s no need to include the app’s name in the icon — it will usually accompany 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 single letter and it’s a good (and unique) fit, then the letter will lose its “wordy” quality and become iconic. 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, then you’d probably be best off coming up with something new. Remember that an icon is not the same as a logo and shouldn’t be forced into the same context.

The App Store and Google Play have many examples of bland and unopinionated icon design. Your icon is the strongest connection you’ll have with the user. It is what they’ll see first when they meet you in the App Store. It’s what they’ll interact with every single time they use your app. It is what they’ll think of when they think of the app. Anything short of a well-thought-out, fitting and attractive solution will be a failure of your greatest visual asset. Your app icon should not be an afterthought; it should be a working part of the process.

App icons are tiny little pieces of concentrated design, and the qualities of good iconography are universal: scalability, recognizability, consistency and uniqueness. Mastering these will spill over to other areas of your design. Becoming an iconist will make you a better designer.

Whether they’re detailed or simple, conventional or creative, good icons have one unifying property: They all grab people’s attention in the same limited amount of space, on a completely level playing field. It’s a specific challenge, and the answer is always within that same canvas.

Crowning your application with a singular piece of graphic design is no doubt intimidating, but I hope the tips outlined above will make you more confident in taking on the challenge. Now go forth and make a fantastic app icon!

In this article, I’ve used icon tools available to subscribing members of Apply Pixels211210, but many icon tools are out there, both free and paid. Icon design is one of my great passions, and if you’re hungry for more, I’ve made several videos and given a lot of talks on the subject. Below are two that elaborate on the theories behind this article.

In the video above, in roughly 10 minutes, I go through the five major aspects of app icon design and give real working examples of how I’ve worked on them. It’s packed full of stories, advice and pixels, and I hope there’s something in it for everybody — whether you’re about to make your first app icon or are a seasoned veteran.

In this one-hour neon-infused video, I go over some of my work and the concepts outlined in this article, and finally I give a demo on stage on improving an existing app icon.

Mike

> 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, then you’d probably be best off coming up with something new. Remember that an icon is not the same as a logo and shouldn’t be forced into the same context.

I’ll… uhh… be right back.

8

2

Greg McGrew

I found your the suggestions and list of best practices interesting, insightful, and very helpful. I’m an engineer and instructor at UC Denver, and run a usability test lab focusing on products used by people with disabilities. As such, I wanted to comment on #5 of your 5 Core aspects, Don’t Use Words. I agree with your general take on the inclusion of text in graphics icons. For the average user, text may obscure the meaning behind the icon by adding clutter. That said, for people with many types of even mild cognitive disabilities, the text may be their best, if not only way to access the meaning behind the button. I throw this out, simply to ask designers to consider access for people with disabilities when designing UI elements.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Please provide us with your email address:

As designing static pages has become untenable, many have started to approach design in a modular way.
In this book, we’ll identify what makes an effective design system that empowers teams to
create great digital products.
Get the book now →

Today, too many websites are still inaccessible. In our new book
Inclusive Design Patterns, we explore how to craft
flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages.
Get the book →

Meet the new Sketch Handbook, our brand
new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with
practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work.
Get the book.

Trends don’t matter, but techniques do.
With SmashingConf Barcelona, we’ll explore problems,
smart solutions and lessons learned from actual projects.
Taking place on October 17–18 at the Palau de la Música Catalana.
To the tickets →