pt. II: the Icon

Defining a computer icon

Now that we have had a short crash-course on the history of the computer icon, we can dive a little bit deeper into what a computer icon actually is. The classic example of a computer icon is the row of pictogrammes on the desktop. They launch applications, link to locations and documents, and also represent documents themselves. However, these are not the only icons in a modern GUI.

Applications themselves are also chock-full of icons. Word 2003, for instance, has so many icons it is almost dazzling.

Word's toolbars.

Apart from applications, widgets also commonly have icons. Window titlebar buttons, for instance, have icons that convey their actions when clicked (a cross for closing the window, for instance). Some graphical user interfaces also put icons on their ok/cancel/apply buttons on dialog windows.

A GNOME dialog.

These are just a few random examples of where icons are used in today’s graphical user interfaces. Consequently, we can create the following definition of the computer icon: a computer icon is a pictorial representation of an action a computer can perform, an object (file, device, etc.), or an application. The object and application parts of the definition are fairly straightforward, but the action part may need a little clarification: the action part deals with things like the icon on a copy button, the little x on a close window button, or even the little triangle on a scrollbar button. Heck, even a resize handle is a very schematic representation of an action.

Various human interface guidelines have also dived into the computer icon. Apple’s human interface guidelines for Aqua icons have a lot of interesting things to say on designing icons; for instance, “the icons for user applications are colourful and inviting, while utilities have a more serious appearance.” Additionally, Apple’s HIG also defines icon families; for instance, the green musical note on the iTunes application icon is recreated on playlist icons, iTunes plug-in icons, and so on.

To indicate how much thought you can put into icons, consider the element of perspective. You may not realise it, but icons have a perspective. For instance, the Tango icon guidelines state that there are three possible icon perspectives: flat/’on the shelf’, ‘on the table’, and ’tilted table’. The last one deals with “cases where the object’s appearance is more evident from an angle”; however, “this is the least common perspective of the three and should be used only in cases where the other two do not provide a clearly distinctive silhouette of the object.” The Aero icon guidelines for Windows Vista state that “three-dimensional objects are represented in perspective as solid objects, seen from a low birds-eye view with two vanishing points.”

Notepad under attack by orange lines.

But it gets even better. Not only do HIGs put great thought into perspective, also light sources are pre-defined. Those same Aero icon guidelines explain: “The light source for objects within the perspective grid is above, slightly in front of, and slightly to the left of the object. The light source casts shadows that are slightly to the rear and right of the object’s base. All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.”

As you can see, you can put a lot of thought into how icons should look, and for good reason: if there is one sure way to completely destroy an interface, it is by mingling inconsistent icon sets with one another, with different colour palates, light sources, and shadows. Windows XP, and to a lesser extent, Windows Vista are examples of this: open up your /windows directory and see how the Windows 3.x icons stand out like an eyesore. This destroys consistency, and simply looks ugly.


So, how important are good icons for a graphical user interface? In today’s graphical user interfaces, the main means of conveying information about the possible actions a computer can perform happens by the means of icons. Because of this, sensible icon design, where icons are clear and non-cultural specific pictorial representations of actions a computer can perform, objects, or applications, is a definite must for a modern, usable graphical user interface.

If you would like to see your thoughts or experiences with technology published, please consider writing an article for OSNews.


  1. 2007-10-28 6:27 pm
  2. 2007-10-28 6:53 pm
    • 2007-10-28 8:51 pm
      • 2007-10-28 10:13 pm
        • 2007-10-28 10:52 pm
        • 2007-10-29 3:16 am
  3. 2007-10-28 7:21 pm
    • 2007-10-28 7:26 pm
      • 2007-10-28 11:30 pm
      • 2007-10-28 11:59 pm
  4. 2007-10-28 7:42 pm
    • 2007-10-28 7:49 pm
      • 2007-10-28 8:10 pm
      • 2007-10-29 4:14 am
      • 2007-10-31 8:21 am
    • 2007-10-28 8:18 pm
      • 2007-10-28 8:39 pm
      • 2007-10-29 6:59 am
    • 2007-10-28 11:32 pm
    • 2007-10-29 2:51 pm
    • 2007-10-30 4:35 am
  5. 2007-10-28 8:48 pm
    • 2007-10-28 9:02 pm
      • 2007-10-28 9:12 pm
      • 2007-10-28 10:45 pm
    • 2007-10-28 10:34 pm
  6. 2007-10-28 9:52 pm
    • 2007-10-29 7:10 pm
      • 2007-10-29 7:47 pm
  7. 2007-10-28 10:42 pm
    • 2007-10-29 5:58 am
      • 2007-10-29 3:22 pm
        • 2007-10-31 8:54 pm
          • 2007-10-31 9:09 pm