3 Classic Icon Families
And why they matter
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design
Icons communicate so much with so little. When they’re successful we hardly notice them—a pedestrian sign, a back button, a notification bell. I’d like to examine a few enduring examples that have not only solved the design problem at hand but further left an imprint on the way we approach design as a discipline.
It has been a joy to redraw the icons for this article.
Olympics Games Event Icons
Tokyo, 1964. People all over the world come together for the first Olympics in Asia. Here more than ever, a communication system was needed to bridge language barriers.
To answer the challenge, designers Masasa Katzumie and Yoshiro Yamashita developed a standardized system of 20 event icons, as well as 39 general information icons. This was by no means the first time Olympics events were represented visually, but prior icons were more illustrative than schematic.
Katzumie and Yamashita represented each event using negative space and simple shapes, the circle motif reminiscent of the rising sun of the Japanese flag. It’s wonderful how much movement is conveyed, and how, as viewers, we are able to complete the image.
Since that pivotal moment, every Olympics Games has iterated on the icon system, each applying a new style to reflect the culture of the host city. The original icons from 1964 have been refreshed and animated for the now postponed 2020 Tokyo Olympics.
Here are the judo icons from Munich 1972 and Beijing 2008 side by side. Munich’s icon follows an orderly, isometric grid while the organic treatment from Beijing references loose, wavy lines from early Chinese Seal script. So wildly different, and so appropriate to each context.
Olympics event icons accomplish a few goals at once: they communicate to an international audience, celebrate the host city, and capture the dynamic spirit of each sport—all in a few effortless lines and shapes.
For a full catalog of Olympics pictograms, see Olympics Games Pictogram | Design Focus (short video) and The Sports Pictograms of the Olympic Summer Games from Tokyo 1964 to Rio 2016 (PDF).
NYC Subway Transit Icons
Next stop, New York City. The New York subway system in the mid-1900s was a confusing place. All kinds of signage crowded the underground “labyrinth” (Paul Shaw)—mosaic, porcelain-enamel, and hand-painted signs conveyed both directional and informational content in many typefaces, in no particular order of placement. Without a clear visual system, it was hard to find your way.
In 1966, with momentum building from recent transit system projects from the London Underground, Metropolitana Milanese, and Boston “T,” the NYC Transit Authority (NYCTA or TA) brought on Robert Noorda and Massimo Vignelli to create order from the chaos.
Through detailed observation and analysis of passenger behavior, the two arrived at a design language that distilled the tangled system to an “almost Kindergarten-level clarity” (Michael Bierut).
Icons play a major role in this design system. Chunky arrows in 45° rotations communicated direction; encircled numbers and letters (“discs” or “bullets”) represented individual subway lines. Trunk lines were grouped together through color-coding. For example, the red 1, 2, 3 lines run along 7th Avenue.
The design standards Noorda and Vignelli put forth demonstrate the clarity a design system can bring. Though many modifications have been made since its inception (natural for any living design system), the DNA of the original specification survives to this day. It has risen to become an iconic representation of New York City.
For more historical background, read The (Mostly) True Story of Helvetica and the New York City Subway. Paul Shaw details the long process of overhauling the subway’s signage, which started in 1966 and finally permeated most of the subway by the end of the 1980s. The creative, technical, economic, and political challenges Noorda and Vignelli faced as designers are all too familiar.
If you’d like to own a copy of the specification book, Jesse Reed and Hamish Smyth have published a beautiful reissue of the 1970 New York City Transit Authority Graphics Standards Manual and offer a cover to cover digital capture of an original copy.
Original Macintosh Icons
Our last destination is Silicon Valley, the birthplace of the personal computer. In the early days, operating one of these boxy machines was daunting. Command-line interfaces were powerful, but difficult to learn.
To make computers more accessible to everyone, Xerox pioneered a graphical user interface (GUI) with the Xerox Alto in 1973, allowing users to directly manipulate objects on screen. The desktop metaphor took root (files, folders, printers) and the patterns of interaction that are now second-nature to us (scroll bars, menus, buttons) started to crystallize.
During this exciting time, Apple popularized the GUI with the help of designer Susan Kare. From 1983 to 1984, Kare created the icons for the first Macintosh computer to represent documents, programs, and actions, and give feedback to the user.
She drew a wristwatch, a smiley Mac, a command pretzel, a hand putting pen to paper, among many other images. The paint bucket playfully tilts and spills.
These icons are a testament to what can be accomplished under very tight constraints. Black and white, 32 by 32 pixels. At the time, there were no digital design tools to work with so Kare designed icons on graph paper at first, then later on the computer by turning pixels on and off. Today we have millions of colors and automated design software like Sketch and Figma.
What Kare brought to digital interfaces was a quirk and warmth that humanized the machine. Kare’s early icons set precedents for many of the metaphors in use today and influenced our approach to user interfaces. In modern practice, we think a lot about a user’s emotional experience in addition to their ability to complete a task.
For more on the first computer GUIs:
- Susan Kare talks about her work on Computer Chronicles (1984) and at the EG8 Conference (2014)
- The creators of Xerox Alto demo its interface 40 years after release: CHM Live | Yesterday’s Computer of Tomorrow: The Xerox Alto (2017)
- David Canfield Smith defines icons in computing and recounts the origin story: Lecture 6 Guest Lecture (David Canfield Smith) (2014)
- Widely acknowledged predecessors to the GUI in personal computers include the oN-Line System (NLS, 1968) and Sketchpad (1963)
Closing Thoughts
Icons cross language barriers, provide clarity, make technology accessible, and give our interactions life. I’m excited to see where we’ll take them next.
References
- An overview of event pictograms at the Olympics: Olympics Games Pictogram | Design Focus
- A catalog of Olympics event pictograms from 1964 to 2016: The Sports Pictograms of the Olympic Summer Games from Tokyo 1964 to Rio 2016.
- Another catalog of Olympics icons in a virtual museum: Olympic Games Museum
- Michael Bierut talks about the NYCTA Graphic Standards Manual: NYCTA Graphic Standards Manual by Unimark
- In-depth history of the NYCTA design system: The (Mostly) True Story of Helvetica and the New York City Subway
- Susan Kare recounts her experience designing at Apple: Interview with Susan Kare
- Susan Kare talks about her work on Computer Chronicles (1984) and at the EG8 Conference (2014)
- The creators of Xerox Alto demo its interface 40 years after release: CHM Live | Yesterday’s Computer of Tomorrow: The Xerox Alto (2017)
- David Canfield Smith defines icons in computing and recounts the origin story: Lecture 6 Guest Lecture (David Canfield Smith) (2014)
🎶 Written to the sounds of: Fleetwood Mac
🙏 Thanks to: Toby Fried, Tate Chow, and Monica Chang
