Icon, Index, and Symbol — Three Categories of Signs

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.

Icon Index, and Symbol

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.

  1. 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.
  2. 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.

20 comments

  1. Very enlightening.your explanation has helped me to understand these concepts of signs under semiotics that are very confusing…. God bless you and we hope to see more detailed explanations. Thank you.

  2. Thanks for this! Very clear 🙂 However, I think you use traffic lights as example of index and symbol, and it is a bit confusing. I believe you should remove the example of the red traffic light as an index.
    Thanks!!

    • Yh that true it is very confusing cause on index they said a red stop lights is an index for stop now traffic lights is a symbolic sign !but its really helped a lots 😊🙏

  3. The use of iconography on a website is extremely important for user experience. I know when I visit a site and the icons catch my attention I usually spend a bit more time making my way through the pages.

    • I’m the same way. Plus if the iconography does its job well, it can help you understand what the site is about and help you figure out where to go next to find the information you’re looking.

  4. Thank you very much but please be clear on the examples for the indexes and symbols you used traffic lights in both explanations

    • Thank you for the well organized source. I used to deal with this a little confusing work in Master degree but almost forgotten after time wears on. It elaborates the terms btw index and icon, and clears my head.

  5. I have a question, it is based on the ‘male’ bathroom sign. Which category should we place this sign? because Guy Cook asked whether this sign actually looks more like a man than a woman.

    ‘For a sign to be truly iconic, it would have to be transparent to someone who had never seen it before — and it seems unlikely that this is as much the case as is sometimes supposed. We see the resemblance when we already know the meaning’ (Cook 1992: 70).

    • I’d say it is not an icon but index. Since you can understand that it connotates “males” bathroom if you see the “female” bathroom sign and compare them. It wouldn’t be an icon, at least just for me, as it do not signal you that this place is the bathroom and there is distinction in bathrooms for men and women, one has to have a little background knowledge to come to understand this

  6. I miss mention of the fact that symbols often derive from icons and indexes.

    For example, the capital A (and variants in other alphabets) was originally a cow’s head (still evident when viewed upside down). “Aleph”, the corresponding letter in hebrew, means “ox”, for example. ‘A’ was originally an *icon* for a cow.

    “There’s nothing inherent in the number 9 to indicate what it represents”.

    Not quite. In this case the ‘Arabic’ (or more correctly, Indian) numerals get their shape from how many angles they contain – when drawn with straight lines (1 has the short upstroke, 7 needs a crossbar and so on), although this feature has been lost in modern variants of those glyphs, which ’round out’ some of the corners.

    The original Indian numerals are therefore indexes, whereas the modern ones – which they resemble quite closely – are symbols.

    It would be truer to say that a symbol is an icon or index which has *lost its connection* to the signifier it derives from.

    • Thanks, especially the last sentence made me very clearly understand the difference of a symbol, an icon, and an index as a sign.

    • I actually happened to talk 105 Chinese students through the Phoenician alphabet connection with ox (alef), house (bet), fist (yodh), etc. But as far as I know the “angles” business for the Hindu-Arabic numerals is folk history, not real. Some of those numerals have an indication of degree such as with the original Hindu shapes of 1, 2, 3, just as with the Chinese which are probably related in origin. But the rest are, at least as far as historians know, fairly arbitrary, like the Phoenician glyphs.

  7. Honestly you saved my life. I study linguistics and I could not understand the difference between an icon and an index. Thank you so much!

      • Hello, could you please explain what kind of sign is each of the following onomatopaeic words: ‘meow’ , ‘boom’ , ‘splash’

        Thank you in advance.

        • They’re all symbols.

          “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.”

          • I would agree that the written words “meow” or “boom” are symbolic signifiers, as are all alphabetic signifiers, but only when written. When spoken aloud, these words become iconic signifiers, as they resemble the signified (“boom” sounds like an explosion, etc.). It’s fair to say that all onomatopoeia is iconic when verbalized.

  8. This is really interesting and I have never seen anybody talking much about icons or maybe we all just ignored them. Do you think anything should be kept in mind while designing a log? We might look into it for our content writing agency.

    A pen is a good fir or not?

  9. I’m always glad when a designer tackles the thorny tangle of semiotics, but it is a pity that some of the notions have become so confused. Here’s a way to think about icon-index-symbol. Think of them in their adverb form only! Iconic-indexic-symbolic. You come to a traffic light. The red traffic light is behaving in its symbolic manner in that it is only able to mean STOP by virtue of laws written somewhere in a traffic code that stipulate that it shall act as a general sign for STOP. The same red light is indexic in that its placement (actual physical contact with the world) tells you to STOP HERE. (The same traffic light moved to a museum of traffic signals exhibit would lose its ability to make people actually stop, so its position in the world is indicating the meaning. It is iconic when a picture of it drawn of it. In that case the picture is iconic because it resembles a stop light. So something can be iconic in one respect, indexic in another respect and symbolic in a third respect, depending on how you’re looking at it! I hope that helps clarify?

  10. I discovered this discussion while trying to parse the borders between the words index, icon, exemplar and symbol, because a linguistics lecturer from Harvard had done a very good job of fogging them up! But now I am resigned to the depression possibility that, with almost unutterable irony, they mean astonishingly different things in various realms of academia. But even in routine discourse of some intellectual weight, they pack more punch than the meek and anemic, please-no-you-first turgidiata, always holding the door for other denotations to breeze through. In the subjective light of my own regard—
    * Index implies a teacher’s-pet list or brainiac’s ratio of various, rambunctious indicators, rather than a single pictogram or clue for more meaning-laden entities.
    * Icons are evocative more than descriptive, telegraphing vaporous possibilities and even whole clouds of contingent potential, precipitating an entity’s tendency to bond in spite its paradoxical immiscibility with preconditions, externalities or consequences beneath it.
    * Exemplars never rest or reign, they rule. Their sentinym comprises the supreme expression of—not most common reduction to—a complement of artifacts, complex of dynamics, cohort of elements or concordiat of contenders.
    * Symbol? That’s General Symbol to you, cipher (don’t even get me started on place-holders and avatars). The symbol is the most muscular of signifiers in human events, leading an army of allusions, antecedents, implications and snot-nosed referents, all camouflaged, cryptic or unprepossessing, but often armed with a portfolio of irony, contingency and counter-intuition, and unstoppable in their purchase for empowering a common commanding symbol with game-over capabilities as they consider the increase of phonemic, graphemic, information-hegemonic super-empire: Linguiratia! (Fade to black, as dancing emoticons and interjections prance across the visual field . . .)

  11. Very enlightening….will sit for my exams in two days and i came across your clear explanations by chance….and i am sure SEMIOTICS will be among the questions

  12. This was a great read, however I’d have to argue against your choice of example for Icon.
    Photographs are very instructive as indexical signs.
    They cannot exist without some kind of world that they take an image of because they capture the real existing things that are before the camera.

    ‘Photographs, especially instantaneous photographs, are very instructive, because we know that they are in certain respects exactly like the objects they represent. But this resemblance is due to the photographs having been produced under such circumstances that they were physically forced to correspond point by point to nature’ (Peirce, pp. 5-6)

    A photograph would be an example of Index, much the same as a portrait painting would be considered an Icon.

    • Thanks Josh. Yeah, that’s a fair point. In my defense I was learning the subject as I was writing the post and probably didn’t entirely understand everything well enough to pick the best example. I guess a portrait (or any realistic painting) would have been a better example. Thanks.

      • Photographs are indexes because photographs come from things in the world, similar to the way shadows are cast. Their meaning is inextricably linked to the things they represent. A super realistic painting is still representational, it doesn’t come from the object it represents in the way a photograph does. Think about the difference between the pictorial representation of a buffalo compared to the hand prints in the Lascaux cave paintings.

  13. I suggest that indexical signs also carry a time element (past, present, future). For example, ashes indexical of past event – fire; smoke indexical of present event – fire; dark clouds indexical of future event – rain.

  14. Further to my comment above, pictorial representations may be iconic but the meaning may be indexical. For example, A rain cloud on a weather map is iconic in representation, but its meaning is indexical. (“This cloud image is iconic of a cloud, but it indexically points to rain”).

  15. The drawing presents reindeer antlers. Is it an icon or an index? Or both? Reindeer antlers are part of the reindeer (icon), but they also refer to a specific animal (index). And the same question of ray of light or ray of sun (drawing)? Is it icon or index?

Leave a Reply

Your email address will not be published. Required fields are marked *