App Icons

I like to make apps look good. It’s what I enjoy most, and I think it’s a very important part of the app-creation process. In fact, so do users.

“Probably the biggest impediment to this app’s success is how ugly it looks.”
–Top review from a popular travel app

While there is much to be said about designing apps, it can vary wildly between different products, companies, and people. If there is any constant in the process of designing an app, it’s the app icon. Everyone must have one.

What’s their purpose?

People seem divided on this. On one hand, it can be used for marketing. It is, after all, one of the very first things a user will see about your app. When they search for it or see it on the App Store, your icon will be there to try to sell the app.

On the other hand, once a person becomes a customer and has your app on their home screen, the purpose suddenly becomes very different. Users should be able to recognize your app icon when they’re looking for it.

And while you can focus on marketing needs, that is a one-time scenario for each person. Any individual will only buy your app once. One time. It’s important to recognize that optimizing for this one situation may hinder the needs of your everyday user.

I believe good app icons are most valuable for your customers, your everyday users, not first-time shoppers.

Consider walking down a candy aisle at a drugstore. If you have a craving for Reese’s Peanut Butter Cups, you know how to find it. Of course, it’s the bright orange wrapper with a bubbly yellow word on it. Instant. Most candy bars have very distinct brands which can be instantly recognizable at a glance of the entire aisle. This should be precisely how you approach your app icon design.

An ideal app icon reminds users of an app through shape, color, and texture. Take the Phone icon, for instance. It has evolved a tiny bit since Steve introduced it in 2007, but has remained mostly the same. Today, it is a bright green, with diagonal stripes, and a white phone symbol. These three elements together (read: by our powers combined) form an instantly recognizable mark for users. When a user needs to use the phone, it’s a no-brainer.

If we look at other familiar icons (to everyone on the platform), you’ll find the same characteristics at play. The Mail icon features a vibrant blue color, some clouds, and a simple envelope shape. The Music icon is a vivid orange, with a grungy texture, and two dark orange eighth notes. All three of these are easy to find, coupled with user-defined positions on the home screen.

When going through the process of creating or sketching your app icon, you might come across a few obvious ideas relating to function. For example, these three shopping apps use shopping carts for their icons. In fact, the majority of the icon is consumed by the cart symbol and a small percentage is used to denote the brand.

If we really think about it though, these shopping carts aren’t appropriate for any of these three apps. Zappos and Amazon only exist as online services that have never used a physical cart, and more-so their primary business is to sell you products! It’s a given what their intent is, so instead of focusing on the cart, why not focus on the brand? And regarding Apple, could you imagine an Apple Retail Store featuring a glowing white cart logo embedded in the stainless steel outside the storefront? How preposterous a thought!

Instead of focusing on what your app does, focus on what your app is. This will help your brand show through, which will be more unique and more recognizable.

It’s genius really, the glowing white Apple logo you see embedded in stainless steel is the same image of the products they sell. Your MacBook features a similar glowing white Apple embedded in a unibody aluminum enclosure.

If you take that same logic to app icons, any style you have in your app should be applied to your icon. Find My Friends, arguments about the necessity for fine corinthian leather aside, uses that leather both in the icon and the app. This makes a very obvious connection to the user. Maps features a full screen map. So does the icon. iBooks has a beautiful wood-textured bookshelf in the app. The icon uses the same wood texture. These material connections help a user associate your icon with your app.

Take inspiration from life. There is surely an analogy that can be drawn, or a physical product you are replacing with your app. Use the real life counterpart to influence your brand and your icon. If users see an icon that resembles something they know in real life, they will expect that it’s related! (Why wouldn’t they?)

Routesy is a great app for checking on MUNI and other Bay Area transit schedules. Its icon closely resembles old MUNI monthly bus passes. Though now deprecated, any Bay Area citizen who used MUNI on a daily basis will recognize that ticket anywhere. Using that ticket as a basis for the Routsey app icon is ingenious. Just as you use the pass every day, you’ll use this app every day.

Delivery Status is a neat way to track shipments. By using a brown cardboard box with a large white shipping label, this icon addresses a concern. “Where’s my box?” The answer can be found by tapping the icon of something that resembles the package you’re expecting.

Trailers, an app from Apple, uses a symbol found everywhere on Hollywood sidewalks. You’ll find it inserted in each “Movie Star” on the sidewalk. Combined with a fancy red carpet, and users will instantly understand this app is for going to the movies.

It’s not uncommon that Mac apps have companion iOS apps. Here are some examples of apps that use the square composition of iOS app icons in a really great way. Coda and Diet Coda share the leaf shape, color, and texture, but in a different way. Things showcases fitting an object to a square. Twitterrific exemplifies cropping to the most important area of an illustration. By relating the icons of apps on two different platforms, users will know to expect a similar experience from each.

Now that we’re about five years into the App Store, seeing a single developer or company ship a few apps as a suite is becoming increasingly more common.

Nike+ has a few apps that feature the same shapes. These three all have a diagonal shine, the familiar Nike swoosh, and a plane at the bottom. The consistent shapes and composition frame these as a family of apps.

Facebook has individual apps for functions, but retains company branding by sharing the background color, the familiar Facebook blue. The thin lighter blue rectangle at the bottom is an iconic branding element for Facebook and ties all of these icons together.

The iLife suite on iOS shares something very interesting and unique: an environment. While all of their spaces are designed differently, they all feature an object sitting on a surface with a close backdrop, making it obvious these are meant to sit alongside each other.

Apple’s iWork apps exhibit the same background color, gloss shape, and materials. The Keynote and Pages icons have shiny metals. Keynote and Numbers both have bar charts. The relationship of elements across icons makes these apps obviously from the same creator.

But I must admit, while I can point out many ways for your app icon to look unique, borrow from real life, or share styles with your other apps, I have no idea how to make an icon for a game. After some quick research, it seems all anyone does is put their primary character in a yellow square. They won’t really stand out amongst games, but I suppose they’re instantly recognized as a game.

Your app icon will sit among many other icons on the home screen, so make yours memorable.

This is adapted from a talk I gave at the Renaissance conference on January 23, 2013.

Of course, I love creating app icons. If you need an app icon, don’t hesitate to contact us! We’d love to work with you.

A Little About Icons & Me

Over the past five years, I’ve created a lot of app icons for a bunch of people. At Tapulous, I created them for Tap Tap Revenge, FriendBook, Twinkle, Fortune, and Collage. At The Iconfactory, I made one for Ramp Champ. When I went to Apple, I was fortunate enough to adapt icons for iBooks and GarageBand for iOS and, in addition, work with others to create the icons for Trailers, iTunes, and Remote. While at Square, I made an icon for their “Card Reader” app. And at Pacific Helm, Checkers.

Scattered throughout the years, I’ve been able to work with some really cool clients to make their app icons either while on my own, at the Iconfactory, or at Pacific Helm. In 2008, I was even able to make an app icon for the President of the United States, which was pretty cool.