App Icons Designed For Mobile Magnetism

March 26, 2019
App Icons Designed For Mobile Magnetism
General

It’s like searching for a set of keys: that moment when a user can’t find the app icon they’re looking for.

Scrolling through every page of the home screen multiple times until, finally, they give up and close the phone even though the app was in plain sight…

That’s a mobile marketing nightmare if ever there was one.

App icons may seem like a small part of your mobile app (180×180 pixels to be precise), but they are a huge component of your app store optimization, user engagement, and retention strategies. How can your brand stand out from dozens of apps on the crowded screen of an average device?

In this article, we cover some design best practices for app icons. Keep reading to learn more or view our full infographic summarizing the tips below.

App Icons: Logo vs. Icon

So you’ve got the company logo designed and you’re about to scale it down into your mobile app icon, right?

Not so fast.

Your app icon is not a logo. It should stand out as being simple, sweet, and well, iconic. Think about the Google logo you probably just saw before landing on this page.

Depending on whether you’re using a mobile or desktop browser, you saw completely different designs. And although the user experience should be consistent across platforms, they are different products, requiring different icons.

The Google search app icon is completely different than the logo. Then consider the app icons of Google’s suite including Maps, Chrome, Gmail, Drive—the list goes on and on.

Not many companies get away with repurposing their logotype as their app icon. Some who have successfully done so include Yelp!, Lyft, and Uber.

But, even if you don’t have the brand recognition of a Google or an Uber, you can still win the attention of users by using the following best practices.

8 App Icon Design Best Practices

When it comes to designing app icons that users can’t help but click, it’s about understanding the user experience. What will immediately stand out to the user as they scroll through their screens deciding which app to open?

These best practices are compiled using the most recognizable app icons from companies such as Apple, Google, Instagram, Snap, Spotify, and more.

01. Keep It Simple

Albert Einstein once said: “Everything should be made as simple as possible, but not simpler.”

Minimalism in design can be very beautiful, and in the case of app icons, quite necessary. The canvas for app icons is quite limited in size, but presents a welcome challenge to keep things simple.

app icons tip to keep it simple like apple and best buy examples

Keep the background simple by avoiding images or detailed illustrations. Apple takes simplicity very seriously when designing app icons that come preinstalled on every iPhone. The phone, iMessage, and Health apps are great examples of their minimalism.

The discussion of simplicity is the perfect segue into our next app icon best practice: scalability.

02. Consider Scalability

Although the standard app icon is 180×180 pixels, you must consider how the icon can scale to various sizes, both larger and smaller.

Mobile app landing pages, for example, will require a favicon—that small icon in the browser tab (for reference, ours is the CleverTap “C” on a blue background). The favicon is a 16×16 pixel image so you can understand why it’s important to consider scalability.

app icons must consider scalability for other icon sizes

In the other direction, your app icon could be featured in digital or print press releases and news coverage, which will require an app icon much larger than 180×180 pixels. See that it maintains the same aesthetic appeal even at larger sizes.

03. Be Different

Uniqueness can be a difficult aspiration depending on what vertical you’re in. It’s interesting to see how companies in the same or related industries follow a similar design style, as if there were strict guidelines on how different design assets can be.

app icons should be different to stand out like google maps, kindle, and sound cloud

If you have a productivity app, for example, don’t just use a checkmark like all the hundreds of other to-do apps have done.

Follow Apple founder Steve Jobs’ credo and be different when creating your app icons to make sure you stand out from the rest of the App Store crowd.

04. Use Contrast and White Space

When considering app icons and the user experience, think deeply about wallpaper. There are an infinite number of wallpaper images that users set as their background images.

If your icon is solid black with small gray text, and the user has a dark or solid black background, your icon will be invisible. This is why you should use at least two colors with stark contrast.

app icons white space and contrast examples include twitter, robinhood, and headspace

Headspace does a good job of following this last point.1 Their background, or border if you will, is white and their simple orange circle in the center does a great job of providing contrast. The simplicity of the Headspace app icon also subtly conveys the goal of the app’s user experience.

05. Use Bold Colors

When considering what colors to use for your app icon, it’s best to choose bold colors that will stand out. We already discussed using colors that contrast, but also consider how rich, bright, and vibrant your colors are.

app icons should be bold like pandora, tinder, and instagram

Most app icons on the App Store and Google Play use primary colors. To stand out, take these primary colors and add to their intensity. You can also experiment with gradients.

Instagram’s latest app icon design supports this thesis. Their bright hues and yellow to purple gradient are bold and unique.

06. Find Your Focal Point

Famous paintings do a good job of guiding your eye through the narrative. Typically, this is achieved by honoring the rule of thirds, which argues that the main elements in a design should take up one-third of the image.

Only slightly different in theory from a Monet or Picasso, app icons should have a focal point in the center that draws the eye to focus on your app icon.

app icons must attract the eye towards a focal point like asana slack and apple photos

Slack’s new app icon does a great job of this. The four separate right angles, if you will, all converge in the center, which guides the eye inward like an arrow piercing a bullseye.

07. Recognizable, Intuitive, and Consistent

When building brand recognition and creating a sense of familiarity with your users, you should aim to keep your branding consistent and recognizable across platforms.

One thing that derails brand recognition is app icon redesigns. Although, if your app has a high engagement and retention rate, then your users should quickly become comfortable with your new logo and app icon.

make app icons recognizable, intuitive, and consistent using examples from audible, whatsapp, and gmail

Uber, for example, has undergone a number of logo and app icon changes over the last few years, while Lyft has remained consistent.

08. Don’t Include Text

Unless essential to your branding, do not include any text.

There are many companies who have a very distinct logotype and a separate app icon design. Netflix is a great example. For a long time, they used their logotype in their app icon. Recently, however, the company released a new single letter logomark as their app icon.

app icons should not have text like Jcpenney, grubhub, and calm

A large, single letter to represent the company name seems to be the exception to this rule. Google, for example, uses a big “G” for its Google search mobile app icon.

One strategy is to include context around what the app does within the elements making up the letter. The Gmail app icon has a large highlighted section on the back of an envelope that forms a big “M,” which works well to convey what the app does.

App Icon Influencers

As you can see, mobile app icons are more important to the overall user experience of your mobile app than you may have initially thought. 

Like an ancient Egyptian scrolling through a tablet of hieroglyphics, your users must be able to quickly decipher what your app does and why they should use it. If you want to stand out from the competition and understand what appeals to your audience, consider A/B testing different visuals. In fact, the average app undergoes 7.5 creative updates per year to leverage these tests.

If you want to learn more about mobile marketing best practices, including mobile app design, follow our guides, whitepapers, webinars, and more on our resources page.


app icons best practices infographic

Industry Benchmark Reports Resources

Industry Benchmark Reports

See how your app compares against industry standards, quickly spot red flags across the user lifecycle, and get data-backed recommendations to fuel your mobile growth strategies.

Gain Industry Insights Now