Thursday, 31 July 2008

Types of Icons

While designing icons it's important to understand the different types of icons that you can create. These are Realistic, Representative, Symbolic - sometimes also classfied as below:

  • Realistic/ Representational: Recognizable, simplified images of an object or an action. Most of the icons in the real world are developed around this idea.
  • Abstract/ Representative: Highly simplified images in which the original object or action is reduced to graphical elements only. An example of showing thermometer as heat - heat does not equal thermometer. It's a representation of heat; Red = Stop;
  • Arbitrary/ Symbolic: are invented graphical constructions with no reference (except, possibly conceptual) to actual objects or actions. Database = Cylinder (I haven't seen a DB that looks like a cylinder)

A good reference and study material on icons:


Anonymous said...

Veena said: One interesting point in designing representational icons. How to design new icons for items which the users are so used to seeing.
Eg: 'Save' icon - Usually has a floppy disc. But since floppies are no longer in use, how will the newer generation of users, who will probably never see one relate to the floppy disc. Do we show a USB or a CD :-)

Anshuman said...

It’s interesting you say that.

I can safely assume that many of us did not save data on a Floppy as the primary mean. Probably this was already a carry-over from previous generation where 8086 had two floppy drives – one to boot, the other to run WordStar, and when you are ready to save you remove the boot floppy and insert a fresh one.

So in summary, possibly it was already last generation when you started using it. And probably would stay that way forever and one day students will ask their teacher what does this ‘blue square’ represent? And the teacher will say, “Don’t ask too many questions about things that you shouldn’t be worried about. It doesn’t matter – it’s an icon for saving a file.”

Just how Ravan was an ‘icon’ for a person who had the mental and physical capacity of 10 people. All that most people understand now is that he was a ten headed demon :)

Anonymous said...

Surprised to see the second reply.
Reading at the reply, I can assume that you are trying to say that draw anything and give it a lable and it should be OK.

From what I understand, a good icon is something that conveys meaning by itself. For me thats the best icon. second best is the one where the label just helps a little to make a connection between the visual of the icon and the intended meaning. Worst case would be that without the label user gets no clue on what the icon is.

I personally like the boldness of icons designed by Stefan Dziallas (

Anshuman said...

Your assumption is incorrect. I am not suggesting 'anything goes'.

I suggested that sometimes icon loose the original context/basis, but does not loose the meaning (the floppy example). As long as meaning is remembered and understood, the origin does not matter. Although, it may become less 'learnable'. In the floppy example, we don't save data on floppy any more - in fact we stopped saving data on a floppy as the primary medium some 10 years back. However, the 3.5 inch Floppy continues to be the icon for Save a File.

It's not always possible to create an icon that's understood without a label.Many concepts (like Recruit Manager in Stefan Dzillas work) are abstract and will always need a label.

BlueHair said...

I think that icons serve two purposes: 1) Informative/communicative and 2) to facilitate workflow.

The first one deals with how the icon represents the action that will be triggered by it once you click it. The second one deals with people recognizing a visual faster than when they have to read labels.

Usually little labels (or mouse overs) on icons are quite useful at first to get better acquainted with icons and avoid misinterpretation, but once we are past this threshold, we navigate the screen by the visuals, and we recognize them easier as symbols than as actual representations of the actions.

I believe that because of this, younger generations will have no problem associating a floppy-like icon to a "save" action as this icon became quite widespread, so it is recognized as symbolizing "save", even if they don't recognize the real life connection between the action and the visual.

A good example of this is the icon for "new document" (specially in smaller scales such as 10x10 px)which was originally inspired in a piece of paper with a folded tip. This has become a symbol more than an icon proper and it doesn't necessarily need you to think back to paper based documents to be recognized. You learned it's meaning and now you recognize it.