It’s been a while since I’ve done this sort of article, but today I’m back, and I really think you’re going to love this one. We’re going to put our creative juices on hold and spend some quality time together exploring the history and evolution of those little critters that we like to call “icons”.

So, if you’re into icon design as much as I am (digital fist bump while smiling like a crazy person), make a quick stop at the nearest espresso machine and grab a cup of that magical bean liquor, and then gently hop on back into the chair and let the journey begin.

1. Icons. The What, When, and Why

Well, I guess a lot of you already know the answer, but if the social sciences class "Research Methods and Techniques" taught me anything, it’s that for each and every study (which this article clearly is), you should always start from the root level of your concept and then gradually build your way up using multiple layers of information.

The What

So, “icon” is a noun of Greek origin (eikόn), and is defined according to the Merriam Webster online dictionary as “a conventional religious image typically painted on a small wooden panel and used in the devotion of Eastern Christians.”

Now, I think we can all raise an eyebrow and agree that this isn’t exactly the sort of “icon” that we’re interested in, since we aren’t actually in the business of painting divinity-praising images on wood (or I guess most of us aren’t), so let’s try and approach the term from a more modern, technological perspective.

From a digital standpoint, an “icon” is a “graphic symbol on a computer display screen that represents an object (such as a file) or function (such as the command or delete)”.

An even more insightful explanation can be found on the online version of the Cambridge Dictionary where they define it as “a small picture or symbol on a computer screen that you point to and click on (=press) with a mouse to give the computer an instruction.”

Now, before we move on, I would like to point out that although icons were initially created with the intent of being used within (desktop) computer graphic interfaces, they have quickly proven their utility, making their way to other screen-enabled devices that have adopted them due to their ease of use.

The When

The first ever set of computer icons was born in 1981, when computer scientist David Canfield Smith and designer Norman Lloyd Cox joined forces in order to bring the “office metaphor” to the Xerox Star 8010, which was the first office intended computer of its time.

The idea was to have Norman design a set of office items such as documents, folders, file cabinets, etc., which were to define the first icon style (pixel art) on which all the other ones would be based.

The Why

The reason why icons came to be is that computers advanced to a stage where they needed a visual symbol capable of easing the interaction between their software’s interface (the GUI or Graphical User Interface) and the user’s needs.

This means that from a symbolistic perspective, it has both a function and a meaning, since it has to carefully and correctly convey the object or action which it was intended to describe, using visual cues that aim to be self-explanatory.

You can learn more about the research process involved in the creation of these types of visual metaphors, by reading my 10 Top Tips for Creating Awesome Icons article, which will answer most if not all of your questions.

2. Defining (Creative) Style

Since the article focuses on presenting and explaining the evolution of icons from a visual perspective, it’s only natural that we take a couple of moments to see exactly what “style” is, since a lot of times the term gets misunderstood.

If we go back to the Merriam Webster dictionary, we’ll see the noun defined as “a particular manner or technique by which something is done, created, or performed”.

One definition really stood in my mind, since it describes the term as “a distinctive appearance, typically determined by the principles according to which something is designed”.

Put both together, and we quickly realize that style is basically a form of expression (be it visual or of another nature) based on an intricate relationship between the methods and principles carefully chosen and developed by a creator (the artist), in order to bring his or her vision into form.

Now, for example, an actor’s style can easily be reduced to the way that person talks, walks, and looks. Singers can set themselves apart by adopting a specific set of clothing and a softer or deeper voice.

Designers, on the other hand, strive to accomplish a sense of style by infusing different visual characteristics based on methods and techniques that were developed over a long process of exploration and refinement, making them their own.

Now here is where it becomes a little tricky, since in design, one’s personal style can quickly be taken, imitated and iterated upon, turning it into a collective style, where different designers follow similar if not identical compositional techniques.

That being said, no individual style is completely pure, since everything that is being created is basically a visual iteration and/or evolution based on somebody else’s previous work.

3. What Influences Style?

At this point, we’ve managed to get a sense of what “style” is, but let’s take a couple of moments and see what factors can influence its development and evolution.

As we all know, for every art form there are a set of tools and mediums that end up influencing its growth and popularity, and icon design is no exception to that rule.

As designers, we spend our days creating digital products that are meant to live on within a digital medium, which is influenced by the state and evolution of technology determined by the computing power and display advances made available in one’s lifetime. This is why the journey from pixel art icons to fully fledged skeuomorphic ones was a really long one, since computers didn’t have the raw power to display the amount of pixels that we currently have.

For designers, this means that they always have to adapt and become fully dependent on the medium, which depending on its evolutionary state can influence their style by adding or removing creative limitations.

A perfect example of this is VR (Virtual Reality) where we are just starting to make advances by figuring out the possibilities and limitations of this new and exciting medium.

In the beginning, I promised that the study would focus on presenting and briefly describing the ten styles that shaped icon design into its current state, so without wasting any more time, grab another sip of that hot coffee and let’s jump straight into it.

3.1 The Original Three

We’re going to kick things off by presenting the trinity from which all started.

Pixel Art Icons

Then

As we saw a few moments ago, the first ever icon style that came into existence was created and shaped by the technology of its time, when computers were slow and designers had to deal with monochromatic displays.

The mission was to make use of the existing limitations and create the icons using an elaborate process of positioning a specific number of black pixels over a square grid, until the symbol started taking shape, which is where the name of the style comes from.

The style itself can only be described as bold, since it used hard, thick, black lines for the outlines and softer, thinner lines and details for the inner composing sections.

To me personally, pixel-based icons are really impressive since not only were they the first to open up personal computers to the consumer market, but they’ve also managed to stay relevant due to the simplicity of their nature, since over their 36 years of existence, not much has changed, and maybe that’s a good thing.

Now

Today, pixel art icons continue to maintain their popularity, since they’re a powerful nostalgia trigger, bringing back the feel and look of the early days of computing, where style wasn’t about how many details you could cram into a small space, but how you could capture the eyes’ attention using as few visual elements as possible.

Isometric Icons

Then

The year is 1985, and ATARI has just debuted TOS (The Operating System) with the launch of its Atari 520ST computer, which is the first time we see a visual evolution from the pixel icons. If before the user had to deal with two-dimensional icons, now the experience changes for the better with the introduction of isometric icons, based on the same “office metaphor”, which added the illusion of depth and dimension to its GUI (Graphical User Interface) using the third axis.

In terms of style, this wasn’t a radical departure. Think of it more as a visual improvement, since they were still pixel based, but brought some subtle changes such as the addition of projected hard shadows and uniform line thickness.

To some, the word “isometric” doesn’t seem like the best way to label the style, since by its definition, an isometric projection is a “method for visually representing three-dimensional objects in two dimensions” in which “the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees”. To me personally, they could be seen as the first attempts at bringing a new perspective to the “office metaphor” that ultimately led to what we now call isometric icons.

Now

Today, the style has seen a radical departure from its monochromatic pixel-based origins, leaning heavily on the use of colors and shapes in order to bring three-dimensional objects to life.

In terms of complexity, the style is fairly difficult to master, since it requires designers to visually reimagine the object they want to portray using a rotated cube as a reference object, which isn’t always easy, especially when you’re dealing with oddly shaped objects.

Skeuomorphic Icons

Then

Fast forward four years, and things are finally starting to break the pattern with the launch of Steve Jobs's NeXT workstation computer, which came with NeXTSTEP OS.

If up until this point icons were thought of as being simple symbols meant to ease the interaction between human and machine, Jobs took it to the next level with the introduction of the first ever skeuomorphic icons, which were designed to mimic their real-world counterparts.

Say goodbye to those thick, chunky outlines, and hello to a level of craftsmanship never before seen inside a GUI (Graphical User Interface), characterized by the use of shading and highly detailed illustrations all crammed inside the same small space.

Now

As computers became more powerful and screen technology evolved, skeuomorphism became more of an art form than a simple symbol, pushing the techniques and imagination of its creators to a point where the depicted objects blurred the line between pixels and reality.

From intricate gradients to life-like textures, highlights and shadows, the process can be really hard to master if you haven’t had any artistic training. If you're interested in this style, you can start learning by recreating a Stylized Strawberry Icon which will show you all the basics.

The style itself became super popular in 2007 with the launch of Apple’s iPhone, and remained so up until the year 2012, when there was a shift from realistic icons to minimalist ones.

3.2. The Evolution

At this point, our timeline is going to get a little blurry here and there, since for some of the upcoming styles we won’t be able to pinpoint the exact moment when they appeared and gained popularity, which is why I’ve decided to group and order them based on the attributes which they share and evolved from.

Line Icons

Line icons are a direct evolutionary branch of the original pixel art icons, being one of the current popular styles practiced, due to their ability to portray powerful imagery using simple shapes and outlines.

For a design philosophy, the style itself uses the same principle of separating the object’s different composing sections using hard, thick lines, but it does so using strokes as opposed to individual squares. This change of technique has made it easier for the designer to create and adjust them, since you’re now dealing with shapes and paths instead of individual pixels.

Beyond that, the style has become more organic, since the evolution of computer displays has made it possible to use curved lines and rounded corners, compared to the old days when you had to bring your ideas to life using super-sharp rectangular shapes.

I personally love the style, since it’s easy to approach and get good at once you’ve practiced it a few times.

Glyph Icons

From a terminological perspective, the noun “glyph” comes from the French “glyphe” which itself originates from the Greek “gluphē” and can be defined as a “hieroglyphic character or symbol”. From a design perspective, a “glyph” is a visual style, where the objects are represented using monochromatic shapes that can have subtle empty spaces separating their different composing sections.

While simple in its nature, the style can be really effective, especially when used in smaller sizes, since you can depict the object using a minimalist but still comprehensible result, which is why it can be seen as the precursor of flat design.

Flat Icons

Flat icons as a style became popular around the year 2012, with the launch of Microsoft’s newly redesigned visual language that we knew as Metro (now Fluent), which came as a direct response to Apple’s abuse of skeuomorphism.

Visually speaking, there was a huge shift in design philosophy, aiming for a clear, minimalist approach by breaking the object down to its bare essentials, removing as many details as possible in the process.

This led to the birth of a new type of icons that were easy to understand and use, due to the fact that the focus had been redirected onto the careful use of colors and basic geometric shapes.

Eventually, designers saw the potential that flat design had, and they started creating new icons based on clear shapes, free of any gradients or drop shadows, and developed the style into what it is now.

Material Icons

As things started changing with flat design, in 2014 Google decided to embrace the change and brought designer Matias Duarte aboard to help create its own visual language, which it called Material Design.

Now, if skeuomorphism had too much going on, and flat design was well, too flat, Google positioned itself somewhere in the middle by bringing back the highlights and shadows but giving them a subtler presence, creating a visual style where objects are stacked over one another. They went even further and put together a pretty extensive online guide, where they talk about everything from material properties to layout principles and color styles, which makes it really easy to jump in and adopt the style.

In my opinion, material icons are a nice addition to flat design, and as long as Google has something to say, they will continue to be popular.

Dimensional Icons

For the next style, it’s really kind of difficult to put a label on, since it sits somewhere between the boundaries of line icons and isometric ones, borrowing key elements from both.

I’ve almost broken my brain trying to define it, and I finally came to the conclusion that the best fit would be dimensional, since the process focuses on adding dimension or depth to the icon from a horizontal perspective.

The way it’s done is by presenting both the front and one of the object’s sides, using rectangular shapes for everything that is not of circular or curved nature. For the objects that fall within the second category, they are usually represented using one perspective, the front, which creates a contrasting and at the same time cohesive balance between the icon’s composing elements.

In terms of difficulty, the style is somewhat easy to understand and master as long as you’ve got a basic understanding of perspective, so that you can correctly define and position the details needed for both the front and side sections.

Hand-Drawn Icons

This next one is in a category of its own, since as visually appealing as it is (just look at these little beauties), it’s not that frequently used since most of the time it’s viewed as being too “playful”. The style became more popular after Dropbox’s rebranding, which showed the potential to build a truly unique identity, using hand drawn-like lines that have a shaky nature to them.

In my opinion, this type of icon can prove to be friendlier, since the relation between them and the user becomes warmer because you’re dealing with symbols that feel as if they were designed not by a computer, but rather by a living, breathing human.

In terms of complexity, the style can be hard to handle, especially if you’re not used to drawing and shading, which also makes it hard to imitate, since you’re not just creating the shapes by clicking and dragging rectangles and circles.

Animated Icons

Lastly, we have a breed of icons that is truly unique since its dynamic nature begs you to click on them. While they might look like pure visual gimmicks, animated icons are the future of interaction, since they hold an incredible power when it comes to the engaging process between the user and the interface.

No matter what form they take (flat, line, etc.), animated icons can bring something new and fresh to the table, due to their second state (when hovered on), and thus double the information available to the user, since when hovered on, they can bring useful data in a matter of seconds.

In a world where VR (Virtual Reality) and AR (Augmented Reality) are the future, one can see the potential of integrating animations within the fabric of icons.

In terms of complexity, the style can be hard to master, since you are not only designing them but also taking the time to fully bring them to life, which can be hard if you don’t know exactly what you want to express through them.

A Few Final Words

Before we wrap things up, I really want to thank each and every designer who participated in the study, and most importantly ToastyTech for providing the images of the operating systems.

That being said, I hope you've enjoyed going through the history of what we call icons and discovered something new and captivating.

Also, if you want to learn more about icons, I strongly recommend you go through some of the following articles, since I'm sure you'll end up finding some fresh and useful tips.

• How to Create Pixel-Perfect Artwork Using Adobe Illustrator

  As a beginner, creating digital artwork intended for web use can sometimes get a bit frustrating, especially when you put a lot of time into a piece (be it...

• Understanding Adobe Illustrator's Grid System

  This quick tip is focused on explaining what the Grid is, how it works, and how you should use it to benefit your design process.

• Quick Tip: Exporting Icons Using Slices in Adobe Illustrator

  Today we’re going to take a look at the different ways of exporting icons using a tool that is often feared, but will take your productivity to another level...

• How to Scale Icons Correctly in Adobe Illustrator

  Lately I’ve been getting a lot more technical and started exploring solutions to the different challenges that you might encounter along your creative...

• Comparing the Two Methods for Creating Line Icons: Offset Paths vs. Strokes

  This little quick tip is dedicated to a subject that is close to my heart but at the same time gave me some strong headaches in the early days of my design...