Back to Y Combinator

Susan Kare: How I Designed the Original Apple Mac Icons

Y CombinatorAugust 14, 202651m
In a Nutshell

Susan Kare created the original Mac's 16x16 pixel icons and fonts by embracing technical constraints as creative opportunities, designing instantly recognizable symbols like the Happy Mac, command key cloverleaf, and Chicago font that enabled intuitive computing without manuals. Her approach prioritized universal simplicity over detail—using minimal faces and silhouettes so users could project themselves onto icons—and iterated through testing after discovering the bomb error icon frightened users into thinking their computer might explode. The work established foundational principles for pixel art, UI design, and visual communication that influenced decades of interface development.

AI-Generated Notes

These notes were generated by AI and may contain inaccuracies.

Susan Kare worked as an iconographer and designer on numerous tech projects, with her early experience at Apple on the Macintosh group serving as a foundational project. Paul Rand, the celebrated graphic designer who created the UPS and IBM logos, advised her to focus on making things meaningful and memorable, emphasizing that a good idea should come first and form would follow.

Before joining Apple, Kare was welding a life-size razorback hog for a museum in Arkansas, working alone in her garage. Though she enjoyed this work, it was lonely, and she sought opportunities to work with a team. Her high school friend Andy Hertzfeld, a system software programmer at Apple, recognized her art background from yearbook work and contacted her about creating images for a new computer being developed.

Hertzfeld showed her the Macintosh display without a case and asked if she would interview to work on small symbols and typefaces. Kare had some typographical experience from the Franklin Institute Science Museum in Philadelphia, where she used a machine to make exhibit labels and was skilled at rub-down type with proper kerning. Despite having a PhD in art history, she prepared for the interview by checking out typography books and font sample books from the Palo Alto library to appear knowledgeable. Hertzfeld suggested she create bitmap graphics examples using graph paper, and she made various designs including a boot and paper pun, along with other random elements that later influenced the software.

Kare was hired despite no questions about font design during the interview. The notebook containing her early icons from the interview is now in the permanent collection of MoMA. On her first day at Apple, she was shown the screen displaying 5.25-inch floppy disks with roundrects that could be clicked and dragged, which she found magical. The team changed "do it" to "OK" because "do it" was considered off-color and could be misread as adult content.

The Macintosh team aimed to create a computer that anyone could use without needing a manual, making it friendly and understandable. The project had specific constraints: 16 by 16 pixels in black and white. Kare embraced these limitations rather than being restricted by them, noting that creativity can flourish within constraints. Early images created included a lasso for selecting irregular regions and various art tools.

The first font designed was Chicago, 9 pixels tall with cap height, using horizontals, verticals, and 45-degree angles to create cleaner typography compared to existing jagged displays. The team was fortunate to implement proportionally spaced fonts, which improved readability compared to monospaced alternatives where characters like M appeared squished and I appeared wide. Chicago was used in title bars and on the calculator, which Kare later realized was essentially designing the first iPod interface. Other fonts shipped included a monospace font, plus New York (Times Roman style) and Geneva (Helvetica style).

Fonts were initially given names of towns along the local rail line from Philadelphia suburbs into the city. Steve Jobs suggested using world-class city names instead, resulting in New York and Geneva replacing Poli, Winwood, and Rosemont. A font called Ransom was designed with cut-out newspaper letter aesthetics, and city names were chosen for all fonts.

Bill Atkinson, who wrote MacPaint, collaborated on icons and patterns and developed an early scanner used to create the geisha image from a woodcut owned by Steve Jobs. A control panel with animation was created to communicate settings changes without text, ensuring international compatibility. Andy Hertzfeld wrote an icon editor that allowed toggling individual bits and viewing both enlarged and actual-size images at 72 dpi, automatically generating hex code for icons.

Kare created 32 by 32 pixel portraits of colleagues from life, as photo input wasn't available. The Happy Mac icon was designed for the 128K Macintosh boot screen to show the computer was functioning during the lengthy startup process. The design drew from a button she received at age 14, reflecting her preference for smiling and positive imagery.

Kare referenced Scott McCloud's book "Understanding Comics" to explain that faces with less detail allow viewers to project themselves onto the image, making it more universal. This principle extends to other icons - a simple pencil drawing can represent writing better than a detailed chrome pen with reflection, as the simpler version is more universally relatable. Street signs exemplify this approach, using simple silhouettes rather than detailed figures that might distract from instant recognition.

An unhappy Mac icon was created as an alternative for system problems, depicted as sick or hungover. A bomb icon was designed for total system failure, inspired by Bugs Bunny cartoons, under the assumption these error states would rarely be seen. However, a caller once contacted Apple worried that her computer would explode upon seeing the bomb icon. This experience reinforced the importance of iteration and testing.

MacPaint was the first application icon created, designed to appear active as a process, paired with resembling documents. The system used a verb-noun approach for icons. Alert icons used cropped figures without specifying gender, age, or other details. A watch cursor replaced the traditional hourglass timer. The print icon showed an ImageWriter with sprocket holes, though this level of detail proved problematic for longevity.

Originally, the Apple logo was planned for keyboard shortcuts, but Steve Jobs rejected this, calling it an "Apple farm" and stating the logo was too precious. The team needed a command key symbol, and Kare found a symbol called a "feature" in a book that resembled both a four-leaf clover and a cloverleaf highway intersection. This symbol was easy to draw in 16 by 16 pixels and remains on keyboards today. Later, she learned the symbol originates from Borgolm Castle in Sweden, a 1200 AD ruin whose four turrets create the distinctive shape when viewed from above.

Kare noted that hieroglyphics and ancient symbol-making demonstrate that creating symbols on grids has historical precedent. She referenced pixel-like fonts from centuries earlier and mentioned enjoying making grid-based crafts as a child. The 1984 Macintosh included what she considers early emojis, combining pictures with text before texting existed, with some hidden hieroglyphic-style symbols.

For Swatch alarm clock icons, Kare started with literal clocks and progressively made them noisier, more literal, louder, and simpler. Options included travel alarm clocks and alpha-numeric displays. She emphasized that icon design is not an exact science and often benefits from seeing client requests or programmer placeholders before refining.

After Apple, Kare worked on Windows 3.0 for Microsoft, appreciating the ability to use color (16 colors total) for alerts and differentiation, though she avoided garish chessboard-style designs by dithering colors for subtlety. She removed Solitaire from her computer due to addiction. Other projects included General Magic (with hallway and door metaphors, file cabinets, and Rolodexes), Facebook gifts (where cute designs like teddy bears, hearts, and kiss marks outperformed expensive items, and penguins were consistently successful), Pinterest icons with subtle animation, and various logos for companies including stealth startup Mill.com (trash panda logo), Amtrak's The National magazine route maps, Magic Puzzle Company, Pikmin Bloom game, Paradot game, Ledger crypto wallet badges, and a VC firm logo emphasizing outdoor work.

Paul Rand advised that designers don't need many fonts, just the ability to use them well. At NeXT, Kare wanted to hire Rand for the logo design. Steve Jobs initially suggested a contest format with five designers each paid $15,000, but Rand stated he would charge $100,000 for one logo that they would like. This arrangement proceeded successfully, and Kare found it an excellent learning experience.

Paul Rand's design approach heavily influenced Susan Kare's work. She observed the specific fonts Rand used frequently and adopted his color palette, noting that if PMS 354 green was good enough for Rand, it was good enough for her. She continues to reference his books and use his recommended colors. Rand advocated thinking creatively about product names themselves rather than creating arbitrary symbols, using his NEXT logo as an example. He showed an AT&T logo redesign as an example of what not to do when companies spend money creating meaningless symbols. Rand's notable logos include Morning Star with a rising sun and IBM rendered in a pinstriped, businesslike style. He was particularly proud of the UPS logo, which his six-year-old daughter identified as "a present," demonstrating its clear communication of both a shield and package concept.

A futurist named Paul Safo provided a memorable quote about time management: people always think they can complete tasks in an hour when nothing actually takes an hour. This resonated with Kare's experience that projects always require more time than initially estimated, and she learned to build in extra time even when the approach seems clear.

Kare's father directed the Monell Chemical Senses Center in Philadelphia, which studied taste and smell. She introduced him to Paul Rand, who created a logo for Monell. Her father provided realistic rather than cheerful advice based on his experience raising money for the science center. He advised maintaining realistic expectations and not kidding oneself about outcomes, particularly regarding rejection and fundraising challenges.

Daniel Nord, a Swedish-born architect now living in Portugal who worked in London, emphasized making ideas visual rather than discussing them endlessly around tables. His approach aligned with "show don't tell" principles, advocating for actual drawings to communicate concepts effectively.

Jean Pigozzi, introduced through Steve Jobs as an Apple enthusiast, possibly invented the selfie. His father founded the SIMCA car company, providing Pigozzi with the means to pursue his interests. He collected African art and reflected on the Macintosh project as something that happened long ago and was great fun.

A photograph shows Andy Hertzfeld, Bill Atkinson, Bud Tribble, and Steve Jobs with Alan Kay on the right. Kay, now in his 80s, is an accomplished computer scientist. Bud Tribble quoted Kay's principle about user interface design: not everything needs to be at the same level, and nesting allows features to appear progressively, making ease of use seem achievable. Alan Kay expressed surprise and pleasure that proportionally spaced fonts could look good on screen.

Steve Capps, a programmer, collaborated with Kare on creating a pirate flag in response to a company goal about "pirates" versus the status quo. They sewed a black flag, painted a skull and crossbones, and added a striped apple as an eye patch. They climbed onto the Apple roof at night (when security was lax) and flew the flag. This action referenced the company's second goal about being pirates rather than the Navy.

Early Macintosh demonstrations taught important lessons about user testing. Some people could figure out the interface while others couldn't, and positioning the product as "easy to use" could make users feel dumb if they struggled. Steve Jobs gave questionable financial advice about not buying Apple stock, which Kare followed. He also advised that she could either continue as a bit-twiddler making limited money or become a creative director. She did serve as creative director at NeXT and worked with Paul Rand, but ultimately returned to hands-on design work.

Apple's software group culture involved sleeping bags in cubicles, reflecting intense work without work-life balance considerations. Jay Chiat started the Chiat/Day ad agency that Apple used. Kare learned that companies with around 15 people can maintain consensus hiring and alignment, but growth brings both advantages and disadvantages. Andy Hertzfeld advised showing multiple design options to Steve Jobs rather than single solutions, allowing him to participate in the selection process rather than simply rejecting ideas.

Kare's mother provided valuable advice. Evan Sharp and Ben Silbermann, Pinterest founders, shared insights about their approach. Dennis Hwang, who joined Google as a Stanford undergraduate, became a computer scientist and artist. He explained Google's prevailing wisdom about logo treatment: don't alter the logo with different colors or backgrounds until people know it well enough to allow such experimentation.

A friend's father shared the advice that sometimes it's time to move on to the next idea rather than continuing with something that isn't working, though this shouldn't discourage persistence. Kare concluded by thanking Y Combinator for the opportunity and expressing appreciation for the smooth event organization and gracious atmosphere.

Keep Y Combinator in your library

Save the videos and channels worth coming back to, and find them again in one place.