The article describes the background and the detailed history of computer
icons featured in graphical interfaces – complete with visual examples
and short descriptions of 21 interfaces (from 1981’s Xerox Star to
upcoming BeOS Zeta). There is also a breakdown of various icon properties
(such as size, style or number of colours). The article ends with a
quick glimpse into the future and a conclusion that the icons are not
necessarily evolving into the most desirable direction, focusing more on the
visuals than the functionality.

Disclaimer: I’m not very happy with this article. It is not well-researched, and
generally written in a hurry. Still, I can imagine it might be somewhat useful?

Introduction

We have pretty much grown accustomed to icons omnipresent on our computer screens,
PDAs, and mobile phones. As with all things that are second nature, we don’t
really think much about how the icons started, how matured, and in which ways
are modern icons different than their 20-year older counterparts.

However, such journey through time might help us rediscover the very essence and
true purpose of icons – something that seems to have gotten lost during
all the technological advancements.

This article aspires to be such a journey. It will begin with a short introduction
to the background of computer icons. Then a historical trip will follow, starting
with 1981’s Xerox Star, and finishing in 2003 with the still unreleased
BeOS Zeta. The breakdown of various icon properties (size, style, orientation,
etc.) comes next, and the article will end with a short speculation on things to come.

1. The beginnings

Historically, an icon is an artistic representation or symbol of something holy
and divine, in form of relief, painting or mosaic, usually quite small in
size. [1] The word itself comes from Greek eikon, meaning simply “image.”

In today’s language, an icon describes a symbol, face or picture representing
some well-known attribute, entity or concept. Icon should be readily recognizable,
even if usually only within a given cultural environment. Examples of famous icons
are: hammer and sickle (standing for former USSR), Swastika (Nazi), balance/scale
(justice), tulips (the Netherlands) or lightbulb (an idea).

In computer science, an icon is a small graphic representing a file, directory,
application or a device of a given computer system.

Computer icons as we know them today appeared first in the 1970s at the legendary
Xerox Palo Alto Research Center laboratories. They were part of so called “desktop
metaphor,” which presented the computer system as a virtual desktop,
trying to make use of people’s natural reactions and associations with using
their desks, sheets of papers, folders, the trashcan, etc.

The years of work of Xerox PARC laboratory were finalized in Xerox 8010 Information
System, which, alas, was a commercial failure. However, Apple picked up on
the idea and after launching the rather unsuccessful Lisa, finally popularized
icon-driven interface with their 1984’s Macintosh.

Nowadays, the concept of an icon and all the gestures associated with it
(clicking, double-clicking, selecting, dragging, etc.) seems natural for
most of the computer users. However, being more or less tied to the progression
of graphic hardware and software, the icons continue to evolve.

2. The evolution

Let’s try to summarize and maybe even predict the next step of this
evolution by looking back at the history of icons through the most
important interfaces.

2.1. Xerox Star (1981)

1981’s Xerox Star’s icons were black and white, with resolution
of 72×72 (since the display had a density of 72 ppi, every icon occupied
an exact square inch).

The icons were highly symbolic, based on rounded rectangles. They established
conventions used to this day – a document was a blank sheet with one
corner folded, a directory was a regular manila folder with a tab on top,
the trashcan had sheets of paper inside it.

The consistency across all the icons, and the attention to detail was amazing.
Inbox and outbox icons showed an envelope whenever mail was unread or unsent.
A clock icon was a regular working analog clock. An icon corresponding
to an opened window was shown in outline, so the user would never see
two instances of the same object. And, in a solution never seen later, the
titles of icons were part of the icons themselves.

2.2. Apple Lisa (1983)

Next in line was Lisa, Apple’s ill-fated office computer. Lisa’s
desktop icons were somewhat similar to those of the Xerox Star Information
System, although more detailed – the trashcan had ribs and a cover, calculator
digits, etc.

The icons were also black and white, but of a slightly smaller resolution –
48 pixels per 24 pixels. This was due to Lisa having lower screen resolution
than Xerox Star, and also non-square pixels.

2.3. Macintosh (1984)

Macintosh had even more interesting and unique icons. Designed by Susan Kare, they
were much more than just a simple collection of black-and-white 32×32 pixels pictograms.

Macintosh icons were the first to bring a clear distinction between documents
(paper sheets with folded corners) and applications (a human hand holding a tool
against a sheet of paper). They also included several classics, such as “happy
Mac” icon, the metal trashcan or the exclamation/question mark face.

The icons were instantly recognizable, consistent, well-balanced between concrete
and abstract, and created with international users in mind (so an interim icon
for copier featuring a cat in the mirror symbolizing “copy cat” was
dropped [2]).

2.4. Windows 1.0 (1985)

Icons in the first edition of Windows, released in 1985, shared many
characteristics of the program itself (of course, no one would dare to call
it an operating system yet). They were ugly, non-functional, and seemed
placeholders for better icons which for some reason failed to materialize.

Even though they used the very same 32×32 pixel grid and black and white
colour scheme, they were far cry from subtlety and elegance of Macintosh
icons. One could pick two of them at random and be almost sure that the
orientation, the style or the shadows would be inconsistent. What’s
worse, despite there being just about a dozen of icons in the entire Windows,
some of them were similar enough to be easily mistaken with each other, even
when viewed side by side. For example, that was the case with icons for
Control Panel and Calendar, both represented as rectangles divided
into several pieces.

About the only gem in early Windows was the icon for Clock, itself being...
a working analog clock, such as in Xerox Star. However, this interesting idea
was dropped with the release of Windows 3.0 in 1990.

2.5. Amiga OS (1985)

It’s hard to find someone who really thought highly of Amiga OS’s icons,
but no one could deny them uniqueness.

First editions of Amiga OS (then known as Workbench) used a distinctive palette of
four colours (black, white, blue and orange). What really made them stand out,
though, is that there was no arbitrary limit on icon size. Every icon could
have different dimensions. And often had, contributing greatly to the chaotic
nature of Amiga’s interface.

What’s more, icons had two states – selected and unselected. Icon just
clicked on might have looked completely different than a second ago.

2.6. TOS (1985)

It is interesting how sometimes the icon design reflects the traits of not only
the interface, but also the computer, and sometimes even the company behind it.

Amiga was always slightly disordered – the operating system, the GUI,
the case design and many other aspects seemed like finished in a great hurry.
Its arch-nemesis, Atari ST, was a completely different story. It had cute
advertisements, toned-down case and compared to Workbench, almost boring GUI.

The icons of this GUI – the GEM-based TOS – were also clean and
well-behaving, sitting quietly in black and white in their 32×32 squares.

2.7. NeXTSTEP/OPENSTEP (1989)

While both Apple and Microsoft were slowly refining their respective GUIs,
another operating system was pushing the envelope much faster and further. It
was NeXTSTEP, the object-oriented system, which later evolved into OPENSTEP.

NeXTSTEP’s icons were bigger (drawn at 48×48 grid), shaded and more
colourful. Even if they didn’t represent one unified style, they were years
ahead of other creations in terms of technological advance.

NeXTSTEP was initially monochrome, but later started supporting colour screens.

2.8. Windows 3.0 (1990)

While Microsoft put the hideous icons from Windows 1.0 also in the second
edition of their soon-to-be flagship product, they wouldn’t repeat that
mistake again.

For Windows 3.0, Microsoft hired no other than Susan Kare herself, who added
style and substance to the previously neglected icons. Still at 32×32,
the icons now sported 16 colours, had consistent shadows and were
vastly improved visually.

2.9. Macintosh System 7 (1991)

This time it seemed it was Macintosh system’s turn to follow the lead
of Microsoft Windows. Seventh release of Macintosh’s GUI finally brought
colour to icons (although the Macintosh supported colour output from the very
beginning), supplemented by shading.

The icons were coloured quite subtly, mostly in shades of gray with only
touches of blue or yellow.

2.10. Windows 3.1 (1992)

As many other interface elements, icons in Windows 3.1 were refined to
include some simple shading (mostly around the edges), thus adding to their
depth and making them look more realistic.

Some shadows have also been added.

2.11. OS/2 2.0 (1993)

IBM’s OS/2 has always suffered from various identity crises. Its first
version, produced in cooperation with Microsoft, was probably one of the
most non-iconic GUIs ever. In turn, the third release (OS/2 Warp) went
into 3D shading, and the fourth even flirted a little with an isometric
Copland style (more on this later). However, it was the second edition which
had most successful and distinctive icons.

They might have been simple, set on a classic 32×32 pixel grid and using
only 16 colours. However, they had their common style, something that can’t
be said about any other OS/2 edition. Set in delicate grays and dirty greens,
with touches of blue and yellow, they fitted the nature of the system rather
well. They also have to be commended for a consistent use of shadows.

2.12. Copland/Mac OS 8 (1994-1997)

In 1997, after almost three years of demos and sneak-peaks, the eighth
release of Macintosh operating system (in the meanwhile renamed “Mac OS”)
brought a new style of icons. It was quickly dubbed “Copland”
after the codename of the operating system (which itself was a homage to American
composer Aaron Copland).

The “Copland style” refers to pseudo-3D icons, set on an isometric
grid with about 26° of slant. Isometry means lack of perspective – two
parallel lines will never visually converge and meet in any point in
isometric space. This style is often used to make manufacturing plans for viewing
three dimensional objects in “exploded” views. [3]

New icons, further refined in Mac OS 8.5 (and updated with millions of colours
instead of just 256), became very popular with Macintosh fans. They beautifully
complemented the new Platinum appearance of Mac OS, were very well crafted
and – again – unique.

2.13. Windows 95 (1995)

Windows 95 also started using Copland-style isometric views in some areas, and
most of the icons were redrawn for this probably most important Windows release to date.

The icons were still 32×32 in 16 colours, but accompanying release, Microsoft
Plus! for Windows 95, allowed the people to use 256-colour icons.

2.14. BeOS (1997)

The icons in BeOS operating system were one of the best examples of unique
graphical identity. BeOS’ icons were also isometric, but the grid was
non-symmetric, with slants of 45° (from the right) and ca. 30° (from the left).

This, along with unique and quickly recognizable colour scheme (revolving around
various shades of brown, red, yellow and gray) provided a set of icons
pleasant to look at, functional and... simply different.

2.15. IRIX Interactive Desktop (1998)

IRIX Interactive Desktop from SGI might be in the league of less known graphical
interfaces, but it has a number of unique HCI features. One of these
features are vector icons.
Granted, they are not very attractive (even if anti-aliased, which is possible in
newer versions of the system), but can be scaled to any size without losing quality.

The icons are also consistent in their appearance, using a mirrored Copland
look, casting shadows on the surface, and featuring “magic carpet”
which differentiates running applications from those waiting to be executed. [4]

2.16. Rhapsody (1999)

Rhapsody was a short-lived operating system, a missing piece linking both
classic Mac OS and NeXTSTEP and eventually evolving into Mac OS X.

Rhapsody’s icons were the last breath of the official Copland style
(“official,” because Copland gathered a large fanbase of people
still designing icons according to its principles). In most cases it was
also the end of the original Macintosh style started 14 years earlier. But
what a goodbye it was – icons were updated for new 48×48 resolution,
had transparency mask and were enhanced with more colours and more subtle shading.

However, Rhapsody’s interim status accounted for great deal of inconsistency
in its icons-some of them still retained NeXTSTEP roots, while others were ported
from Macintosh.

2.17. Amiga OS 3.5 (1999)

Released well after Amiga’s “imperial phase,” the version 3.5
of the operating system featured a completely new set of isometric icons. They
were different mainly as being heavily dithered, but again presented an
unique visual identity.

Most of the icons were sized 48×48, but they were usually surrounded
by a large border.

2.18. Windows 2000 (2000)

In the meanwhile, Windows icons were slowly refined in every subsequent edition
of the operating system, reaching climax in Windows 2000.

By default still in 32×32, the new 48×48 mode was available upon
request. The icons were mostly variations on the “originals,”
with more subtle shading, made available by support for 24-bit colour.

2.19. Mac OS X (2001)

Every previous Mac OS release had the icons drawn on a classic 32×32
pixel grid, with the only significant change being the increasing number
of colours (from two in System 1 to over 16 millions in Mac OS 8.5 and 9).
However, 2001’s Mac OS X brought the completely new, anti-aliased,
semi-transparent Aqua interface, and that warranted a change of icon
style as well. The change turned out to be a complete overhaul, as
practically all the properties of the new icons was different.

New icons were huge – 128×128 pixel grid was sixteen times as spacious
as the one in previous versions of Mac OS. The icons were presented in
24-bit depth with an 8-bit transparency mask.

Gone were the pixels. Not literally, of course, but all of the icons had
photorealistic style instead of symbolic one. To quote Apple Human Interface
Guidelines, “Aqua offers a new photo-illustrative icon style –
it approaches the realism of photography, but uses the features of illustrations to
convey a lot in a small space. Icons can be represented in 128×128
pixels to allow ample room for detail. Anti-aliasing makes curves and
nonrectilinear lines possible. Alpha channels and translucency allow for
complex shading and dimensionality. All of these qualities pave the
way for lush imagery that enables you to create vibrant icons that
communicate in ways never before possible.” [5] The new icons
also heavily featured transparency/translucency and shadows.

Icons were scaled automatically by system to smaller and bigger sizes. This
was probably the first instance of this feature done correctly, which means
that user was usually unable to distinguish between a big icon scaled down
to, for example, 16×16 and the icon with this native resolution.

Mac OS X got rid of Copland look in favour of three different perspectives:
application icons “sitting on a desk in front of user,”
utility icons “standing on a shelf in front of user”
and the toolbar icons featuring a classic “straight-on” perspective.

Many Mac users critiqued the bold move. The icons were simply too big,
too colourful, too “funky,” leaving nothing to the imagination.
The hard disk icon simply became... hard disk, even if not many people
know how such a device actually looks like.

2.20. Windows XP (2001)

Microsoft’s response to Mac OS X was Windows XP with its redesigned
interface, unofficially called Luna.

Luna featured bigger and more colourful icons. The departure from the previous
versions of Windows might not have been as big as in the case of Mac OS,
but the difference was striking. The new icons were set on a 48×48
pixel grid (more than two times bigger than Windows 2000), were presented in
millions of colours, and provided 8-bit transparency.

But the most apparent difference was the visual style. Let’s quote
Windows XP Visual Guidelines’ rather informal introduction: “The
Windows XP icon style is all about fun, color and energy. Windows XP
icons include a 32-bit version that provides smooth edges – no more
jaggies! Each icon is rendered in a vector program and then massaged in
Photoshop to create a beautiful image.

“(...) Characteristics of Windows XP-style icons: Color is rich
and complementary to the Windows XP look. Angle and perspective provides a
dynamic energy to the images. Edges and corners of elements are soft and
slightly rounded. Light source is coming from the upper left-hand corner
with the addition of an ambient light to illuminate other parts of the icon.
The use of gradients provide dimension and give the icon a richer appearance.
A drop shadow provides contrast and dimension. Outlines provide definition.
Everyday objects have a more modern consumer look such as computers and devices.

The icons also featured two views: angled perspective for bigger
icons, and straight-on style for “document icons, icons that are symbols (such
as warning or information icons) and icons that are not as recognizable at
an angle or are single objects (such as the magnifying glass).” [7]

However, Windows XP seems to have fallen victim to what is knows as “bigger,
better, faster, more syndrome” – even to a bigger degree than Mac
OS X. Quite ironically, history went full circle. Just as in the case of
Windows 1.0, it is very hard to distinguish among rows of similarly-looking bluish
slanted shapes. Especially when the icons are viewed scaled down.

2.21. BeOS Zeta (2003)

Latest installment in BeOS family – BeOS Zeta – arrived with icons
trying to cover the technological gap while remaining true to the
original BeOS spirit.

The icons were quite successfully redrawn in 64×64 grid, along with
necessary shading and drop shadows. However, quadrupling the size resulted in
visual “bulkiness” of many of the icons. Furthermore, some
of them are still hard to distinguish from each other – try to open
Control Panel and look at Fax, Mouse, Network and Printers icons.

3. Properties

Having listed more than twenty most important icon sets in graphical interfaces,
let’s try to classify them along various axes.

3.1. Size

Since the emergence of WIMP-based GUIs, most of them have used the standard 32×32
pixel grid, giving 1024 pixels. There were some exceptions – NeXTSTEP used
48×48 pixel grid, and Amiga OS gave designers free choice when it came
to icon size (which, quite expectedly, ‘caused more harm than good). The
latter is also a rare example of icons drawn with non-square pixels; Amiga’s
default resolution of 640×256 had pixels twice as high as wide. (The similar
case is Apple Lisa with its 720×364 resolution on a regular 4:3 screen.)

Last years have seen the designers slowly breaking out of the 1024-pixel barrier.
Mac OS X pushed the envelope to 128×128 and Windows XP’s default icon
resolution is 64ž64. Other popular desktop GUIs followed (GNOME is a good
example, supporting icon sizes of up to 96×96 pixels [6]), and the
previews of Longhorn’s upcoming new interface hint at even bigger image
sizes. All of these GUIs, however, still recommend to supply icons at
smaller resolutions. This is done for two reasons-backward compatibility, and
the fact that scaling down the big icons usually results in more detail
loss than using predesigned small icons. [5]

Quite obviously, the physical size of icons has increased slightly less, due
to the fact that new displays have significantly bigger pixel density than
the old ones. For example, the original Xerox Star and Macintosh displays
had density of 72 ppi, while the new LCD screens come with density of
120-130 ppi. The 300 ppi displays have already been announced and are
produced in small quantities – on such a screen, Mac OS X’s icons will
be of the same physical size as the 32×32 icons on regular displays.

It is also worth noting that sizes as small as 16×16 and 24×24 are
still in everyday use even in modern operating systems (for example, in
list or report views).

3.2. Type

The holy battle between raster and vector technology has been experienced by
possibly every designer. First method represents images using a grid of
pixels, the second one describes them by set of vectors. Both have their
pros and cons, which can be found in any self-respected introduction to graphics.

As we already learned, most of GUIs used pixels for representing icons,
as they gave the designers more control over finest details. About the only
interface with vector icons was the rather unpopular IRIX Interactive Desktop.

However, as the high-density displays are likely to become popular in the
following years, but the low-density screens are also here to stay, it
might be feasible for the GUIs to move towards vectors for their icons
designs. This solution would remove the burden of creating various sizes for
one icon, and ensure compatibility with every possible screen density. The
other advantages might include easier icon transformation (adding slant
or resizing), easier adding of visual effects (such as shadows), no
need for creating mask, etc. Anti-aliasing and other techniques would ensure
looks on par with the current raster icons (as has already been done with
TrueType fonts, for example).

Windows XP Visual Guidelines already hint at vector origins of Windows
XP icons, with the suggestion of creating the icons in vector-drawing software,
and then porting them to Photoshop [7]. Similarly, just a quick glimpse
at BeOS Zeta’s or KDE’s icons is enough to realize that with
bigger sizes, it doesn’t make much sense anymore to create the icon pixel by pixel.

3.3. Number of colours

This property was probably the one with the most stable and expected evolution.
First GUIs shipped with 1-bit depth, allowing for only two colours (usually black
and white). With graphic capabilities getting more and more advanced, icons
moved to 4-bit depth (16 colours), then to 8-bit (256 colours). It is hard
to think of any instance of 16-bit icons, and the next step, 24-bit depth,
was also the last one – 16.8 millions of colours are much more
than the human eye can distinguish.

3.4. Transparency

Transparency began to play a bigger role only with latest editions of GUIs,
providing 8-bit masks for icons. However, one has yet to see it used in
a way that actually adds to functionality of a respective icon.

3.5. Orientation

Since the “invention” of Copland style (and even earlier, considering that
even some of the Macintosh icons depart from the usual “straight-on”
perspective) we’ve seen many various pseudo-3D views: Copland, inverted
Copland, BeOS, Windows XP, or one of Mac OS X’s perspectives. Some of them
are justified, other seem there just for the sake of it.

This property is probably where the worst inconsistencies appear. Windows XP
has only two official “icon views,” but nevertheless manages
to mix them all over the system (just look at your C:\Windows directory). Mac
OS X is slightly better in this regard, but also not perfect.

3.6. Shadows

Proliferation of semi-3D views, as well as the introduction of transparency,
prompted the addition of shadows to icons.

Fortunately, modern shadows are much more discrete and subtle, and in
effect stand out less than the older black or gray outlines.

3.7. Style

We end this list with a property which should probably be mentioned at the
very beginning – the style of icons.

First icons were highly symbolic, which probably was the result of rather
sparse visual means that were supposed to convey the ideas. Then the style
evolved into more colourful drawings, balancing between “abstraction and
a tactile feel.” [8]

Lately, the appearance shifted to (photo)realism, and the question of “we
obviously can do it, but should we?” became more and more valid.
Datawise, every Mac OS X’s icon is 512 times as rich as the original
Macintosh icon. However, is it really 512 times as meaningful? At small
sizes, it seems almost the opposite, as every icon looks just like a
colourful blob, or “a little smear.” [9]

4. The future

Whether we want it or not, icons are here to stay. While the icon-driven graphical user
interfaces might have (or will soon have) reached the end of their evolutionary
road, there is still nothing better in sight. Besides, the icons themselves already
proved useful in many other situations (for example as pictograms) and are very
likely to stay on our screens regardless of any changes in metaphors or paradigms.

Sadly, the icons seem to evolve only in technogical sense, which sometimes –
as in aforementioned case of Windows XP – might lead to mixed results.
However, there is still much to be discovered in icons.

The concept of dynamic icons – that is icons changing appearance depending on
the properties of object they represent – still promises great
possibilities. There are already many examples: badges in Mac OS X, iCal icon
showing the current date, or Windows XP’s picture thumbnails. However,
there are many more useful features which could be developed. Some of them
were outlined by interface guru Bruce Tognazzini in his 2000’s article.
[10] Dynamic icons seem especially promising when coupled with vector icons,
which seem inevitable considering the expected outbreak of high-density displays.

Another forgotten possibility is animation. Not just animation as pure
eye-candy, but one that actually serves some purpose. For example, as
a response to hovering over it with a mouse, or any different action. Some
of the operating systems already include some simple animations when emptying the
trash can, but there are obviously many more possibilities.

Conclusion

Most of us heard the expression that a picture is worth thousand words. And
that was exactly the original idea behind icons in computer interfaces.

The icons in modern Graphical User Interfaces are still used more or less in the
same way as twenty years ago. They are clicked or double-clicked on, moved and
occassionally dragged. Being part of desktop metaphor, they are here to make our
lives easier.

On the other hand – as we have noticed in previous sections –
the visual appearance of icons does not stand still. In fact, if we
forget about the functionality, it is usually hard to find many similarities between
modern icons and their counterparts from the beginning of 1980s.

Naturally, this might be considered a natural side effect of evolution of
hardware. However, looking at the latest graphically rich interfaces such
as Windows XP or Mac OS X, it is clear that the icons have been slightly
too “overdesigned.” Sometimes, instead of helping, they
start to stand in the way.

Hopefully, future icons will be a little bit toned down and once again return
to doing what they have always been supposed to do – enhancing the user experience.