Icons are fascinating pieces of work. They are graphic elements that need to keep a balance to give stability to the design. A computer icon is a graphic symbol that helps users understand all kinds of messages in a computer, serving the same purpose of a traffic sign on the street. They are part of the graphic user interface of any system, and they were the first design element that changed the way users interacted with computers, leaving aside text based user interfaces to replace them with clickable graphics, reducing the amount of time users need to think before they proceed.
But have you ever wonder how have they evolved during all these decades? Computer icons have passed through a lot of changes during these 40 decades, and they are today as important as they were in the beginning. That way, this article is focusing on the history of computer icons, not actually the whole history of iconography although that is also a nice topic. If you've arrived here expecting the full story, I apologize for that. Keep in mind, we’ll analyze the main operating systems in computer icon history, in relevant platforms since they are basically the maximum expression in icon design of a specific era, and they have been the inspiration for countless programs and websites.
This story begins early in the 70s when Xerox developed a graphic system to be used in the company. It was called Xerox Alto, and it was developed for research purposes before it was released as a commercial project. It was incredibly expensive and not a commercial success, selling about 2000 units, but it contained the germ of a revolution: the graphic user interface which later would be adopted and popularized by Apple with the Lisa and the Macintosh.
In 1981, the Xerox Star used a graphic user interface introducing large and unicolor icons. This system, successor of the Xerox Alto was the father of the current folders, trash bins and other icons still around.
In 1984, Apple released the Macintosh, the first commercial and mass produced machine that integrated beautifully designed icons and graphic elements. The icons had to be created in a 30 x 30 pixel grid, and Susan Kare was the one in charge of them. She said she needed to be careful of every one of the 900 pixels of every icon, so she do not add too many details that pollute or confuse the message, yet don’t add so little they lose meaning.
A year later, Microsoft and other companies released graphic user interfaces as well. They were characterized greatly for being unicolor icons, based in small grids and not that well designed as Apple’s. The icons in the Amiga Workbench system were the first to implement four different colors, but still this decade was all about testing different shapes and sizes, and focusing attention on the simplest ways to transmit a message, so colors had a secondary role.
Some years later and several releases after, this fact leaded to lawsuits from Apple due to copyright infringement and resemblance amongst Operating Systems from Microsoft and Hewlett-Packard. However, this has a reason: Susan Kare also worked for Microsoft in the design of icons, so it’s not strange for the icons to look alike.
In 1991, the Macintosh introduced colors in their System 7. This allowed the icons to appear clickable thanks to the use of slight shadows and general effects. However, the icons were very specific in shape, and the pixel density didn’t allow rounded corners, so the squared shapes in the corners, and in the general icon, were still used. It’s important to notice that these icons resemble those we know as outlined.
Bigger screens and improvement in system performance allowed the appearance of Windows 95. With this, Microsoft started to exploit their capabilities and that way they designed different styles of icons. Some of them were plain, complemented with multiple colors and more rounded corners, but in this version they started using isometric design. We can see this in the Recycle Bin, Modems, add new hardware and others.
In 1997, the Macintosh OS 8, started using lights and color gradients, making the icons look even more realistic. We can appreciate these improvements basically in every important icon, from the Network, to the Trash Can and the Hard Drive icons. Nonetheless, the use of plain small icons was necessary to be side by side with the system options and other texts. System icons started to show 3d shapes, but menu icons still were flat, with small shadows.
In 2001, Apple released the first Mac OS X operating system, and it drew a big line differentiating it from previous versions like 9 or 8. This time, icons were basically the accurate visual representation of reality. Icons started to be actual works of art, beautifully illustrated visual elements that didn’t need to be complemented by texts or anything else.
Windows XP was released that same year, but unlike the Mac, XP’s icons were more cartoony than ever. In some cases, like the User Account, Energy settings and other icons, they were a bit puffy and the company started to use bright colors and shining effects. The isometric shapes were used approximately in 90 percent of the icons and textures started to become relevant in their design.
With Windows Vista, released in 2007, icons changed drastically, resembling reality the same way the Mac had done in 2001. In fact, the icons were the elements that attract most of the positive attention that a setback like this could get, and they did because they are incredible. They not only managed to represent reality accurately, but they added gloss, subtle shadows and lights, becoming pretty popular around the world and inspiring lots of designers to create their own. They are still used in Windows 7 and even in the desktop version of Windows 8. In this article from MSDN, they explain how the icons were created and what are their main graphic characteristics.
In the case of Mac OS X - Snow Leopard, released in 2009, icons keep the looks of previous versions, but they just experienced style improvements. They are clearer thanks to retina displays, and the colors used are a bit darker, yet they shine more than ever.
Starting the decade, mobile devices took off, but somehow the world got tired of skeuomorphic design and all its design qualities, like glossy elements, leather patterns and realistic shapes to welcome flat design. This is understandable because mobile devices didn’t count with major performance capabilities (they still don’t), and since skeuomorphic design needs more hardware resources than flat, designers opted to simplify to the extreme, creating a new trend.
This time, we can count the general web movement in which websites around the world started flattening their icons and user interfaces after the responsive web trend, but we didn’t see major companies implementing it until the release of Windows 8 in 2012 (the flattest operating system of this decade) and also until the flattening of iOS in 2013. It’s important to notice that, for the first time in history, computer operating systems are no longer relevant to establish trends in icon design. Computers have been relegated, and so has their design, leaving mobile systems as the crash test dummies for experiments and tendencies.
In Windows 8, the icons resemble traffic signals and pictograms; they use plain frames for icons, specifically with solid colors, and they remove all sorts of shadows, patterns and other design elements. Icons tend to have squared corners in this system, but thanks to a high pixel density they are visually more attractive than the ones in the 80s.
On the other hand, iOS 7 still keeps gradients, transparencies and bright colors, although the icons have rounded shapes and have very little variations from the previous version of the OS. They are well crafted, with some exceptions that do not match the rest of the design, but they’ve managed to inspire other designers to create and improve flaws they encounter, being that the case of nice sets like this.
Flat icons nowadays have different styles and they can afford to be elaborated illustrations, but day by day, they resemble traffic signals even more, in which the message is very precise and they prescind from elements that serve no other purpose than decorative. Actually, that’s the objective of icons. Who knows how will icons be; what we can say for sure is that they’ll certainly be simpler.