Icons wield incredible power in communicating complex messages about your game. By principle, the simpler your icon, the better. But achieving this can be a challenging task – especially if your game incorporates complex mechanisms.
Just like the messages in games vary in complexity, so do their corresponding icons. Some might be simple and straightforward, like a resource card displaying just a wooden log. Others might delve into complex sequences of actions. Let’s begin with the simpler ones and gradually ease into the more complex iconography.
In their simplest form, icons are Singular. These singular icons are typically direct illustrations of real-life objects and they work the best when they mimic how those objects function in real life. Arrows point at things, so we look at where it points when we see one in a game. Shields protect you, so we expect it to protect us from some kind of threat. The heart is a vital organ so it represents health. You get the idea.
There are many successful games that just use one singular icon throughout. The wager icon stands alone in Knizia’s Lost Cities, Codenames uses only the X to represent the assassin, Kingdomino features crowns, Carcassonne uses shields and 6 Nimmt has bullheads.
Kingdomino’s crowns. You are the king – of course you should be scoring crowns!
Handshake icons in Lost Cities
Let’s take a quick look at these examples. The wager icon in Lost Cities – represented by a handshake – works like a charm, because handshakes signify bets or agreements across many cultures. Kingdomino’s crowns follow convention to the book —a regal object (crowns, goblets etc.) representing Victory Points. The X in Codenames signifies the mysterious/dangerous person – Mr X (or Ms X), but this isn’t immediately obvious to all players. Carcassonne’s shields remain an under-performer as a score modifier icon. Especially being paired with the protective-looking Castle buildings, they often mislead players into assuming they offer some kind of protection.
However, being the only icon in the game actually works to the benefit of these icons. It’s easier to remember their meaning when there is no other icon around to confuse with. This creates some room to sacrifice from functionality to support the theme, which is what 6 Nimmt does.
While a bullhead icon might not directly convey that it’s worth -1 points, being the only icon around makes it memorable—once you’ve learned what it means, you won’t easily forget.
6 Nimmt’s bullheads
Carcassonne’s shields inside a fortified castle. Don’t you feel cozy and well-protected?
The X icon in Codenames, representing the Assassin. I find teaching the rules easier when I call them “bombs” or “landmines”. You touch it, you’re out! However, CGE likely opted for a less aggressive iconography matching the preferences of the game’s mass market audience.
The elegant Patchwork.
Climbing up the ladder of iconographic complexity, let’s look at Patchwork with its two singular icons: buttons and sand timers. The sand timers are a straightforward representation of the time resource, mimicking the real-life object used for measuring time. Perfect!
On the other hand, buttons serve as the primary currency of the game; an icon that doesn’t point to its real-life usage at all! However, these buttons are physically present as tokens on the table, in large quantities. This establishes a tangible connection between the icon and the real-life object right before your eyes. Even when an icon lacks ties to widely accepted norms, it can compensate with its resemblance to a physical object on the board.
Quantity isn’t the only axis that a game can expand in iconographic complexity. Single illustrations can be used together, creating a combination we can refer to as Compound Icons. The ubiquitous “No Smoking” sign features a cigarette and a line across. If a page icon has an arrow on it, we assume it’s an upload or download icon depending on the arrow direction.
Final Girl uses compound signs in a very straightforward manner. Heart means health, a cross on a heart means “lose a health”. Star is a success, crossed out star is a failure. Sand timer icon changes colour and direction to mean either gain or lose time.
The elegance of Hanamikoji’s icon design. They work so well that one can’t help wonder if they designed the icons first, and then designed the game around it!
Compound icons can combine more than 2 illustrations. Hanamikoji provides excellent examples of this. The game’s elegant design, aligning possible actions with the number sequence 1, 2, 3, and 4, could warrant a separate article in itself. However, this elegance resonates in the design of the icons attached to these actions as well.
Each compound icon features a different number of cards, clearly conveying how many cards that an action deals with. The tick (✓) and the cross (✘) indicate whether the cards will score or be discarded at the end; utilising universally recognised symbols denoting success and failure.
Arrows appear on some cards, signifying movement across the board. The upward arrow points towards your opponent, indicating that these cards will move to their side. Conversely, the downward arrow points at you, who’ll be the new owner of these cards.
The 4th action icon in Hanamikoji also demonstrates a strong application of the Proximity Law. This theory suggests that elements placed close together are perceived as more related than those farther apart. Observing 2 pairs of cards distanced from each other, players instinctively anticipate that these cards will be split into 2 groups. The 3rd icon also demonstrates the proximity law through the misalignment of the middle card.
Another example of the Proximity Law at play can be found in Century: Spice Road. The pictured cards display compound icons composed of several cubes and arrows in between – symbolising motion between these cubes: transmutation, in this case. The arrangement of cubes at either end of these arrows leads us to assume that all the cubes will participate in the transaction in their respective groups. However, a gap between any 2 cubes could introduce doubt into our assumption.
Century: Spice Road resides among the trench of games that come with various resource types. I didn’t delve into the design of resource icons as these symbols typically directly represent resources present in the game world (for valid reasons), allowing minimal flexibility in icon design. The crucial consideration would be assigning each icon a distinctive shape, particularly for accommodating colour-blindness—a design aspect where Century: Spice Road’s cubes appear to have fallen short.
Century: Spice Road’s clear interface
The Ghost Meter of Paranormal Detectives.
Finally, I’d like to share an example that I find particularly outstanding. Paranormal Detectives features a Ghost meter that the Ghost player uses to describe a secret answer to the other players. Each track on the meter represents a distinct adjective. Have a look and see how easy you find these icons to work out.
In addition, this icon set utilises a particular technique that I haven’t encountered very often: contrast. Not just contrast of colours but contrast in the semantic sense. If you were to only see the icons at the top without their counterparts, decoding their individual meanings could have proven much more challenging. However, the juxtaposition of their opposites immediately highlights the adjective defining the dichotomy. One could even argue that an icon, its track, and the contrasting icon together constitute the three elements forming a well-functioning single compound icon. And, I wouldn’t necessarily disagree with that! It is possible to convey complex messages effectively by employing semantic contrast in your compound icons.
If this article reminded you of any great examples with icons, please share them in the comments. Or feel free to just share your thoughts on this topic. I hope this has been an enjoyable read for you, as this was my first ever blog article. Please stay tuned for the upcoming parts of the series, where we’ll explore more complex compound icons, when you don’t need an icon, how to avoid icon overload and much more!