A Brief History of the Origin of the Computer Icon

• 6 min read

766 Shares

The humble icon has come a long way in a very short time. For those of us who have grown up in the modern age it may feel like this is a world that has never lacked for computer icons; they are ubiquitous. The reality is that the icon is a rather more recent invention with the first real icon based GUI only appearing for consumers in 1981!

It is worth noting that the word icon is derived from the Greek word eikon and literally means “image”. Iconography (the study of icons) has been traditionally associated with religions where icons are images of holy figures. However, as an icon in computing is an image that is supposed to represent a function; the term was hijacked and today there is almost certainly more work done on icons in technology than icons in religion.

The Xerox Star

Xerox is credited with developing the first GUI (graphical user interface) in the early 1970s. This GUI was applied to the Xerox Alto; a research computer that cost an incredible amount of money. Only around 2,000 of them were ever sold and as such it wasn’t really a “consumer” machine.

However, the Xerox Alto would lend all its aspects to the Xerox Star which in 1981 became the first ever consumer release model to use icons. These icons such as trash cans and folders and printers, have remained nearly unchanged all the way through to today.



The Apple Lisa and The Apple Macintosh

The Xerox Star is not particularly well-remembered and it took the release of the Apple Lisa in 1983 to make the use of icons as part of a GUI popular. The icons on the Apple Lisa were near identical to those on the Xerox though some of them were drawn with a little more attention to detail.

The Macintosh was released in 1984 and the machine’s icons are legendary. The artist Susan Kare designed the icons for this machine and she said; “"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."

Susan Kare would go on to design the icons used in Windows 3.1 too in 1992.



The Amiga Workbench

It took until 1985 before icons became more than just black and white representations. The first four colour icons appeared on the Amiga 1000. This also allowed for multi-state icons; icons which showed you at what phase of a process you were.



The Apple Macintosh (Again)

Those lovely folks at Apple gave the Macintosh line a reboot in 1991 and introduced colour icons and a “raised” effect that showed clearly that the icons were meant to be “clicked”.

Then Apple raised the bar again in 2001 through Mac OS X (v 10.0) and the “Jelly Mac” came equipped with the most realistic icons ever seen. Though Microsoft were also refining icons that year and Windows XP came with icons that all use a single light source with semi-transparent drop shadow.

Apple went back to the drawing board in 2007 and developed a different way to stack their icons; though the icons themselves were left nearly unchanged.



If you’d like to learn more about icons and other forms of visual representation in computing and technology; please read Alan Blackwell’s book here which goes into much more detail. It’s free to read online.

Imgs: Xerox Star, Apple Lisa, Amiga Workbench, Mac Icons, Banner Icons

Learn More in This Course:

AI for Designers

8 days
19 % booked
View Course

What You Should Read Next

  • Read full article
    Why Care about Statistical Significance? - Article hero image
    Interaction Design Foundation logo

    Why Care about Statistical Significance?

    The categorical data depicts the success and failure rate of the low-fidelity wireframe above. There is not a large enough difference between the two to determine if the designs were successful.There is an element of error involved in measuring anything. So, when we want to compare measurements, how

    Social shares
    432
    Published
    Read Article
  • Read full article
    Web Fonts: Definition and 10 Recommendations - Article hero image
    Interaction Design Foundation logo

    Web Fonts: Definition and 10 Recommendations

    Web fonts bring digital content to life. They enhance readability, set the tone, and ensure consistency across various platforms—all vital ingredients. When you understand web fonts and their impact, it can help you with effective website creation—and greatly so. We’ll provide a comprehensive overvi

    Social shares
    781
    Published
    Read Article
  • Read full article
    How to Screen Research Participants - Article hero image
    Interaction Design Foundation logo

    How to Screen Research Participants

    Finding the right participants is crucial for gathering user research. We usually need to do research with participants having a particular set of needs or experience. In this short video, you will find out about the basic need for screening and how we make sure that we have suitably qualified parti

    Social shares
    450
    Published
    Read Article
  • Read full article
    Pitfalls in Recruiting Participants for User Research - Article hero image
    Interaction Design Foundation logo

    Pitfalls in Recruiting Participants for User Research

    The level of participant engagement is an important part of the user research results. Our results are dependent on proper engagement with our participants. In this video we look at some of the issues around participant recruitment and hear practical examples that arose in a large online study.[[vid

    Social shares
    419
    Published
    Read Article
  • Read full article
    How to Fit Quantitative Research into the Project Lifecycle - Article hero image
    Interaction Design Foundation logo

    How to Fit Quantitative Research into the Project Lifecycle

    Quantitative research methods fit into the project lifecycle at different stages of the process.In this video, we see where different quantitative research methods fit into a typical project lifecycle. Bear in mind that even with an iterative process such as Agile, the short cycles still address dif

    Social shares
    510
    Published
    Read Article
  • Read full article
    How to Resolve Conflicts Between Design Thinking and Marketing - Article hero image
    Interaction Design Foundation logo

    How to Resolve Conflicts Between Design Thinking and Marketing

    In the past, designers often reported to marketing managers and were neither expected nor allowed to make business decisions. When traditionally-structured companies transition to a design-driven mindset, there can be friction between the marketing and design teams. Let’s take a closer look at this

    Social shares
    682
    Published
    Read Article
  • Read full article
    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche: User Research - Article hero image
    Interaction Design Foundation logo

    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche: User Research

    User research is indispensable—and without it, well... UX design is guesswork. When you’re a user researcher, you know this well—but it can be hard to communicate your work in a way that grabs the viewer and holds their attention. And that’s what a portfolio is all about—grabbing the attention of yo

    Social shares
    383
    Published
    Read Article
  • Read full article
    Top Service Blueprint Templates - Article hero image
    Interaction Design Foundation logo

    Top Service Blueprint Templates

    Service blueprint tools are vital for effective customer experience design—and for designers to make experiences that are exceptional. Here, we’ll discuss why these tools are so important. What’s more, we’ll explore templates and practical resources to create high-quality, efficient service blueprin

    Social shares
    638
    Published
    Read Article
  • Read full article
    How to Write Research Questions that Lead to Confident Design - Article hero image
    Interaction Design Foundation logo

    How to Write Research Questions that Lead to Confident Design

    Designing with Data provides an extensive background to A/B testing.As with all other research methods, we need to start with a research question. A/B testing concerns itself with changes in user behavior, meaning that our questions need to be centered on measurable goals. In many cases, these will

    Social shares
    450
    Published
    Read Article
  • Read full article
    Getting Started - Article hero image
    Interaction Design Foundation logo

    Getting Started

    We start our introduction to A/B and multivariate testing (MVT) by looking at their basic principles and their differences. Note that the video mentions Google Optimize, which has been withdrawn. Google Firebase can be used for mobile platforms. Third-party solutions are needed for A/B testing on th

    Social shares
    225
    Published
    Read Article

Top Articles

Top Topic Definitions

Feel Stuck?
Want Better Job Options?

AI is replacing jobs everywhere, yet design jobs are booming with a projected 45% job growth. With design skills, you can create products and services people love. More love means more impact and greater salary potential.

At IxDF, we help you from your first course to your next job, all in one place.

See How Design Skills Turn Into Job Options
Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.
Customize
Accept all

Be the One Who Inspires

People remember who shares great ideas.

Share on:

Academic Credibility — On Autopilot

Don't waste time googling citation formats. Just copy, paste and look legit in seconds.

Feel stuck? Want Freedom?

Get one powerful email each week, like 325,736 others.

Learn to design a life you love.

Next email in:
5
days
9
hrs
43
mins
58
secs