What makes a good icon?

by Giles Turnbull

vlc.png



We look at them every day, our eyes are drawn to them almost every time we interact with the computer - icons for apps and files are a very important part of the interface. But what attributes make a good icon?



Personally, I tend to prefer icons that stand out visually. I'm fond of the icon for Notational Velocity, not because it's attractive but because it looks completely different to every other icon (very few icons use lettering, and none of them in quite the same jarring manner as NV does).



Spotlaser.png



One problem people have commented on in the past is the prevalence of 'blue circles' - it's hard to pick out apps in a crowded Dock when all the icons are round-ish and blue-ish. For this reason, I'm also keen on icons that deliberately adopt brighter, more visible colors and unusual shapes. One I spotted (and liked) recently was the icon for Spotlaser, very distinctive.



But I'm not a designer. So I thought I'd ask a few professionals - people who know a thing or two about icons - for their thoughts.



Jon Hicks, creator of the Firefox icon (among others), said:



"That's a really hard one to answer, but I guess it all comes down to simplicity that can work at small sizes, and still have scope for detail at large sizes."



He went on: "My favourite application icon has to be Transmit by Panic. While it's a very detailed icon, with subtle shading and form, its still an instantly recognisable Yellow Truck, no matter what size, 128px or 16px."



docktopus.gif



How about Jasper Hauser, creator of the Camino icon? He summed things up like this:



"Basically there are two aspects that are the base of a good icon: 1) shape, and 2) use of color. If you look at the Appzapper icon you will see that it 1) has a original shape, and 2) uses irregular colors and an irregular color combination. Doing a blue circle will not stand out."




12 Comments

Small Paul
2006-07-24 03:10:38
The commentaries on The Simpsons DVDs (why yes, I do a lot of high-brow,in-depth research for all my comments) mention that they designed their characters to be immediately recognisable in silhouette, which is where shape comes in.


I notice no-one seemed to mention that the unique shape and colour should also resonate with what the application does, or what it's like. I think Apple's good at that with it's iLife applications (at least the ones I have open at the moment): iTunes is a CD and some musical notes, and iPhoto is a (very pretty) photo with a camera in front of it.

Zac
2006-07-24 06:15:19
I agree with Paul. I think one important feature of an icon (where possible) is to be immediately recognizable without prior experience. For example, while the Address Book icon pretty much immediately suggests an Address Book (and is a unique shape and color), Safari's icon does nothing to suggest web browsing (and is a blue circle). I don't think it is always possible to create an icon that is suggestive of the program's function (what sort of icon would suggest web browsing?) and it is a feature that is more useful for totally new users than experienced pros (we all know Safari is the blue compass), but I still think that it is an important feature to strive for in an icon whenever possible. Even for more experienced users, having an icon which suggests the purpose of a program makes it easier to recognize.
JamesG
2006-07-24 09:02:09
I do think it's important to blend an icon's design with function, not just for the sake of recognition, but for bonding the user with the program as well. For example, one of my favorites is the Illustrator 10 icon of the Venus. It's a creative app, and the icon is a reminder of it's creative influences.


We are in agreement that Safari's icon is about the worst there is. I am scanning my dock for more well designed icons and it is a sad state of affairs.


Firefox and Thunderbird are certainly setting a new standard (but I don't know what on Earth they were thinking when they came up with the name SeaMonkey instead of Mozilla).

Mitch Engleman
2006-07-24 09:35:51
Icons I like:


Transmit
Cyberduck
Calendar
iTunes
MS Word & Excel
Finder
Taco HTML
iClip


I don't prefer iWeb & iPhoto because when they are small, they don't easily stand out. When they are big(ger) they are quite nice.


Chris Meisenzahl
2006-07-24 09:35:53
Great post. ;-)
mystery-man
2006-07-24 11:43:11
really cool post.. icon design can be a real pain in the a$$, making app icon, indicia, favicons keeps me up all night lol


good tips from the pros... damn, being paid for icons must be cool and hard

Oyvind
2006-07-24 12:33:00
I like the icons of DevonThink and DevonFind a lot. They're unique, have great colors, lots of detail, and stand out in the dock.
Flemming Rasmussen
2006-07-24 12:58:22
Great little article... I personally design for a living and icon design has been some of my most exciting and huge assignments (have done more than 1000 icons for Microsoft apps.). Often I experience that doing the main application icon is harder than icons inside the app. But the challenges in icon design are fun. But please Adobe! Remake your CS (both cs1 and 2) icons. I don't think the difference in the icons for Photoshop, Indesign and Illustrator work very well.
Josué
2006-07-24 15:35:46
I have 4 icons next to each other: Firefox, Safari, Mail, and NetNewsWire. All four are blue and three of them are circular. It seems that They lose distinction from each other.


I like it when an icon is very strong on it's own, such as the iLife suite. The adobe suite kills me with those white boxes. It takes up too much real estate to make the pretty white space rather than differentiating the icons from each other.

TJ
2006-08-01 18:21:15
I designed this icon a while ago, for a client... They never used it, and I never got any real feedback why not (except for some flowershop related mumble).
Please let me know what you think about it... or if you want to buy it? ;)
achtur
2006-08-02 12:07:06
I LOVE ICONS! I have over 24.000 on my own ! Yes, maybe I'm a little obsessed...


I can tell my favourite ones:


Cleaning the attic & Lost (www.mixthepix)


Breakfast & body care (www.rad-e8.com)


Fish'n'chyps & New Metaphor (www.iconmaster.com/art)


Doomed (www.pixelgirlpresents.com/icons.php?page=6&cat=mac)


Papéis by Yoshihiro K. (http://homepage.mac.com/chilly/index2.html)


Goth System (http://blackintosh.at.tf/)


Eat me! They have open/drop state (www.dlanham.com)


Futurama by Gedeon Maheux (www.iconfactory.com)


...among others. I could spend all night like this, but I won't. :P


Nice post! I didn't know who was the Firefox icon's creator (not even Camino's) !

The Substitute
2006-08-04 08:59:04
I think if you took your icon out of the bubble it would be better.


I always equated good icons to good marketing: succesful brands have a logo, shape, or image that encompasses the product in it's image (think about the Coke bottle, or the 20th Century Fox logo, the old AT&T symbol, etc.). Good icons do the same thing, they use an image to trigger a response and can actually reinforce the value of a program. If the icon is cool, you have a positive reaction to opening the program, which can affect how you think about the program.