Most people think icon design starts with drawing. It starts a step earlier, with a question that sounds like philosophy homework and turns out to be very practical: how does a small shape on a screen or a wall end up meaning something to a complete stranger?

If you can't answer that, you can draw beautiful icons all day and still have no idea why half of them fail. Three thinkers give you most of what you need. None of them designed a single icon. All three will change how you design one.

A sign stands for something, to someone

Charles Sanders Peirce, the American philosopher who spent decades classifying signs, described a sign as something that stands for something else, to somebody.

It doesn't have to be a drawing. The word "dog" stands for a dog just as well as a dog pictogram does.

The part designers tend to skip is "to somebody". Meaning isn't stored inside the shape. It needs three things at the same time:

• The sign: the form you see.
• The interpreter: whoever is reading it.
• The context: where and when it's being read.

Take away any one of the three and the meaning disappears. The one everybody forgets is context. The same arrow means "walk this way" on a hallway wall and "next slide" in a presentation.

Icon, index and symbol

Peirce sorted signs by the kind of connection they have with the thing they stand for. There are three, and you already use all of them every day.

• Icon: How it connects: It looks like the thing. Resemblance does the work; Everyday examples: A portrait, a diagram, the stairs pictogram; On your phone: The camera icon looks like a camera
• Index: How it connects: It is physically connected to the thing. Not a resemblance, a real link; Everyday examples: Smoke from a fire, a weathervane, a path worn into the grass; On your phone: The signal bars
• Symbol: How it connects: It only means something because you learned it. Nothing in its form explains it; Everyday examples: The word "man", the red cross, the wheelchair symbol; On your phone: The heart for "like"

Two questions always come up when people try this for the first time.

"Is the restroom figure an icon?" Mostly, it's a symbol. The head and body resemble a person, and that part is iconic. But the skirt doesn't resemble anybody. It's a convention you learned, one that half the world inherits without questioning.

"And cigarette smoke?" That's an index. Nobody drew it and nobody agreed on what it means. Smoke comes out because the cigarette is burning, and the link is physical. There's a design trick hiding in there: draw the trace and people understand the cause. Wavy lines rising from a cup read as "hot" for exactly this reason.

Almost no sign belongs to a single pure category. When you classify one, the useful question isn't "what is it?" but "what is doing most of the work?"

The link is arbitrary

Ferdinand de Saussure, the Swiss linguist whose Course in General Linguistics was published in 1916 from his students' notes, split every sign into two sides:

• The signifier: the material form. The ink, the pixels, the sound. You can measure it and you can draw it.
• The signified: the concept it calls up in the person reading it. It doesn't live in the form. It lives in the reader's culture.

His most quoted line is that the bond between the two is arbitrary. There's no natural reason for the word "table" to mean table.

A note on scope: Saussure was talking about signs we invent, like words, pictograms and flags. For those, the bond is an agreement, and agreements get learned, inherited and broken. Cigarette smoke doesn't fit here. Nobody invented that one.

For a designer, this splits the job neatly in two:

• The signifier is yours. Stroke, grid, color, size. Everything material about the sign is under your control.
• The signified is not. It gets built in the head of whoever is looking, using their culture. You can't impose it.
• That's why you test. If meaning lives in the other person, the only way to know whether your sign works is to ask them.

Three ways to fail

Charles W. Morris, in Foundations of the Theory of Signs (1938), gave us three dimensions for looking at any sign. Think of each one as a separate grade, which means three separate ways to fail.

• Syntactics: What it covers: How signs relate to each other formally; The design question: Does the family look like a family?
• Semantics: What it covers: How signs relate to the things they refer to; The design question: Can people tell what it names?
• Pragmatics: What it covers: How signs relate to the people using them; The design question: Does it work for this person, here?

In practice:

• Syntactic failure. Eight good drawings that don't look related: different stroke weights, different corners, different logic.
• Semantic failure. Beautiful and consistent, and nobody knows what it means. The user guesses, and guesses wrong.
• Pragmatic failure. Perfect on your monitor, unreadable under a harsh afternoon sun or from where people actually stand.

Put the three thinkers side by side and you get a small toolkit:

• Peirce: The question: How does it stand for its object?; The answer: Icon, index, symbol
• Saussure: The question: Where does the meaning live?; The answer: In the culture of whoever is looking
• Morris: The question: How do we judge it?; The answer: Syntactics, semantics, pragmatics

A pictogram is an icon with rules

A pictogram resembles what it names, which makes it an icon in Peirce's sense. But it also has to read without text, at small sizes, and as part of a set.

It's worth separating two jobs that usually get lumped together:

• A pictogram informs. It names a thing, a place or an action without words. It lives in signage, instructions and ISO standards.
• A UI icon acts. It's a control you tap. It lives in interfaces.

The word itself comes from the Latin pictus, "painted", and the Greek gramma, "something drawn or written".

The craft has a short, well documented lineage. Tokyo 1964 had to welcome a world that didn't read Japanese. Art director Masaru Katsumie and designer Yoshiro Yamashita solved it without translating anything: 20 sport symbols and 39 facility symbols, the pictogram system most histories treat as the starting point. Then came Lance Wyman's work for Mexico 68, Otl Aicher's system for Munich 1972, and in 1974 the symbol set AIGA produced for the US Department of Transportation (34 symbols, with 16 more added in 1979).

Aicher didn't draw figures. He defined axes: vertical, horizontal and 45 degrees. Every arm, leg and torso falls on one of them. Nobody draws by eye; you pick an axis. That constraint is why a football player and an archer read as relatives.

Three lessons from that lineage still hold:

1. The system matters more than the single icon. Nobody remembers one Munich pictogram. People remember that they all looked like siblings.
2. The rule comes before the drawing. You decide which numbers you'll draw with, then you draw.
3. Conventions get inherited. A sign designed for one event ends up as the restroom figure in every airport on the planet.

Emoji, the pictogram everybody uses

In 1999, Shigetaka Kurita drew the first 176 emoji for NTT DOCOMO on a 12 by 12 pixel grid. At that size there's no room for detail: every pixel is a decision. The set is now in MoMA's collection.

Emoji weren't born a standard. They became one. SoftBank had put emoji on a phone two years earlier, and almost nobody remembers it, which tells you being first isn't enough. Unicode adopted emoji in 2010, and today the standard encodes close to 4,000 of them. Each one went through a committee, a grid and a legibility review. It's probably the most used pictographic system in history.

The bad news

Almost no icon is understood on its own. Nielsen Norman Group's research on icon usability keeps landing in the same place: outside of a handful of near universals, people need a label.

So text isn't a crutch for the icon. It's part of the system.

Try this

Pick ten icons from your phone's home screen or ten signs from a building you know. For each one, write down what's doing most of the work (resemblance, physical link or learned convention) and which of Morris's three failures it's most exposed to. The ones you mark "learned convention" are the ones a first time visitor is most likely to miss.

Further reading

• Albert Atkin, "Peirce's Theory of Signs", Stanford Encyclopedia of Philosophy.
• Ferdinand de Saussure, Course in General Linguistics (1916).
• Charles W. Morris, Foundations of the Theory of Signs (1938).
• Aurora Harley, "Icon Usability", Nielsen Norman Group (2014).