Mac Icons Aren't About Pixels, They're About Metaphor
Draw less, and users can put themselves into the icon. The 16×16 black-and-white constraint isn't a design flaw—it's the constraint that forces good ideas.
The video won't play here. Listen to the audio instead:
The argument · tap a timestamp to hear it
The hard part of design is the idea; the form follows
The opening gives the methodology: Paul Rand told Susan Kare that design should be 'meaningful and memorable,' and the key to achieving that is to first have a good idea—the form then follows naturally. Susan says she didn't come from a computer background; before joining Apple she was in Arkansas welding a life-size wild boar sculpture. Precisely because she had no baggage about pixels or graphics, she treated icons as a communication problem. She stresses that Paul Rand's words still ring true in the context of today's AI products.
— Susan KareConstraints aren't the enemy of creativity; they're its precondition
Back then, the Macintosh icon spec was only 16×16 pixels, black and white. Susan Kare's attitude: constraints are not the opposite of creativity—first recognize the constraints, then get excited about them, rather than complaining that you don't have a thousand colors. To keep text from looking jagged in such a small grid, she used horizontal, vertical, and 45-degree diagonal lines to tidy up the letterforms. The fewer pixels, the more you're forced to reduce an object to just the bit that remains recognizable.
— Susan KareProportional letters made the Mac's text far better looking
At the time, text on many devices was monospaced: M was squeezed, I was stretched. The Mac was one of the few machines that could do proportional fonts, where each letter takes width according to its own shape, so she immediately saw that 'this looks much better.' She designed Chicago at 9 pixels high for the system, and made New York and Geneva along the lines of Times and Helvetica. The original names came from small towns near Philadelphia where she and Andy had gone to high school; Steve Jobs saw them and said: city names aren't bad, but at least use world-class city names.
— Susan KareThe more detailed the icon, the less users can enter it
She uses Scott McCloud's theory of comics to explain why icons can't be fully drawn: the more details a face has, the more it looks like a specific person; drawn minimally, each user can project their own expression onto it. A pencil is similar: a simple pencil can represent 'writing,' while a metallic pencil with highlights is a specific model that not everyone uses. She believes an icon only needs one or two prominent features, just like the two children on a school crossing sign don't need plaid lunch boxes or shoelaces.
— Susan KareDrawing the physical product into an icon guarantees obsolescence
When making the ImageWriter printer icon, she drew realistic details like perforated paper because that's what the printer actually looked like; but in hindsight she thinks 'too much detail' was a mistake—a simpler version would have let the symbol live longer. The 3.5-inch floppy disk as the 'save' icon is the same lesson: even a universal physical product becomes obsolete. Her alternative is to use metaphor and draw only enough detail to be understood.
— Susan KareVirtual gifts sell on cuteness, not price
She did one-dollar virtual gifts for Facebook: a new gift went on sale every midnight, and within about 15 minutes you could tell from sales whether it would be a hit. Susan originally thought drawing expensive items like diamond earrings or a Rolex would make spending $1 feel worthwhile, but the real pattern was that cute beats everything: hearts, teddy bears, and kiss marks were the best sellers, and limited-edition penguins sold out every time. Buying a laugh or an 'aww' is more immediate than the fantasy of owning something expensive.
— Susan KareGood designers don't pitch; they quote one price
Steve Jobs initially wanted a competition for the NeXT logo: invite five firms or five people, pay each $15,000, and continue with the winner. Paul Rand said instead: you will pay me $100,000, I will make one logo, and you will like it. And that's exactly what happened. Rand opposed spending a lot of money to turn a random, unrelated symbol into a brand; he preferred to work on the brand name itself—just as he put NeXT in a box, and gave UPS a logo his daughter immediately said was 'a gift.'
— Susan KareBringing only one option to the boss forces a no
Andy Hertzfeld taught her how to present options to Steve Jobs: don't bring just one thing, because with only one option he can only say he doesn't like it, which might push you to go back and do better; bring several options so he can engage, point out that one is bad, and still pick one. She treats this as a general method for showing creative work to decision-makers—leave room for judgment, and don't let a single piece of feedback become a total rejection.
— Susan KareIn their own words · checked verbatim
always focus on making things meaningful and memorable. And I think the heart of that is have a good idea. And then the form will follow.
Susan Kare1:05
You can be creative, but it's good to understand what the constraints are and then be excited about that, as opposed to being upset that you don't have a thousand colors.
Susan Kare7:28
there's not a technical reason that they couldn't have plaid lunch boxes and shoelaces or be singing a song, but it would probably be more distracting and just take away from that instant recognition that you're aiming for.
Susan Kare18:04
it kind of looks like a four leaf clover. That's sort of lucky. And it kind of looks like a clover leaf highway, which might be a way to get somewhere fast.
Susan Kare23:12
what I learned was that cute trumped everything.
Susan Kare32:59
you will pay me $100,000. I will do one logo and you will like it.
Susan Kare38:24
don't show him one thing. Because he'll say he doesn't like it. Because it maybe forces you to go try and do it again and be better.
Susan Kare48:58
Figures
| Macintosh icon canvas | 16×16 pixels, black and white | 7:28 |
| Chicago font cap height | 9 pixels | 8:32 |
| Icon editor preview resolution | 72 dpi | 12:52 |
| Boot graphic canvas (128K Macintosh) | 32×32 pixels | 15:01 |
| Facebook virtual gift price | $1 | 31:52 |
| Window to judge a new gift's popularity | about 15 minutes after launch | 32:59 |
Glossary
- iconographer
- Susan's self-described job title; treating 'drawing icons' as a craft of communication.
- bitmap graphics
- Images stored as a grid of pixels; early Mac icons were 16×16 bitmaps.
- proportionally spaced fonts
- Characters take different widths according to their own shapes, rather than each being the same width.
- cap height
- In type metrics, the distance from the baseline to the top of capital letters.
- Letraset
- A dry-transfer lettering tool used to apply letters to paper before computer typesetting.
- desktop metaphor
- The metaphorical system that uses desktop objects like files, folders, and trash can to convey computer operations.
How to listen
Designers agonizing over a single icon in an interface, and founders who want to understand Steve Jobs– and Paul Rand–style creative pricing.
The portfolio review section (approx. 25:20–37:16) can be skipped; the core is at the beginning, 17:04, and 38:24.