Designer Blog

App icon and button design — really a unique animal in graphic design. A relatively new category that emerged with computer interfaces in the last 20 years or so, app/button is in some ways easier than logo creations and in other ways more challenging. Here’s a quick overview of the category: the very basics, some tips and a whole lot of awesome examples.

Difference between a logo and an app icon

Logos brand a company in the largest, most abstract sense. They set the tone of the company’s entire, overarching graphic style. App icons, on the other hand, have a more concrete functional purpose: they are the image you click on to launch a computer program or application. They are one element in the company’s “graphic system” and must be made to match the style of logo, website, etc.

Because app icon designs usually have to fit a pre-existing design style, they may be somewhat easier to conceive than logo design, where the possibilities are more limitless. Apps do, however, share similar responsibilities: they must be instantly recognizable and appealing, often at very small sizes.

The logos (left) and icons (right) for Facebook and Mint.com

Difference between an app icon and a button

The boundary between apps and buttons is less clear than the boundary between app icons and logos. App icons and buttons are both graphic images you click on to interact with a computer program. The difference is generally defined as this: app icons are what you click on to launch a program; buttons are what you click on to activate certain functions within a program or website, like the orange “Get started now” button on 99designs’ homepage.

At left, the icon for Instagram; at right, a set of buttons by Aubrey

TIPS!

Incredible detail is a great way to show off your skills but it’s not always functional. The following designs look great in this blog post. Scaled down to 57 pixels on an iPhone, though, they lose much of their detail:

Corners “NY Loft” by Den Brooks (left) and Steampunk camera by Mike | Creative Mints

So take a middle route: simple enough to be recognizable at small sizes but with enough texture and finesse to be eye-catching. Both of these designs register well, even when shrunk way down:

Jaku – Readability by William Szilveszter and Whiskey iPhone Icon by Konstantin Datz

Noticing a trend? Make it square: this will get you more bang for your buck as far as screen space is concerned:

Boxing Glove iPhone Icon by Konstantin Datz amd Guitar icon by Javi Pérez

Or, don’t!

Play by Play icon by SoftFacade and Vector Tomato web icon/illustration by Cuberto

In fact, all too often app designs become stagnant and boring as a result of squareness. We’ve been really impressed by designs that imply a sense of motion, as with this flip book camera and champagne cannon:

Application Icon for FlippingBook Photographer and Champagne Cannon by Iconka 

Buttons typically fit an even smaller scale than app icons, so clear minimalism is key. Get your point across, while maintaining a distinct sense of personality. We love all of these:

(From top to bottom) buttons & icons by Sascha Elmers, Ah & Oh Design Studio, Andrei Grabelnikov and Ondrej Job

App icon and button design on 99designs

99ers have produced some lovely app icons and buttons. Here is a small but impressive recent sampling. Shout out to the designers!

App icon design by mikekirby

App icon design by mikekirby

App icon design by nelutu

App icon design by g369

App icon design by aliartdesign

App icon design by joekirei

App icon design by GWINCHY

App icon design by flohmarkt

Button design by Weckr

Seen awesome app icons or buttons lately? Share them!

Alex Bigman

View all posts by Alex Bigman
Alex's website