Icon, Index, and Symbol — Three Categories of Signs

Posted: 05 Apr 2016 05:30 AM PDT

Signs can take many forms. They can be words, numbers, sounds, photographs, paintings and road signs among and more. However, while signs can be many things, they can be categorized as one of a few types.

The last few weeks, I've been talking about icons. I talked about them in general and then specifically about the hamburger icon. Last week I began a look at semiotics and this week I'd like to continue that look.

Charles Sanders Peirce, one of the founders of semiotics, categorized signs as being one of three types. More recently professor Yvonne Rogers came up with four categories for iconic representation and they fit nicely with Peirce's three types. I'll walk through both sets of categorization in this post.

A Quick Reminder About Signs

In case you didn't read last week's post, let me offer a quick reminder about how semiotics defines a sign. A sign is anything that creates meaning. It's anything that can be used to represent something else.

Ferdinand de Saussure, the other founder of semiotics saw signs as the basic unit of meaning and he defined two parts of signs.

Signifier — The form of a sign. The form might be a sound, a word, a photograph, a facial expression, a painting of a pipe, etc.
Signified — The concept or object that's represented. The concept or object might be an actual pipe, the command to stop, a warning of radioactivity.

Peirce added a third part, the interpretant or what the audience makes of the sign or the sense of what's actually communicated. If you'd like more details, I'll refer you again to last week's post. Everything that follows here applies to the signifier or the form of a sign.

3 Types of Signifiers — The Categories of Signs

Peirce said the form a sign takes, it's signifier, can be classified as one of three types an icon, an index, or a symbol.

An Icon has a physical resemblance to the signified, the thing being represented. A photograph is a good example as it certainly resembles whatever it depicts.
An Index shows evidence of what's being represented. A good example is using an image of smoke to indicate fire.
A Symbol has no resemblance between the signifier and the signified. The connection between them must be culturally learned. Numbers and alphabets are good examples. There's nothing inherent in the number 9 to indicate what it represents. It must be culturally learned.

I know the first time I saw definitions for each type of signifier I was more than a little confused so let's look at each in a little more detail.

Signifier as Icon

Clear your head of what you know about icons for a moment. The icons we use in digital interfaces are all signs and not specifically icons as defined by semiotics. Icons as discussed here are one possible type of form a sign might take. An icon is meant as a direct imitation of the object or concept.

Icons bear a physical resemblance to what's being represented. A photograph is an example of an icon signifier. Take a picture of a tree and the resulting image will look like that tree.

With icons there's a real connection between the signifier and the signified. Magritte's painting of a pipe, which I talked about last week, may not be an actual pipe, but it certainly looks like one and anyone viewing the painting will understand that what they see represents a pipe.

When user interfaces were first being created, most of the signs were imitations of real objects. Think documents, folders, and printers. This is possibly why we refer to all signs in user interfaces as icons, but the original signifiers used were icons in that they resembled what they represented.

Signifier as Index

An index describes the connection between signifier and signified. With an index, the signifier can not exist without the presence of the signified. For example smoke is an index of fire. Dark clouds are an index of rain. A footprint is an index of a foot. In each case the presence of the former implies the latter exists.

An index is a sign that shows evidence of the concept or object being represented. An index doesn't resemble the object or concept being represented. Instead it resembles something that implies the object or concept.

I'm sure you're familiar with WYSIWYG editors. Controls for things like aligning text to the left or using a paint bucket image to paint color are examples of index signs as they use imagery to represent the result of using the tool.

One thing to be careful with indexes is to make sure that the correlation between the signifier and signified is understood by whoever sees the sign. I think it's safe to assume that people know smoke indicates fire, but I doubt most people would know that a thrown baseball that appears to have a red dot on it is an indication that the pitcher threw a slider.

However, a major league hitter or a baseball fanatic like myself understands the rotation of the pitch combined with the red stitching on the ball leads to the batter seeing the dot. It's a reminder that the interpretant is an important part of a sign. Two people seeing a baseball with a red dot could come away with two different interpretations of what's being communicated.

Another point to keep in mind is that the correlation between signifier and signified in an index can be known innately or learned. A smile is an index of being happy and it's something I'd say we all know innately. On the other hand a red stop light is an index for stop, but it's something that we all needed to learn.

Signifier as Symbol

Symbols are at the opposite end from icons. The connection between signifier and signified in symbols is completely arbitrary and must be culturally learned. The letters of an alphabet are a good example of symbols. The shape of each letter and the sound it represents bear no physical connection to each other.

There's no logical connection between a symbol and what it represents. The connection must be learned and it usually becomes associated with the concept it represents over time. Again language and numbers are symbols. Traffic lights are symbols. Flags are symbols. What's being communicated, must be learned.

Conventions and standards help make the connection between symbols and what they represent. An example might one day be the hamburger icon. There's nothing about three lines that automatically suggests menu, but if designers consistently use the hamburger icon, the connection will eventually be learned.

An icon or index can also become a symbol over time through repetition. For example the floppy disk is still used to represent saving a digital file, even though no one uses floppy disks anymore and I'm sure plenty of people have probably never even seen one.

4 Types of Iconic Representation

One of my first stops to research the subject of iconography was my bookshelf. I picked up a few design books and found two of them (Universal Principles of Design and Visual Language for Designers) included pages about four types of iconic representation. The information originally comes from Yvonne Rogers, the director of the Interaction Centre at University College London and a professor of Interaction Design.

A warning that the choice of names conflicts with the three types of signifiers as defined by Peirce.

Resemblance icons are direct likenesses of the objects they represent. (camera icon for a smartphone camera app)
Exemplar icons depict a common example of the class of objects they represent. (trowel or rake to represent gardening)
Symbolic icons convey a concept at a higher level of abstraction than the object depicted. (cracked wineglass to indicate something is fragile)
Arbitrary icons have no relationship to an object or concept and their association must be learned. (computer on/off power button)

If you compare these to Peirce's three types of signifiers, you might notice that resemblance icons are Peirce's icons as they resemble what they represent. Arbitrary icons are Peirce's symbols as the connection between signifier and signified is arbitrary.

Both exemplar and symbolic icons as defined by Professor Rogers are Peirce's indexes. Rogers essentially widened the definition of an index and divided them into two distinct types based on the level of abstraction. In either case the signifier isn't arbitrary even if it doesn't directly resemble what's being signified.

Resemblance icons work best when the representation is simple and direct. They're most effective when communicating simple actions, objects, and concepts, however they're less effective as the complexity increases. For example showing a curved line to indicate the road curves ahead, works well, but something more is needed if the idea is to communicate that the driver should slow down.

Exemplar icons work well to show examples of the signified. They show examples that are commonly associated with an action, object, or concept. Any road sign showing an airplane to indicate an airport is a good example. They're effective when what's being represented is more complex than what a resemblance icon can easily communicate.

Symbolic icons are similar to exemplar icons, but they're more effective at a higher level of abstraction. A padlock to represent a secure URL is a good example, because we associate locks with security. Symbolic icons are best used when the actions, objects, or concepts being represented are well-established. For example a camera is also often associated with security, though the imagery isn't as quite as associated with security as a padlock, which is only used for security.

Arbitrary icons are like Peirce's symbols as there's no logical connection between signifier and signified. They're best reserved for when people will have the time to learn the connection between signifier and signified or when the representation has become a standard or convention. There's no reason why blue underlined text should be a link, but it's become the standard online and so when we see blue underlined text we now think the text is a link.

Again I wish the names were a little different, since it will be easy to confuse Rogers symbolic icons with Peirce's symbolic signifiers, but hopefully calling it out a few times here will alleviate some potential confusion.

Closing Thoughts

It's easy to think all signs are the same thing and communicate in the same way by presenting one thing that represents another, but there are different types of signs that communicate in different ways.

Signs can communicate by resembling what they represent, by implying what they represent, or through arbitrary representations that must be learned before we can understand their meaning. Hopefully after reading this post you have a better idea when to use one type of signifier over another.

Next week I'll continue this look into semiotics. I want to talk more about the meaning of signs, particularly what a sign literally denotes and what secondary meanings it connotes.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

cool links

Wednesday, 6 April 2016