Apps by category screen displaying colorful application icons and names arranged across numerous categories

A Brief History of the Origin of the Computer Icon

• 6 min read

786 Shares
Save

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:

Learn Design and AI From the Best

Get one powerful email each week, like 311,837 others.

Next email in:

What You Should Read Next

  • Read full article
    Conceptual Models: The Hidden Structure Behind Your Next Great Interface - Article hero image

    Conceptual Models: The Hidden Structure Behind Your Next Great Interface

    Ever wondered why some interfaces feel effortless: like they already know what you’re trying to do, while others leave you guessing? The difference often lies in how well a product’s design matches the way users think. When your interface reflects their mental model, every action feels intuitive, an

    Social shares
    473
    Published
    Read Article
  • Read full article
    Get to Grips with Constraints - Article hero image

    Get to Grips with Constraints

    Got constraints? Perfect. That’s where great design begins. Just as electrical standards define how a toaster safely works without shaping what it does, your software also lives within boundaries that quietly guide its behavior. Functional requirements describe what your system does: the stories of

    Social shares
    470
    Published
    Read Article
  • Read full article
    How Persona Stories Help You Design for Real People - Article hero image

    How Persona Stories Help You Design for Real People

    User stories caught on because they were quick and simple, but speed often came at the cost of real understanding. A “user” in a story is rarely more than a guess, shaped by the assumptions of whoever wrote it. When you shift to persona stories, you ground your work in real research and real people.

    Social shares
    392
    Published
    Read Article
  • Read full article
    Use Cases: The Ideal Bridge Between Requirements and Design? - Article hero image

    Use Cases: The Ideal Bridge Between Requirements and Design?

    Imagine trying to describe everything your product needs to do, without getting lost in technical detail or endless feature lists. That’s the problem Ivar Jacobson set out to solve in the 1980s when he introduced use cases. Instead of worrying about how a system worked internally, he described it fr

    Social shares
    411
    Published
    Read Article
  • Read full article
    What is Good Design? - Article hero image

    What is Good Design?

    Design matters. It enables us to understand, communicate and improve the world around us. When done right, design has the power to improve the everyday lives of users. When done wrong, design can disrupt and frustrate users. As a designer, you have the power to improve the everyday lives of your use

    Social shares
    668
    Published
    Read Article
  • Read full article
    How To Use Grid Systems - Article hero image

    How To Use Grid Systems

    Grids systems can help you add structure to your design, organize information and create a consistent user experience. When designing with grids, the best thing you can do is to choose the right grid for the right project. However, with so many grids to choose from, it can be hard to know where to s

    Social shares
    829
    Published
    Read Article
  • Read full article
    The Basics of Type: Design Interfaces Users Keep Coming Back To - Article hero image

    The Basics of Type: Design Interfaces Users Keep Coming Back To

    Type is everywhere. In the books you read, the products you use, and even in this very website you're on right now. But what is type? In the context of design, type is the style or appearance of text. It can also refer to the process of working with text. Typography can often be an intimidating topi

    Social shares
    676
    Published
    Read Article
  • Read full article
    What are Color Modes? - Article hero image

    What are Color Modes?

    As a designer, it’s important to differentiate the color modes so you can optimize each stage of your design process. If you use the correct color mode in your design, you will also help get your message and tone across. In this lesson, we’ll define common color modes and help you understand when to

    Social shares
    789
    Published
    Read Article
  • Read full article
    The 5 Pixar Storytelling Principles That Will Redefine How You Present and Fast-Track Your Career - Article hero image

    The 5 Pixar Storytelling Principles That Will Redefine How You Present and Fast-Track Your Career

    Ever sat through a presentation that felt like watching paint dry? You’re not alone. Most presentations miss one vital ingredient: Storytelling. And when it comes to telling stories that make people laugh, cry, or rethink their entire worldview… no one does it like Pixar. They’ve mastered the art of

    Social shares
    514
    Published
    Read Article
  • Read full article
    5 Ways to Use Behavioral Science to Create Better Products - Article hero image

    5 Ways to Use Behavioral Science to Create Better Products

    A myriad of fields, skills and insights come together to create the overarching discipline of user experience design. Psychology and behavioral science play a big part in UX design because understanding people, the way their minds work, what they want and don’t want, will help us create better produ

    Social shares
    654
    Published
    Read Article

Top Articles

Top Topic Definitions

39% of Today's Skills Will Change by 2030

The World Economic Forum expects 39% of today's skills to be transformed or become outdated by 2030.

The good news is that jobs in UX / UI design and AI are among the fastest-growing professions globally.

Build Skills That Keep You Relevant

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.

Learn Design and AI From the Best

Get one powerful email each week, like 311,837 others.

Next email in: