The Startup
Published in

The Startup

3 Classic Icon Families

And why they matter

More in the iconography series:Foundations of Iconography7 Principles of Icon Design5 Ways to Create a Settings IconIcon Grids & Keylines DemystifiedPixel-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.

My reproduction of the boxing, soccer/football, and volleyball icons from the 1964 Olympics

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.

My reproduction of the judo icons from Munich 1972 (left) and Beijing 2008 (right)

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 on banners in Tokyo, 1964 (Source: The Olympic Pictograms, A Long and Fascinating Story)

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.

The NYC subway, 1968 (Source: Book Review: “Helvetica and the New York City Subway System”)

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

Spread from the NYCTA Graphic Standards Manual (Source: Standards Manual)
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.

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.

The 3 train at Wall Street (Source: Photo by Andre Benz on Unsplash)

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.

My recreation of a 1981 command line interface (Reference: IBM PC DOS screenshot)

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.

Xerox Star, introduced 1981 (Source: 40 years of icons: the evolution of the modern computer interface)

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.

My reproductions of a few original Macintosh icons
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.

Kare’s icons in MacPaint’s drawing palette (Source: Screenshot from a MacPaint emulator)

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:

My reproduction of the Macintosh cherry bomb in an error dialog

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

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Creating with a Design System in Sketch: Part Five [Tutorial]

How to Find New Ideas with Backwards Ideation

How to create a collaborative UX workflow for research

Cool Cats Drawing Competition

What’s your [customers’] problem?

There’s more than meets the eye to web accessibility

Risk Management Strategy in QMS

The subler — advantages, disadvantages, benefits

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
Helena Zhang

Helena Zhang

Designer/writer. Brand, product, systems. • helenazhang.comdribbble.com/minoraxisphosphoricons.com

More from Medium

Dark Pattern: How Youtube Makes Sure You Don’t Always “Skip Ad”

YouTube’s Skip Ad button is a design dark pattern

Three steps to slice a mesh with ThreeJS

Apple’s Accessibility features help interact with the world better.

Localization basics: What are t9n, l10n, i18n, g11n? New secret language?