As with great works of art, you must look into the past to appreciate the future. With roots as far back as the 1970′s, the humble icon has come a long way. Following is a collection of icons though history. Although there have been many other operating systems in the time between 1981 – 2010, I’ve hand picked the ones of the most significance to modern icon design. These designs show just a small fraction of the icons in the many and varied User Interfaces throughout the years. To learn more about the history of User Interface Design you can find a comprehensive article on the subject on Wikipedia.
1981 Xerox 8010 Star — The First Consumer GUI Computer
In 1973 the Xerox Alto was the world’s first GUI (Graphical User Interface) based computing system. Designed around an "office" metaphor (also a first), the Alto was built as a research computer and therefore wasn’t available for commercial release. With 2,000 machines worldwide, the Xerox Alto was so significant, it was a source of inspiration for the Apple Lisa (1983). In 1981 the Xerox Star was released, incorporating many of the design features of the Alto. The Xerox icons demonstrate a consideration for human interaction. As you can see, Calculator, Document, Folder and Trash haven’t changed in almost 30 years.
1981 – Xerox 8010 Star
1983 Apple Lisa — Popularized the GUI
Development of the Apple Lisa started in 1978 and was heavily influenced by the earlier Xerox computers. Hoping to carve a niche in the personal computing market, Apple adopted the office metaphor to make navigation easier for new users. Lisa was an advanced GUI for the time as it had movable "Desk Accessories" (early Widgets), drop-down menus and folder based directories. You can see the icons are not much different from the Xerox, except for the size and single pixel outlines, and the use of the computer as the preferences icon (it’s now common to use cogs).
1983 – Lisa Office System 1
1984 Apple Macintosh 1.0 — Artist Designed Icons
A year after Lisa the Apple Macintosh 1.0 was released. We now see drag and drop file copying, movable windows and fancy new icons! The Macintosh icons were designed by the now legendary Susan Kare. Susan Kare has to be the all time master of Icon design and was responsible for many icons including the MacPaint interface (fig 2). Kare’s philosophy on icon design is simple, "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. I try to optimize for clarity and simplicity even as palette and resolution options have increased." This philosophy is at the core of Apple’s early commercial success.
1984 – Macintosh System 1.0 (fig 1)
1984 – Macintosh System 1.0 (fig 2)
1985 Atari TOS — Isometric Icons
It’s important to note — for those a bit younger than us old sentimental computer users — that the GUI was not only for the Apple systems. The Atari ST had an OS called TOS which had a minimal interface also using the desk metaphor, which by then had become a computer standard. It’s interesting to see that the TOS has Isometric Disk icons (file drawers).
1985 – Atari TOS Version 1.0
1985 Amiga Workbench — Four Color Icons
The Amiga Workbench was made for the Amiga 1000 personal computer. Despite the crudely designed icons, Workbench was actually ahead of its time. Including features such as customizable mouse cursors, four color graphics and multi-state icons. You can see the two states of the "Workbench" icon in the example below. The Amiga broke with the desktop convention and chose to use a workbench with drawers instead of files.
1985 – Amiga Workbench 1.0
1985 Windows 1.0x — Microsoft’s First GUI OS
In 1985 Microsoft finally released its first GUI. The icons are just as crude as the Amiga but don’t include color. It’s interesting to see that the first icons for Windows Paint employ different symbols to MacPaint, in particular the Spray Painter.
1985 – Windows 1.0x
1986 GEOS for Commodore 64 — The Alternative OS
I’ve included GEOS for the Commodore 64 as, at the time, it was the second most popular GUI behind Macintosh 1.0 (based on units shipped). The icons have more character than Windows OS and share the Mac philosophy of clearly expressed metaphors.
1986 – Commodore C64 GEOS
1991 Macintosh System 7 — First Mac OS with Colors
With System 7 we saw the introduction of color to the icons. You may notice that the icons are now slightly raised to appear "clickable".
1991 – Macintosh System 7
1992 Windows 3.1 — New Designer Icons!
In Windows 3.0 (1990) Microsoft employed Susan Kare (who first made icons for the Macintosh 1.0) who greatly improved the designs. In 3.1 Kare further refines the colors and designs for the icons. Windows 3.1 was the first Windows platform with pre-installed True Type Fonts.
1990 – Windows 3
1995 Windows 95 — The Start Button
Windows 95 introduces more colors to the icons and a few more isometric designs. The Windows 95 design is a complete re-build and includes elements that are still part of Windows designs to this day. The elements include, the taskbar, the menu and Microsoft’s famous Start Button.
1995 – Windows 95
1997 Macintosh OS 8 — Brighter Icons for Mac
In Mac OS 8 the icons are now beginning to look brighter and rendered to show a strong light source. Macintosh also starts to implement an isometric style with a strong "drop shadow".
1997 – Macintosh OS 8
2001 Mac OS X v10.0 — Jelly Mac
Mac OS X was released around the time I was studying for my degree in Multimedia. Lovingly called the "Jelly Mac" by most of the students. We couldn’t help but notice the ultra shiny and plastic-jelly like finish of the icons. The icons in OS X are also a huge leap forward in design from the previous OS 9, which was released just two years earlier (OS 9 looks almost the same as OS 8 above.) Presumably, due to the Dock, the icons are rendered either from a straight forward point of view or slightly above. Designed around the new Aqua theme, icons show complex reflections, highlights and textures. Without the Aqua theme, I doubt that icon design would be as desirable as it is today.
2001 – Mac OS X v10.0
2001 Windows XP — Bright Soft Icons
In 2001 Microsoft introduced, yet another, completely new OS system. Adopting a saturated color palette, the icons are rendered with a soft illustrative look that uses a single light source and a semi transparent drop shadow. They continue to use the isometric style.
2001 – Windows XP
2007 Mac OS X Leopard — Reflective Dock
Mac ditches the stripes and adopts a 3D reflective doc for the icons to "sit on". The use of chrome, glass and reflections is as popular as ever. The icons don’t change much from v10.0.
2007 – Mac OS X Leopard
2009 Windows 7 — Soft and Reflective
The Windows 7 icons are completely different from Windows XP and similar to Windows Vista. The major difference between Vista and 7 is the direction the icons are facing. I haven’t been able to find any official documentation on the change, but I’m not the only one who’s asking the question. The icons in Windows 7 are also softer and more glassy than previous ones.
2009 – Windows 7
Resources & Further Reading
- Windows-Icons.com – History of Windows Icons
- The Vintage Mac Museum – "Old Macs – 9 inch/mono Display 68000 ONLY"
- Guidebook – Graphical User Interface Gallery
- Toastytech – Comprehensive GUI gallery
More to Come Soon
In the next installment (Know Your Icons Part 2 – Modern Icon Design) we will be delving further into the world of icons and exploring what icons mean to us today.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By LoungeKat
Photoshop to HTML
Take your Photoshop skills to the next level by learning how to slice up a PSD into a working standards driven HTML website.
Join our newsletter!
U-Design WordPress Theme only $35.00 
Modernize - Flexibility of W ... only $35.00 
Sparking Ideas - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice, keep it up. What about ubuntu icon and linux icons.
2001 Mac OS X Leopard? the first beta for Leopard was in 2004!
Copied and Pasted headlines
I believe he is referencing overall release date. As if it matters in the end. Thanks for finding a little flaw in a wonderful article.
To the author:
Amazing article, glad you took the time to compile this information!
Mac OS X v10.5 “Leopard” was released on October 26, 2007 – Wikipedia
I made sure to double check this one because Mac Fans are fanatical and I knew I would mess something up and get pwnd.
If I put the beta date then someone else would have complained it wasn’t the release date…
Thank you for the great flash from the past – I’ve always been amazed at how the icons continued to improve over the years, especially the Jelly Mac icons. Still, I kind of miss the old monochrome ones – they had an innocence about them…
It seems you have mislabled the last of the icon collections, it should be Windows 7 – 2009 (i think)
That’s great! I actually remember the ’91 Mac and ’92 Windows icons. Nostalgic! I wonder how we’ll look back at the icons we have on our computers today in 15-20 years.
The 1986 GEOS for Commodore 64 has the best reboot icon ever.. lol
I feel like a reel computer nerd in reading that article ^^
very interesting anyway !
… and icons linux? sheell of linux (Gnome, Xandros, symbian, DSL … etc… etc…)
and icons for palm ?
and consoles (Sega Saturn bios (icons 3D), game cube or psx) ??
any way is a good work collecting most of the icons of operating systems
The Amiga icon’s was originaly made for the Amiga 1000 and not for Amiga 500.
However … nice article
Interesting , thanks . The headlines are wrong , please correct them
There shouldn’t be a space between the end of a word and a comma, just after the comma. Please correct them. Thanks.
Nice article. I would’ve said a few words about the Tango icons project, though.
Thanks for the article, I really enjoyed it! I’m not an icon designer myself (I might start learning and practicing at some later time though), but I am really interested in knowing stuff about icons. I’m one of those who have read the Aqua Interface Guidelines out of pure interest and boredom. (It’s also worth checking out after reading this article for some even deeper and developer-oriented information.) I can’t wait for part 2 of your series!
As a side note, the two last captions are messed up. “2001 Mac OS X Leopard — Reflective Dock” should be “2007 Mac OS X Leopard — Reflective Dock”, and “2001 Mac OS X v10.0 — Soft and Reflective” should be “2009 Windows 7 — Soft and Reflective”. Anyway, like I said – great article!
Oh no, sorry about that, I’m sure it will be fixed up soon…
Windows 7? You mean Windows Vista, right? I know that few people likes Vista, but most Seven icons came from Vista. And 98, 2000 and ME meant nothing in the icons history?
Although, nice dossier. Thank you! My first computer was an Atari ST, and I was unsure about GEM being the first graphical desktop.
Someone suggested about Linux icons. That would be crazy! There are a lot of distros out there, many of them with its proper icons. And in any case, you can change the icons collection. And if you put only from OpenSUSE, Ubuntu, Fedora and popular distros, it would be unfair. At last you could make a huge random icons gallery.
What awaits us in the next part? Show me ya moves!
I put in Windows 7 because they’re different from Vista in a few slight ways, but they’re also facing left – which struck me as a bit odd considering the MS icons always used to face right. The next article is a bit less controversial and has some of my own icon work and some nice looking non-OS icons.
well ok – there are many distros but it doesn’t matter as vast majority of them uses the same graphical environments i.e. Gnome, KDE.
Fantastic article! Awesome to see how icons have changed throughout time. Thoroughly enjoyed reading this.
Lol. What about Linux icons?
very interesting…..
Amazing icons’ history lesson, some I remember about, some I see for the first time. Impressive!
Interesting post. It would be nice if you could add designer to the later icons also – e.g. IconFactory did the Windows XP and Vista icons.
I read that IconFactory did the plans for the icons for Windows 7 but then Microsoft changed them.
Love these kind of articles, is nice to know how stuff has changed over the years lol ^_^
I ask YOU – WHERE ARE LINUX / UNIX icons ? There are a lot of beuatiful KDE / GNOME icons – and you are only posting Win/Mac icons…
Interesting article, minus a few mistakes here and there (but already covered in the previous comments) … always nice to see where we’ve come from and how far we’ve come in interface design … glad I didn’t see this until both parts 1 and 2 were out, ’cause now I get to read part 2 immediately after reading this
Where is a Linux?
One of the best articles I’ve seen. I didn’t know nothing about Susan Kare, she was so important in the Computer Icon History!
Thanks Kate McInnes!
Hi Everyone, there’s no Linux icons because this is a “Brief History” I’ve picked icons that have made a significant difference to modern icon design and how people perceive icons, so near the end with the majority of the world using MS or Apple you wont see other systems.
This one was really cool. I like retrospectives on design from long ago.
ehhh… I remember that old style icons with real fondness
Nice, BUT, where are GNOME’s icons (Tango project)? Where are KDE’s icons (Oxygen project)?
Also, BeOS’s icons must be mentioned.
This is Part 1 article, hope that the others will be mentioned…
I really really enjoyed this post, I’ll recommend it on my blog
Great article. Takes me back! System 7 blew me away when it came out, even though Apple was in trouble back in the day, with System 7 you could see the future…
Useful info..!
OLD hhhhh
thanks for post
iPad doesn’t render the images. Only the first image of the 1984 Xerox is visible. The rest is resized to 1×1 small and gray boxes when the page has finished loading.
A fancy lightbox thingie being a bit too fancy, perhaps?
Could be the WordPress settings? Each image is a .jpg, including the one you can see.
Yep, very frustrating not to be able to see these images for this great article. It’s the lazyload (or similar) jquery plugin, it doesn’t like mobile devices :-/
Great article, though NeXTSTEP’s icons were way ahead of Windows/MacOS in the mid-nineties in terms of rendering quality and detail. It may be difficult to be fully inclusive, but I don’t think the NeXT icons should be overlooked.
Its obvious the writer of this article is completely ignorant of the free desktop environment. Its not just about Linux. Gnome and KDE icons are used as graphical environment by many OSes from Linux, BSDs to Solaris and unix. an “history” of computer icons which ignores the role of free desktop based graphical interfaces is incomplete.
And not just OS. because this icons comes with a free license there are being used by lots of cross platform applications that runs on windows mac or linux. like the oxygen icon forexample is used in a lot of websites and windows applications. just so u know.
We’ve come so very far, what next ?
Thanks for posting
Cheers
Paul
The Atari TOS icons aren’t actually Isometric, they’re closer to dimetric projections (where two of the three axes are the same).
So many memories… I’ve used most of those systems.
I didn’t realise Amiga predated GEOS… but I don’t think I knew Amiga existed until ’90
Nice start, but really needs to be filled out more.
The Xerox Star’s icons and background patterns were designed so that they wouldn’t interfere with each other. The Apple Lisa screenshot shows such interference.
As mentioned, icon styles from Linux distros, BeOS, NeXTSTEP are all relevant. QNX has a distinct style too.
Macintosh’s System 8 icon style is called “Copland” (–tap, tap– “is this thing on?”). See Dave Brasgalla’s World of Copland series at the Iconfactory for further reference.
Really, what an evolution in the look of the icons! What’s next?
very very nice sharing, gladly to know all this information, what a interesting history……….
Wow I cannot believe how many of these I remember and recognize!! Very interesting!! Thanks for taking the time in putting this together for us!
This thing (called article…) without the minimum reference to new gnome and specially KDE icons which are SVG (scalable) is useless.
We speak here about icons that can be viewed in ANY resolution !!
What about the special type of icons called pictograms and found in many new OS ?
Fanza icons in ubuntu
http://www.omgubuntu.co.uk/2010/08/faenza-icon-set-gets-ppa.html
Why you are not saying anything about Gnu/Linux Icons. It has also a great history of development. Can you think about posting linux icon history
completely agree. with display postscript Next was 10 years ahead of it’s time.
Your Windows 3.0 screenshot has a Windows 95 icon in it… amateur hour as usual at tutsplus
Kate McInnes ,
Great article,
I will wait for your new article regarding ICON Part 2,
Anyway . you did a great job,
Can anyone tell me when the first mouse-over drop down menu was introduced?
Thanks