How To Design a Successful App Icon in 11 Steps

January 28th, 2017

As designers, we all know that app icon is a small figure representing an application program. However, designing an app icon is not just drawing the shapes inside a square.

A desirable app icon should intuitively appeal to large consumers and briefly exhibits useful purpose of the app without words. In doing so, you need to figure out the concept and generate your app icon which is different from the others.

The strategies behind designing a successful and memorable icon involve a process which progresses through various stages of listening, research, development, feedback and changes. In this post, we will guide you all through 11 basic steps in order to achieve a successful app icon.

1. Ask the questions and understanding the target

Asking questions such as, How does your company differ from its competitors?, What keywords should best describe your new app icon?, or Please send us some app icon samples you like, will help you and your clients become more on the same page and set up for a successful deliverable. 

Especially, you need to ask for the app UI design, whether it’s ready to make sure your app icon design will fit well the app UI style.

2. Research and Brainstorming

After receiving the answers and sometimes arranging phone/skype conversation to get additional details, you should begin researching their app information and competitors to get a better feel for their market – this helps in the overall look and message the final icon conveys, all materials are useless if you understand them differently than your client. This is why understanding goals and vision is crucial in order not to waste valuable time.

3. Inspiration and Think Outside the Design Box

You should go through some app icon galleries to get the creative juices flowing. There’re some app icon galleries that we recommend:

In recent months, there have been a lot of icons that use single color backgrounds with a simple icon, flat design techniques, and long shadows. While these trends are going too overused, don’t get stuck inside the design box. Do something different with your icon.

If everyone else is working with square shapes, consider something more rounded. If they do flat, why didn’t you design with cartoonish or 3D style?  Don’t feel like you must design your icon on what everyone else is doing, you don’t have to follow the trends.

Yes, flat app icons are beautiful. More than that, they’re elegant. But only in isolation. Taken together, they’re ubiquitous.  

App icons design by Junoteam

4. Mind mapping and Sketching

Mind mapping helps in exploring and growing your topic. You can easily expand your ideas and keywords. You can try mind mapping on white board and sometimes with the sticky notes.

Whether it’s icon, logos or websites, always start with paper and pencil. You have a project idea that feels right, it’s just the beginning. Sketch it out! It only takes a few seconds, and it gets the idea out of your head. Now sketch some more ideas. You won’t know whether your first idea is the best until you explore others. If you find something you like more, you’ll feel a rush of gratitude that you didn’t waste 4 hours in Illustrator/ Photoshop with the bad icon result.

App icons sketch by junoteam

You should involve the client in all of the steps of the design and show clients some sketches for your ideas, they help everyone get on the same page, quickly. When a course correction is needed, we can spend a few seconds sketching a revision, rather than taking hours to move pieces around in Photoshop or Illustrator.

5. Start using the Design Software

After some icon sketches approved, you can take your chosen ideas to the computer. Most of the designers choose Adobe Photoshop for creating icons, the pen tool in Photoshop is easy to create vectors shape that is scalable and editable.

App icons design by junoteam

We highly recommend you to our icon grid template to design icons, please find the download link by clicking on the image below.

6. Client feedback

The client usually asks for sketch modification or just approves the sketches so you have a lot of time to re-sketch and get their feedback through various stages of the app icon design process.

7. Modification

After getting client feedback you should go back to the computer and modify or provide additional options. This helps you the chance to take in more ideas from the client and understand their vision more clearly after the initial feedback. Listening to your clients is the only way to guarantee you create a great design.

8. Color & Font

After finding out some best options, play around with color combination and font variation. But don’t use words in app icon if it’s not really necessary, you can read the reasons in this article from Michael Flarup. 

If you can’t get a way with no text, then try using a first letter of the logo or app name. Great examples are Vine, Snapguide, Facebook, Pinterest.

 

You must provide your clients at least 2 different app icon samples. Don’t send too many ideas, when you present your client with too many options, the process of choosing becomes much more difficult — it’s easier to choose one from two than one from twenty.

9. Final revisions

After the client tends to approve the best option for their app icon, you just need to make some additional minor changes that you feel are necessary. At this stage, we can mock-up what their new app icon will look like on the app store and phone screen with different screen background color. This helps your clients see how the app icon works, not just a stand-alone symbol.

 

Sushi roll app icon design by nguyendoan88

10. Scalability

One of the most important aspects of an icon is scalability. Because the icon is not going to stay at 1024 x 1024px, it’s going to be shown in several places such as App Store, Google Play, on Retina devices and even in the Settings panel at several sizes. So make sure your icon design look good at any size.

 

Sushi Monster app icon design by Junoteam

 

11. Delivering the files

You must deliver round and square shape because 1024px square shape is App Stores required image. Your clients can use round icons for mockup demo or Google Play stores.

 

We hope you enjoyed and start to create your first app icon design. If so please send us your design we would be happy to see, upload your app icons now! To stay tuned for more tutorials and open source projects, just need to subscribe our newsletter box below.