|Home | Polski|
On evolution of icons in graphical interfaces
One thousand square pixels of canvas
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.
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 rediscovering 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.  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.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 reflect 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 composed 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. 
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. 
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 whan 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.”  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).” 
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.
Having listed more than twenty most important icon sets in graphical interfaces, let’s try to classify them along various axes.
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 ), 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. 
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).
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 . 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.
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.
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.
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.
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.” 
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.” 
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.  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.
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.
Keep that in mind when designing one.
anti-aliasing An algorithm improving perceived smoothness of graphical objects displayed on screen.
 “Icon definition” at Wikipedia, http://en.wikipedia.org/wiki/Icon
|Page added on 31st December 2003.
Copyright © 2002-2005 Marcin Wichary
|Printable version | Contact | Site map|