A potted history of icons

Let’s start the journey from the very beginning and look at the development of a symbolic language to complement our written one, how previous works have influenced modern icon design, and how the meaning of icons has evolved from religious art to encompass software. As part of the journey, I’ll also delve into how I became involved with designing icons as early as 1984.

Long before cultures developed any form of written language, as far back as 100,000 years ago, humans have communicated using symbols and pictures. These images — painted on to cave walls (pictographs) or carved into rock (petroglyphs) — were not only art. They were made to record events and tell stories about food and shelter, using symbols to convey repeated themes. The simplest icon of all, the circle, was used to represent the sun but developed over time to be more abstract, conveying concepts of heat and light instead.

While the first sun symbol is a pictogram (a picture of a thing), later versions are known as ideograms because they convey the idea of heat or light, a more abstract concept. A similar kind of representative imagery shows up later (5,000 years ago) in other places such as Chinese writing and, in particular, ancient Egyptian hieroglyphics. The hieroglyphic for house is based on a floor plan, while the glyph for water is even more obvious.

Egyptian hieroglyphs for house and water

For many cultures this has been the case until fairly recently. In Britain, there is no surviving evidence of any written language until the Romans brought us Latin just 2,000 years ago.

In addition to pictograms representing an object and ideograms conveying an abstract idea or concept, there is a third type of icon. In his Symbol Sourcebook, Henry Dreyfuss describes this kind as ‘arbitrary’. These are symbols that have been invented but do not relate to a physical object: their meaning has to be learned rather than deduced. When German mathematician Johannes Widmann published his book of arithmetic in 1489, it was the first time we ever saw the + (plus) and — (minus) signs in print. Their meaning could not be determined by examination alone: we only understand them because we have acquired that knowledge.

In the same way, during the Great Plague of England in 1665–66, the front doors of infected houses were painted with a large red cross by plague doctors to warn others away. We still use a red X as a warning sign today.

From the 1880s until the 1940s, hobos who rode the rails across the United States would leave cryptic symbols on fences, footpaths, street signs and railway stops to help other hobos find their way. These would provide vital information such as where they could rest or eat, how hospitable the locals were, local law enforcement status and the best approaches for a handout. Whenever a hobo arrived in a new town, they would seek out these signs first to see if a stopover would even be worth the risk. In a sense, they were reviving the spirit of the early cave painters.

Hobo signs

Up to this point, icons were generally still localised efforts, which communicated information within a culture, and not necessarily outside of it. That changed with the groundbreaking work of Viennese philosopher Otto Neurath in the early 1920s and 1930s. Influenced by his love of Egyptian hieroglyphics, Neurath believed that the world needed a unified, international visual language to support (but not replace) each of the world’s spoken languages. Known as Isotype (International System of Typographic Picture Education), he and his team of artists headed by Gerd Arntz developed a system of pictograms, which could be combined with other standard elements such as a triangle with red border, to add more meaning and variations.

Isotype linocut and print, Gerd Arntz, 1930s
Archive Gemeentemuseum, The Hague, Netherlands
Photo: Max Bruinsma

Isotype symbols, Gerd Arntz, 1930s
Archive Gemeentemuseum, The Hague, Netherlands
www.gerdarntz.org

When Neurath died suddenly at the end of 1945, his work was carried on by his wife Marie, and is now archived at the University of Reading. Their work wouldn’t look at all out of place in graphic design today, and you can clearly see the origins of modern infographics and road signage in his creations.

Pages from the Isotype ‘Picture Dictionary’
Otto and Marie Neurath Isotype Collection, University of Reading

Symbols of Pictorial Statistics chart
Otto and Marie Neurath Isotype Collection, University of Reading

Gerd Arntz can be credited with being the originator of the pictogram style we still use today. In particular, the influence of Neurath’s Isotype work can be seen two decades later, in the pictograms designed to represent each sport for each of the Olympic Games from 1964 to 1972. The team created a clean geometric identity for the Games, which itself is a design classic, and the pictograms typify the cool, precise and logical approach they took.

Symbols from the 1972 (left), 1968 (right) and 1964 (far right) Olympic Games

Symbols from the 1964 Olympic Games

No line is wasted in these symbols: everything is pared down to its absolute minimum.

However, when we think of icons, we probably most commonly think of their use on computers. The first computer icons appeared as early as 1974 on the Xerox Alto, a machine named after the Palo Alto Research Center (PARC) where it was developed. While much of its interface was still text-based, it had a mouse (and therefore a pointer) and a painting package containing the familiar icon-based tools window that we still use today.

The Xerox 8010 (aka, Star) Workstation. © PARC, a Xerox company.

It was a research tool intended for organisations like universities, and wasn’t available to purchase by the public. It was no less influential despite this, inspiring the Xerox Star Workstation that followed it in 1981, and the first personal computer with a graphical user interface — the Apple Lisa in 1983.

It was after the creation of the Alto that the term icon was coined in a PhD thesis by David Canfield Smith, a computer science graduate student at Stanford University in California. Alan Kay from the Alto team at PARC suggested that he look at using the graphics possibilities of the Alto to help people program.

“Smith reused the term from the Russian Orthodox church, where an icon is more than an image, because it embodies properties of what it represents: a Russian icon of a saint is holy and is to be venerated. Smith’s computer icons contained all the properties of the programs and data represented, and therefore could be linked or acted on as if they were the real thing.” Spectrum, September 1989, pp. 46–51

The word itself comes from Greek εἰκών (eikōn), which has two meanings: likeness or image, both of which apply to icons.

While much of the Alto’s UI was still text-based, the Star used icons much more widely. It was the first computer to have a GUI and it also started the now familiar office metaphor of desktop, files, folders and wastebaskets that we still use today. Norm Cox was responsible for designing the icon set, and it’s here that we have the first appearance of the document icon with folded top-right corner. His style used rounded rectangles with distinctive heavy strokes to give contrast.

Working with 1-bit depth (either black or white pixels), Cox found ways to make the best of those bitmap limitations. By making background patterns stepped, the effect of ragged edges on the icons could be eliminated.

“Many users, for example, said they lost time having to read through the lists of commands shown on the screen, so Xerox has substituted “icons” — or command symbols. If you want Star to file something, roll the mouse and move the cursor to a picture of an appropriately labeled file folder; for storing deleted material, point to the picture of a wastebasket.” ‘Xerox xooms towards the office of the future’, Fortune, 18 May 1981, pp. 44–52

How I started

Many icon designers trace the beginnings of their interest back to making sprites for video games and I’m no different. Back in 1984 our family got an Acorn Electron, a home computer based on the BBC Micro, with the added benefit of being a bit cheaper! Laughable now, but connecting it to the TV was magical: one of those moments when you feel like the future has finally arrived.

My first experience of coding was with BBC Basic, creating 8×8 pixel sprites for simple games like Bugzap. As my coding skills didn’t really get much further than: 10 PRINT "HELLO",20 "GOTO10", I relied on magazines that would print the code for simple games, which I would then slavishly retype. This provided the opportunity to replace the sprites with my own designs, so that a simple driving game could become an X-Wing doing a trench run, for example.

The first stage was to draw the artwork in the 8×8 grid supplied in the back of the Electron manual (in pencil, of course — this would get erased and reused many times). This was then converted into a VDU code by adding up the values of the columns in each row, as seen below.

When I left school to study illustration and design at art college towards the end of the 1980s, I had my first experience of using a computer with a GUI: in this case, the Mac. The college was kitted out with now legendary Mac Classics, and I became aware of the groundbreaking icon work Susan Kare had done for Mac System Software 1.0.

Interview

Susan Kare’s original icons for the Macintosh System Software 1.0

Quite simply, when I think of icons I think of Susan Kare. Hailed by the Museum of Modern Art in New York as “a pioneering and influential computer iconographer” she developed the original icons for Macintosh System Software 1.0. Everything I know and love about icons is embodied in that work from 1984, and it took until 2001 before the Mac OS icons progressed to any significant degree. Her famous animated wristwatch icon to let the user know a task is in progress is still used today in Adobe Photoshop. I was lucky enough to get the chance to interview Susan for this book.

First of all, many thanks for agreeing to be a part of The Icon Handbook! I particularly wanted to feature the original Mac icons as they encapsulate everything that icons should be and are, of course, design classics.

You’re known for the original Mac icons but I’ve heard that your background up to that point was in sculpture. How did the project with Apple come about?

I had the opportunity to join the Macintosh project thanks to my high school friend, Andy Hertzfeld, who was a software lead. He needed some bitmaps so encouraged me to develop some early images on graph paper.

As it was such a new discipline at that point, was there any previous skill or experience that helped you? Was the lack of previous work in that area a help or a hindrance?

I had a fair amount of experience in traditional graphic design so was able to build on that, plus common sense. Yes, a new medium but in another sense there is nothing new under the sun. I joke that if you can do needlepoint, you can design bitmap graphics.

What tools did you use to design the original Mac icons other than sketching? Did you have a graphical editor to work with?

Andy Hertzfeld wrote a bitmap editor for me that displayed the icon grid at 100% and enlarged so I could see how everything looked. It also automatically generated the hex equivalent. Not too many tools initially, but it worked really well.

You also designed the Apple Command icon that is now an accepted convention. How did you come up with a symbol for such an abstract concept?

I leafed through a book of symbols, and came across a similar cloverleaf, which was identified as an image used on signs in Swedish campgrounds to mean ‘interesting feature’. This seemed appropriate, and would lend itself to being recreated in a limited number of pixels, plus fit well on a squarish key cap.

Years later, I learned that it is meant to be a castle, seen from above.

Finally, what do you find are the differences (if any) designing icons now compared to the original Mac icons?

Obviously, more pixels and more colours affords a greater range of stylistic options but, conceptually, the design problem is similar — what image can you create in a limited piece of screen real estate to communicate a particular idea at a glance?

It was a terrific opportunity to work on the original Macintosh with so many talented colleagues.

Continuing my journey

When Mac OS 8 arrived in 1997, I started drawing icons again, using ResEdit to play around with the system icons. I was no longer limited to an 8×8 pixel size with limited colour palette: 32 pixels allowed so much more space for artwork, and with a wider range of colours.

My interest up to this point was still restricted to merely fiddling around for a bit of fun, but when I went freelance in 2002 and bought my first Mac with OS X 10.1, my interest in icon design began in earnest. Icons could now be as large as 128 pixels, allowing for a much greater level of detail, as part of a much richer UI. (This progress hasn’t halted either, and now we have Mac OS X Lion 10.7 which supports icons up to 1,024 pixels in size!) What’s more, esoteric tools like ResEdit were no longer needed, as icons could be created in the graphic editors that I used every day, like Illustrator and Photoshop.

The amount of detail possible also meant the process had become more time-consuming, creating multiple resolutions of the same image for different contexts such as file views and the Dock. It was no less enjoyable for that, though. As I had originally trained in illustration, but had so far followed a graphic design career path, icon design was a welcome return to my earlier skills. I started by creating replacements for the Camino browser’s UI in 2003 and, in particular, its application icon, which I based on the famous Japanese painting The Great Wave by Hokusai.

Looking back now, those early icons were fairly low quality, but I was hooked and all I wanted to do was stop all these print and web design projects and instead draw icons all day.

It was the Great Wave icon for Camino that got the attention of Steven Garrity, who was charged with finding volunteers for a new Mozilla visual identity team to create a new identity for their new browser. Originally called Phoenix and then Firebird, it was eventually given the permanent name of Firefox for its first public release in 2004. We all came up with various ideas, but the fox with a fiery tail we decided on came from Daniel Burka, which was then sketched by Stephen Desroches, before I took it on and rendered it:

Strictly speaking, a firefox is a red panda (without doubt a very cute animal), but the European fox looked bolder and more iconic. The new icon was launched in early 2004, and since then Firefox has become a global brand and the icon has been updated further by the Iconfactory. It was a big leap in profile for me, and has allowed me to follow icon design projects ever since, for clients such as Skype, Opera and Linotype.

Icons as child’s play

When our local primary school decided to run a creative arts month in 2007, parents whose profession was in the arts were invited to come in and run a workshop, demonstrating their skill and giving the children a chance to have a go. I decided that I could do one for icon design, although I would have to explain what icons were and why we need them. The children were fascinated to come to terms with the fact that icons are such an integral part of all their lives, even though they didn’t realise it or know what they were called beforehand.

I started by handing out sheets with a 16×16 grid and asked them to plan what they would do for their first icon. While they could design anything they liked, most followed the suggestion of trying to sum themselves up in a icon, by showing their interests, for instance.

We then used a free, open source application called LiquidIcon to create a simple .ico using the basic Windows colour palette. It was an ideal application to use, with a very simple grid interface that echoed the handout sheets they’d been working on.

The results were interesting. Most weren’t interested at the start but, once they got going, everyone was engaged. The thing I noticed most was that there was a significant portion who understood how small the final icon would be, and how simple it needed to be.

The principles we’ll explore in this book are the same — keep icons simple, clean and recognisable.