The Evolution of Iconography: How It's Used in Graphic Design

Let’s explore the evolution of iconography and how it has become one of the most visually appealing elements of graphic design.

In the modern world, the written word reigns supreme. We spend our lives reading everything from Twitter to work reports to the ingredients on the side of a cereal box. We constantly tap words into our phones and via computer keyboards, which are, in turn, interpreted by computer languages, then sent halfway around the world and back, so that more words can appear on other people’s screens.

Despite this, humanity is first and foremost a visual species. We rely heavily on visual cues to interpret everything from finding food, mates, and shelter, to more complex behaviors such as parental care and the development of social hierarchies. And it’s easy to see why—humans can interpret visual information 60,000 times faster than text.

It’s unsurprising that as humans developed, our earliest languages were entirely visual. Humans have always had a keen sense of depicting what they see and experience in visual form. As the centuries rolled past, this fascination with representing our surroundings visually has only increased. We’ve become so good at it that we only have to see an icon—a tiny visual snapshot of a concept or thing—and we know exactly what it communicates, often without any supporting information whatsoever.

Today, we explore the evolution of iconography. Learn how it became one of the most enduring methods of communication humans have ever created, as well as one of the most visually appealing elements of graphic design.


What Does It All Mean?

Pictogram Example
A modern example of a social distancing map via pictogram. Image by Lubo Ivanko.

Before we kick off, it’s worth getting a grip on some terminology:

  • Pictograms or pictographs are pictures that closely resemble what they signify. Universally accepted examples include the telephone icon for public phones, the airplane road sign for an upcoming airport, or a picture of a woman on a door representing the women’s restroom.
  • Ideograms are symbols that represent ideas, meaning they don’t closely resemble a tangible object. Therefore, the meanings of ideograms need to be more widely agreed upon to gain universal meaning. For example, an eight on its side represents “infinity” and two horizontal lines next to each other represent “equals.” These are now both universally accepted ideograms.
  • Originally, icon was used solely in Christianity to denote a picture of Christ. However, in more modern parlance, icons are now well-known in the computing world. They appear everywhere—representing functions, features, and even entire applications.

The Before Times

We aren’t going to head all the way back to the Byzantines and their religious icons, otherwise we really would be here all day. Nevertheless, it’s important to go back in history a little, to a time—believe it or not—before computers were invented. You see, as with most things that end up on computers, pictograms and ideograms had a whole off-screen life.

It Started on the Railways

London Subway Map
George Dow was one of the early designers of pictograms. Image by Victor Maschek.

One of the earliest examples of pictogram use in a professional capacity was in 1936, by a fellow named George Dow. Dow was an employee of the London and North Eastern Railway (LNER) and was instrumental in the development of modern transit maps. Dow’s work inspired the London Tube map created by Harry Beck, now a gold standard in map design.

Dow knew that in order for his maps to be successful, they needed to be simple, easily accessible, and instantly understandable. So, he set to work creating a series of pictograms that would denote various services available at each train station. This was revolutionary. Not only did it diminish the need for mountains of words, but it reignited interest in the idea that visuals (or pictograms) could be used to communicate complex ideas.

These pictograms were highly representative, designed using simple, flat diagrams and shapes to denote each service. Although incredibly simplistic-looking (creating these before the advent of computing technology), it required incredible patience and technical understanding to create a consistent family of hand-drawn symbols.

Then It Moved to the Roads

Road Pictograms
With automobiles becoming a staple in the early 20th Century, road pictograms became a necessity. Image by redstone.

By the time Dow was creating his maps, mass production was well underway and the automobile had become a staple of life. All these new drivers hurtling across the landscape required direction in order to ensure their safety on the roads. Thus, the road sign was invented.

Innocuous at first glance, the humble road sign is one of the greatest modern examples of large-scale iconography. Lengthy paragraphs of text are no good when you need to keep your focus on the road. So, every country created a family of pictograms and ideograms to form a common language all drivers could understand. However, even drivers on the roads of a foreign country would be hard-pressed not to understand the concepts of road sign design.

In the UK, Margaret Calvert’s work on road signs, alongside colleague Jock Kinneir, is world-renowned. Her creation of widely-recognized pictograms, such as “men at work,” “farm animals,” and “schoolchildren nearby,” are the bedrock of road sign design, lauded for their incredibly simple design and ease of understanding. Their simplicity is their keystone. She designed these road signs solely in black and white to create maximum contrast, giving drivers the ability to understand them even as they flash past at 80mph.

Calvert then looked to the European protocol of triangular signs for warnings and circles for mandatory restrictions, and encased her pictograms within them, thus imbuing her symbols with even further meaning. Introducing basic primary and secondary colors (i.e. red triangles for warnings) provided even more context. These easily decipherable, highly consistent, and logically formed signs form part of a vast family of warnings, instructions, and information that endure to this day, and have been replicated to some degree in almost every country on the planet.

More Modern Non-Digital Uses

Summer Olympics Pictograms
Various pictograms designed for the Olympics. Image by KirillS.

You will find other non-digital uses of iconography in every corner of our lives. From bank cards to airport signage, from detergent bottles to washing labels on our clothes, anything that requires messaging will undoubtedly be accompanied by iconography.

Iconography has a vital role to play, particularly in situations where huge amounts of people from across the globe are likely to gather. One such event is, of course, the Olympics.

Held every four years, not only is it an unrivaled sporting event, but also an incredible feat of logistics, one that demands a clear set of instructions on how to get around and how to find things. Rather than creating a set of iconography that never changes, the Olympics uses its iconography as a branding opportunity, whereby the entire family of pictograms is redesigned for every event. Despite this, and due to strict rules around how they can be produced, these pictograms continue to be one of the most prominent examples of visual communication in use today. Adorned on maps, programs, and the walls of buildings, they’re impossible to miss, and quickly and easily break down the language barriers that could otherwise pervade.


The Birth of Digital

All Hail the GUI

Modern Computer Icons
Modern day computer icons. Image by iconspro.

At the dawn of the 80s, computers had not taken up entire rooms for quite some time. However, the personal computer was only just being considered as a serious device to support businesses with basic daily activities such as word processing and tabulation.

In 1981, the Xerox Star 8010 launched—a personal computer for the office—and the idea of converting the office metaphor onto computer screens was born. Norman Lloyd Cox created the first set of pixel art icons that sat within the layout of the first ever graphical user interface (GUI). His mission was to represent basic office concepts such as folders, files, and other office paraphernalia in a way that would make sense on a computer screen.

Given the relative constraints of computing power and graphics back then, pixel art was the best we could hope for. However, its impact cannot be overstated. Quick on the heels of Lloyd Cox came the work of Susan Kare, who created the original set of icons for the original Apple Macintosh. Now considered one of the most significant iconographers of the modern world, Kare’s early philosophy is one that signaled the transfer of ideas from off-screen iconography to its on-screen equivalent, making it clear that icons in the digital world had to work as effectively as their counterparts in the physical world:

I believe that good icons are more akin to road signs rather than illustrations, and ideally should present an idea in a clear, concise, and memorable way.

Pixel art is a type of digital art that works by creating pictures at the pixel level. Back in the eight and sixteen-bit days, this was the only way to create images on a computer. Kare’s work, created entirely in pixels and without the use of color—computers simply couldn’t replicate color at the time—became some of the most iconic symbols of our age. Everything from the Save icon (a floppy disc, now obsolete) and the OK button, to the Trashcan and the Command symbol were created by Kare. Her work now forms the bedrock of modern icon design in the digital age.

Pixel Art
Pixel icons are now widely used in retro game design. Image by fredrisher.

In more recent times, pixel icons have made a notable comeback. This is especially in game design, given its ability to conjure up nostalgic memories of the “early days” of computing. Artists have generated a whole new slew of icons following the themes of Lloyd Cox and Kare.

Depth of Meaning

Retro Floppy Disc
Atari TOS introduced the idea of depth with their isometric icons. Image by fluidworkshop.

Once pixel icons had become mainstays in computing, it didn’t take long for others to think about how they could define and redefine digital icon design.

One of the next steps from Kare’s flat pixel icons was the introduction of isometric design, first seen on the Atari TOS in 1985. The notion was still to generate icons for the office metaphor, and still in pixel art. But, now designers were thinking in three dimensions and wondering how they could add depth to the operating system. Although not entirely isometric by today’s standards of the definition, these early forays into imagining depth, on an otherwise flat computer screen, was an important inflection point in the development of the richness of icon design, and indeed graphical user interface design itself.

Modern Isometric Icons
Isometric icons have come a long way, oftentimes being incredibly detailed and painstakingly created. Image by ONYXprj.

These days, isometry is used heavily in the creation of everything from icons to infographics, from promotional materials to game design. Gone are the monochromatic counterparts of the 80s. Now we have a vast wealth of isometric design, both in terms of style and color, that continues to be popular despite being relatively difficult to produce. Modern day isometric icons have taken on a whole niche of their own, and some of the results are quite frankly astounding.

Skeuomorphism

Audio Player
Audio player with design elements. Image by alexdndz.

When Steve Jobs was summarily fired from Apple, he set up a new computer company, Next. Though the company didn’t favor well in the grand scheme of things—Jobs subsequently returned to Apple and grew it into one of the most valuable companies in the world—it did advance computing technology to the point where shading was possible within digital design. This development led to a further evolution of iconography, skeuomorphism, which took icons from being simple symbols to fully-fledged representations of their physical counterparts. For the first time, designers could create more complex pictures. The style was so pivotal that it became its own movement. Skeuomorphism defined two decades of computer design, including the early aesthetic of the iPhone.

In some ways, skeuomorphism is the purest version of pictography. If you remember, a pictogram is a picture that closely resembles what it signifies. These rich, detailed icons were the closest thing there had ever been to manifesting that reality.

Skeuomorphic Iconography
Skeuomorphic iconography has become an entire movement. Image by quangmooo.

In more recent years, skeuomorphic iconography has developed yet again, becoming even more lifelike as technology allowed designers to introduce more and more intricate techniques. Those passionate about skeuomorphism continue to create incredible icons that, in some cases, almost look good enough to eat.


Modern Icon Design

Since the days of skeuomorphism, a whole throng of styles and aesthetics have developed, taking icon design down new and interesting paths, often simultaneously in completely different directions. Here are a few that have stood out most recently:

Line Art

Commercial Line Art
Line icons are the natural descendants of pixel icons. Here, simple lines and a limited color palette express a range of e-commerce services and functionality. Image by Iconic Bestiary.

Almost a direct descendant of the original pixel icons, line icons are now a hugely popular choice for many design frameworks. The same principles apply as with their pixelated ancestors. Lines define the edges and major features. However, now we can fill in the negative space with more complex gradients, colors, and effects, giving line icons a flexibility and beauty that pixel icons could never achieve.

Glyphs

Modern Day Glyphs
Glyphs take simplicity to the nth degree, allowing for versatility of positioning and usage. Image by Agus Mul.

Although glyphs have been around in computing history practically since the beginning, there has recently been a resurgence that’s given the style a new lease of life. Glyphs are innately uncomplicated pictograms, often created in one color, that can be implemented at tiny sizes—perfect for the small screens we carry around in our pockets. The use of negative space to create a “secondary color” allows for quite complex symbols, despite their simple look and feel, and small footprint.

Material

Material Design
Somewhere between flat design and skeuomorphism, introducing light and shade to otherwise 2D icons. Image by Stokkam.

In an effort not to be left out, Google launched its own design framework, Material Design. This style attempts to straddle the divide between skeuomorphism and flat design, the former being as detailed and in-depth as possible, the latter being, well, flat. To some, it’s the perfect compromise. To others, it mashes both schools of thought together and ends up with a less convincing concept as a result. Whatever you think, the aesthetic is incredibly pervasive and showing no signs of stopping.

Hand-drawn

Hand-drawn Icons
An example of hand-drawn icons. Image by nikiteev_konstantin.

In a fairly staunch rejection of the march of the machines, an interesting niche of hand-drawn iconography is popping up across the internet, most notably with Dropbox’s previous rebranding (or was it the one before? 😉). The idea with this style is to connect more closely with humans by presenting a family of icons that don’t appear to have been created via a computer. Although, in reality, these are all likely to have been digitally created. The movement gained prominence following large-scale security breaches at some of the largest tech companies, almost in a rather futile attempt to remind customers that not everything about our world is controlled by machines.

From the simplest of line drawings to more detailed sketches, hand-drawn icons have a familiar, cosy feel that may look incongruous in the current landscape, but I’d argue that’s exactly why they work.

Emojis

Emojis
Icons that take communication to a whole new level. Image by Elena_Che.

Finally, no discussion regarding iconography would be replete without referencing the constant evolution of the emoji. Originally a method of ornamenting communications used almost exclusively in Japan, the modern emoji has become a legitimate method of communication for billions of people the world over. A true mix of pictograms and ideograms, emojis provide emotion and subtlety to communications and have become so pervasive, they’re now baked into all major operating systems.

Yet again, Apple has led the way on this front with beautifully-crafted emojis. And, with the recent introduction of Animoji—an animated version of emoji—the company is set to redefine what an icon is, and what it can be, all over again.


Conclusions

The evolution of iconography is a story that has many layers. From pre-historic examples of visual communication to the birth of animated icons that we create on-the-fly, the onward march of the development of icons is uncompromising.

As social creatures, our desire to communicate is ever-present, and our need to express our thoughts and ideas never-ending. The development of iconography allows us to do that even when other forms of communication fails. Icons aid in understanding, in warning us of dangers, in finding our way, and in supporting us to make informed decisions about our lives. And, most recently, they have become a staple of our digital personas, allowing us to increase our productivity, better understand digital worlds, shortcut habitual tasks, and even express ourselves more fully.

Without icons, our world would be less safe, less understandable, and less delightful. Without icons, everything would take longer. And, without icons we’d quite possibly be less human.


Cover image by Elena_Che.

Power up your design knowledge with these articles: