3 Classic Icon Families

And why they matter

Helena Zhang
Jun 1 · 7 min read

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).

Image for post
Image for post
New York Subway Guide from the 1970s (Source: Standards Manual)

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.

Image for post
Image for post
My reproduction of NYC subway signage

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.

Image for post
Image for post
My reproduction of the paint bucket

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:

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


🎶 Written to the sounds of: Fleetwood Mac

🙏 Thanks to: Toby Fried, Tate Chow, and Monica Chang

The Startup

Medium's largest active publication, followed by +683K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Helena Zhang

Written by

Designer/writer. Brand, product, systems. helenazhang.com https://dribbble.com/minoraxis https://www.linkedin.com/in/zhanghelena/

The Startup

Medium's largest active publication, followed by +683K people. Follow to join our community.

Helena Zhang

Written by

Designer/writer. Brand, product, systems. helenazhang.com https://dribbble.com/minoraxis https://www.linkedin.com/in/zhanghelena/

The Startup

Medium's largest active publication, followed by +683K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store