Some Icons Are Verbs, Some Icons Are Nouns
Getting fluent at the Language of Iconography
You see icons everywhere now, in websites, in apps, in software. It is an essential part of UI elements. UI is a language, so is iconography. In fact, some icons are verbs, some are nouns.
Iconography is a language
Iconography is so close to our traditional language system, that referring iconography as a language may differ from referring UI design as a language, because the latter is more of a metaphor and the former is more literal. So literal, that we create fonts for icons now, just like we do with text.
In fact, in the early years of human history, you can’t really differentiate icon from text, they are ultimately the same thing:
Each icon has its meaning. But unlike word, which most of the time has multiple meanings, each icon only has one meaning. That is why it is becoming more and more popularly used in UI design. UI should be clear, no double meaning, and icon has it in its nature.
Another advantage icon has over text in UI design, is its universalness. You don’t need to translate it to other languages, everyone understands it.
Like how our nature languages got developed thousands of years ago, iconography is going through the same process. Gradually the language gets richer, gets larger and larger vocabulary, and then a system will emerge – the grammar. Currently icon is at its early stage, where the language is growing its vocabulary. The noun project did a great job making this a team effort using crowd sourcing.
When search “menu” at the noun project, you will get multiple results. These different interpretations of the same icon is equivalent to the same word set in different typefaces:
It is not equivalent to saying the same word “menu” in different languages as “menu”, “菜单“, “menú”, “valikko”. Ultimately iconography is (or will be) one single language that is world wide universal, despite culture and geography differences. And that is beauty of it.
Android icon system vs. iOS icon system
Android icon system and iOS icon system shared some glyphs, for example, the hamburger icon for menu:
but they also have their own special glyphs that the other one doesn’t have the equivalent, such as android’s three vertical dots icon (joke name: kebab menu)
Some glyphs, they both have their own versions, such as “share”:
These are so drastically different, that I consider them equivalent to the same word “share” spoken in different languages, such as French(“partager”) and English(“share”). Some words are similarity spelled (flower vs. fleur), while other words are completely different (food vs. nourriture); some words exist in one language, but not in other languages, such as “Fernweh” in German which means: the feeling of wanting to be somewhere else, this word doesn’t exist in many other languages. Icon will be in the same way, each system has a growing number of icons, and inevitably they will grow into two different systems, consist of unique icons that the other system doesn’t have, icon that shared the same meaning but not the same shape, icons that looks similar but not exactly the same, all above.
Icons are now included in unicode
If you aren’t familiar with unicode, it is a growing library of standard characters. It gives each character a unique id, and use it across platforms, so no matter which country you are in, whether you are using Mac or Windows, we all know which character you are speaking of. It used to just contain the main stream languages’ characters, such as latin characters, later on it included CJK (Chinese, Japanese and Korean) characters, and now more and more icons are part of unicode too, such as ✏!
When you send a smiley face from your iPhone to your friend’s android phone, you aren’t sending image of smiley face any longer, instead you are sending the unicode U+263A, and on the other end, the operating system will understand this unicode as smiley face and render the smiley face emoji icon. Different phones may have different emoji icon sets, so your friend may not see the exact same emoji icon you sent out from your phone, but they will know it is a smiley face. It is similar to you send text “hello!” in Helvetica from your iPhone, but your friend will see it in Roboto on their android phone.
Some icons are verbs, some are nouns
If we treat icon as a language, then let’s get into the juicy part: the grammar. While letter is the smallest unit in language, icons resembles word more than letter. Icon carries meaning, just like word does. In some cases in UI design, the meaning of an icon is placed below it, like on TED.com
Some icons are verbs in this example, such as “pause”, “favorite”, “download”. Some are debatable, they could be either a verb or noun, like the volume icon, while “volume” itself is a noun, the icon has underlying meaning of “change the volume”.
In this google analytics example, the icons used are all nouns. For example,
the people figures icon means audience. It couldn’t be interpreted as verb in any way.
A good practice of choosing icons, is to use the right category of icons grammar wise. One good example is choosing icon for floating action buttons. The icon on floating action button should always be a verb because the button should indicate an action. See the following examples of floating action buttons: they are all using verb icons.
“add”, “clean”, “write”, “search”, those icons are verbs, used on floating action buttons to suggest actions.
On tabs, however, if we choose to use icon or icon + word to represent the tabs, the icon should be a noun. The google analytics is a good example of using noun icons on tabs, as well as the example below
To sum up, some icons are verbs, some are nouns, some could vaguely be both. Try to use the right classification of icon in applied places, such as tabs and floating action buttons.
What is next?
If we see icons as a new language, then this would be the first time ever we collaborate on creating a language in such a global scale, in such an active way too. There are designers posting icons everyday on dribbble.com and the noun project, and new icon services popping up every now and then too.
and the newest member: https://nucleoapp.com/
But it is still early to declare creating a new language is what we are doing. Most icons are just created for its own specific use in particular apps and websites. We are accumulating vocabularies. Inevitably, people will create two very different icons for the exact same meaning. What I see next is that after we have accumulated big enough vocabulary, we will start to eliminate some of them that shared the exact same meaning. Having different drawing style of the same icon is good and very necessary, but having 2 different icons shared the exact same meaning will only create recognition barrier and UX noises.
different drawing styles of the camera icon
Having these camera icons in different drawing styles are necessary, because icon needs to fit into individual design’ visual system. We need icons to be drawn differently, in solid fill style, or line style, or more elaborative or more minimalistic styles, depending on what type of design we are creating.
two completely different icons share the exact same meaning “share”
However having these two icons which have the same meaning “share” are not necessary and bad, and when time is right, we will work on eliminating them, so that we will have a clean, efficient, abundant but not redundant language system of icons.
Written by Wenting Zhang, creator of underline.js and typedetail.com. Mostly writing about typography, iconography and colors, or jokes around design and tech. If you are interested in these topics, follow me on medium or on twitter @DesignJokes.
