[September 2022] New app listing guidelines

As of September 2022, we've updated the requirements for app listings in the Shopify App Store. Some of the information in this article may be out of date. To make sure your app listing is optimized for merchant installs, please visit our documentation for the newest guidelines.

Visit docs

The single most important visual design element of your product is your app icon.

You can spend all the time in the world designing a solid onboarding experience, relatable illustrations, sensible fonts, and pixel-perfect interface designs—but nowhere else is the pixels-to-impact ratio as high as in the app icon itself.

That one image sits at the intersection between branding and utility; it's the face of your product. It's what people will interact with every day they use your app.

Like a logo, it has to be memorable and unique. But unlike a logo, it also has to fit in with platform restrictions. Desktop and mobile app icons, including icons for products on the Shopify App Store, often exist in marketplaces with design specifications (check out the Shopify app icon guidelines under the app listing requirements (No 5)) and many other app icons competing for your customers’ attention.

The importance of this one piece of design, coupled with the many tasks it has to solve, makes app icon design an exciting multifaceted discipline. It's design, distilled—a cocktail of branding, iconography, and platform trends. It also happens to be very accessible and the one area where most people can easily improve their product.

I have spent the past 15 years of my career in this space.

I've made thousands of icons, written articles, made videos, and taught workshops. If that doesn’t show how crazy in love I am with app icons, I'm also working on a coffee-table book celebrating the art of app icon design.

A few recent iOS app icons I’ve made.

In this article, I want to share my process for making icons along with a few core aspects to consider when you're crafting your next gem. It's not a step-by-step guide, but rather a framework for producing, evaluating, and improving your work in one of the most amazing design disciplines out there.

You might also like: How to Market an App: 11 Expert Tips.

The process of making icons

You could just open up your favorite design tool of choice and start to chisel out your masterpiece. While I still do this from time to time, it took me many years to appreciate the benefits of a period where ideas could stay malleable for longer. It's nothing groundbreaking, but this three-step process has helped me create better and more thoughtful work.

1. Research

When you go looking for a concept for your app icon, you'll ask yourself questions about what your product really does and how to best capture that in a single image.

This part of the process is the most tempting one to skip as you're not directly producing anything. You wanted to make an icon, not do Google searches. However, research is such an important inoculation against going down conceptual dead-ends or producing work that's already overrepresented.

What I usually do is Google image search names and concepts related to the app icon I'm trying to make. I also search the stores where the app icon is supposed to live to see how others have tackled a similar design task. Places like dribbble.com are also great for inspiration, and I search iconfinder.com to figure out what the prevailing iconography conventions are attached to the concepts I'm trying to get across.

Let me take you through an example. I was hired to come up with an app icon for the photography app Alpenglow—and so a first step was simply to understand the connotations behind that word. A quick Google image search tells me a lot about the subject.

Alpenglow is an optical phenomenon that appears as a horizontal reddish glow near the horizon. The app helps you find the best time to take your photo.

From this research I usually save a bunch of photos and write a few notes on possible concepts. Here’s what you can do:

Research similar apps in your space.
Google image search related concepts.
Find inspiration in things you like.

At the end of your research you should have a few ideas about directions to pursue and, just as important, a few things you'd like to avoid.

2. Sketch

While it's tempting to jump straight into a design tool and try out your ideas, I urge you not to skip this step either. Get a pen and paper and roughly sketch out the ideas generated during the research phase.

This isn't about beautifully rendering a concept but rather crudely trying to translate what's in your mind's eye. I think a lot of people have an aversion to sketching because they don't consider themselves good illustrators. Sketching in this context is a tool, not a drawing contest. Don't miss out on this low-fidelity method that can help quickly and inexpensively visualise things.

Here’s what one of my sketches looked like for the Alpenglow concept.

Draw five different concepts from your research phase.
Choose one or two of them based on the rules for good iconography below and move on to rendering.

3. Rendering

After doing your research and sketching your ideas it's finally time to render some icons.

I make some very nice templates on applypixels.com that'll get you started with the right dimensions and some clever export schemes, but really all you need is a canvas (often 1024 x 1024px depending on the platform) and a design tool, like Photoshop or Sketch.

There's a lot of ways you could go about it, but I usually simply take a picture of the sketch I liked and then trace the shapes until I have the building blocks I need. Here’s an example of how I do that from my video class on App Icon Design.

Rendering the actual icon will depend on the tool you choose and your level of experience with that tool. It's hard to do a step-by-step on how to exactly render your app icon with the tool you've chosen but I've got a lot of videos on my channel with examples and advice from my own work where I primarily use Photoshop.

For Alpenglow I ended up doing a range of icons for the user to choose from and landed on a very atmospheric rendering of the original sketch.

To me, it's usually a very iterative process of trying to stay true to the concept while pursuing the sort of aesthetic I like. I'll often try out several variations before finding the exact execution I’m satisfied with, and if I'm working with a client, we'll do revisions until we're both happy with the result.

So that is my three-step process I use for all of my work. They’re simple steps, but it took me many years to fully incorporate them into my workflow.

So how do you know if you're producing a good app icon? For that we need to go over what I like to call the core aspects of app icon design.

Core aspects of app icon design

On your road to becoming a better iconist it can be helpful to have a set of lenses through which you can view and judge your work.

Over the years I've developed a set of core aspects that I think make sense to discuss throughout the process outlined above. I use these core aspects as guiding pillars for all the many conceptual and rendering decisions that go into the finished product.

Scalability

One of the most important aspects of an icon is scalability. Since 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.

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.

Designing an icon that scales to the many places it has to appear on a platform is a fundamental part of the craft. If your renders fail this core aspect, you're either looking at a poor concept or a bad render (or both), and chances are that your icon won't score high in any of the other aspects.

Tips for improving scalability:

Good scalability starts at the conceptual stage. Prioritize concepts that can be rendered by showing a single object.
Make a tiny sketch and see if your concept is still legible.
Experiment with taking away components from your render until the concepts start to deteriorate.

Recognizability

Recognizability is an abstract concept that deals with your icon's ability to connect the viewer with the app it represents. It has to do with clarity of concept and how easily you've been able to carry that message in your execution.

Icons with high recognizability are often defined by concepts and executions that “stick” in the minds of users. There is no silver bullet on how to do that because it so largely depends on how an image is received by the user. What makes it even harder to work with is that recognizability has different forces in different contexts.

I think you can talk about designing for recognizability up front and over time. If it’s really important that people understand what your app is about up front, you need to think about known conventions and cultural knowledge. You’d probably go for a concept that literally depicts what this is all about, like the notes app.

But I also feel like recognizability can grow over time, like we see with brands. For the uninitiated, the Twitter app icon could just as well be an app for cataloging birds.

An example of recognizability up front vs recognizability over time.

There’s this danger that if we only ever design for recognizability as a quality that has to be there up front, we’ll never make any interesting creative decisions that could eventually grow into something very recognizable over time.

Tips for improving recognizability

Avoid bland or complicated concepts.
Understand the difference between designing for up front (literal) recognizability and a concept that could grow (abstract) recognisability over time.
Deconstruct your favorite app icons and figure out why you like them and what methods they used to be recognizable to you.

Consistency

Creating a strong, consistent design language is a powerful way to leave an impression with the user. Good app icon design is an extension of what the app is all about, and so making sure the two support each other will create a more memorable encounter.

"Good app icon design is an extension of what the app is all about, and so making sure the two support each other will create a more memorable encounter."

In many cases a baseline consistency can be established simply by using a similar design language between app and icon.

Tips for improving consistency:

If your interface contains symbolism or existing iconography, consider basing your app icon concept around these.
Simple things like keeping the color scheme of your interface and your icon in-line helps.

Uniqueness

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. Nevertheless it has to enter into our vocabulary when we're assessing concepts and making renders.

There's obviously no sure way of staying unique, but a good place to start is to do proper research and avoid overused concepts.

A good example of how uniqueness as an aspect didn’t enter into the design process.

Tips for improving uniqueness:

Consider what everyone else is doing in your space, then try a different direction.
Color is a great and often overlooked way of repositioning a concept.
Standing out can be a perfectly valid argument for a design. Don't get too hung up on convention or if "people get it."

You might also like: How to Build a Shopify App: The Complete Guide.

Making your mark

App icons are a great primer on design in general, and there's a universal appeal in mastering these core aspects in a confined canvas. If you practice this, you'll not only be able to create better, more beautiful and memorable app icons, you'll also walk away with a greater understanding that can easily be applied to other areas of design. In many ways, learning app icon design is a fun and very practical way to become a better designer.

I hope the process I’ve outlined above will make you more confident in taking on the challenge and that the core aspect will give you lenses with which to evaluate and improve your work.

Designing great app icons is a fascinating discipline that'll have a huge impact on the perception of your product and how people relate to it. Have fun making your mark.

App Icon FAQ

Can I create my own icons?

Yes, you can create your own icons. There are a number of software tools available that make it easy to create custom icons. Popular tools include Adobe Photoshop, GIMP, CorelDRAW, and Inkscape.

Michael Flarup