Product Designer

Blog

How Icons are a Universal Language

It all started in baggage claim…

With design, it doesn’t matter what language you speak. We communicate visually. Icons are an essential design element because they are symbols you consciously and unconsciously interact with every day. However, it takes time to fully understand why icons are such a powerful communication tool.

Words are not always necessary to communicate. I’ve thought of that statement many times before, but never understood why I feel so strongly about this. Not long ago I connected the dots: Icons have taught me so much throughout the years, and I never noticed until now.

To give you some background, here is a tiny story about me.

When I was 15 years old, I moved from my native Venezuela to the United States. I grew up learning English in school but had never lived in a non-Spanish-speaking country (or any other country for that matter). If it was not for icons at the airport, I would’ve never known where to get my luggage. I didn’t know what “Baggage Claim” meant, but I understood the suitcase icon. When you see an arrow next to a suitcase icon, the language you speak doesn’t matter, because you know which direction to go.

https://www.pexels.com/@esther-234072

It’s as if I recently had an epiphany of how I learned many words in English through icons, and how signs have added to my vocabulary over the years. For example, I had no idea what the word for towing a car was, but I always understood the illustration of a truck picking up a car. I knew where not to park, and I eventually also learned the word “tow” from those signs.

https://www.flickr.com/photos/smartsignbrooklyn/

I have always been passionate about art and design, but I just recently understood the deeper meaning behind my strong opinions about certain aspects of design. One of my big passions is making icons and illustrations. I love building iconography libraries and finding new ways to show a message visually. Because I can visually represent an idea, I love being able to communicate without words. I have the power to communicate visually, and it doesn’t matter if I’m speaking English or Spanish, because people are still able to understand the message I want to convey. Icons and design made me feel appreciated and included.

Now, let’s get into the power of icons in design, specifically in product design.

I believe certain things do not require words, and in some cases, words can become visual clutter. In product, we’re continually working with limited spaces. There are only a certain amount of pixels on a small mobile screen, and we have to utilize that space efficiently. Symbols can convey a message that is universally understood, all while being very space-efficient, making them the perfect key component to a user interface.

“ As symbols, icons can communicate powerfully, be delightful, add to the aesthetic value of software, engage people’s curiosity and playfulness, and encourage experimentation. These symbols are key components of a graphic user interface — mediators between our thoughts and actions, our intentions and accomplishments.”

Functional + Familiar = Useful

Because a user should not have to decode its meaning, icons should be easily understood without labels. There are certain icons that we use every day, and we understand their meaning without any labels describing what they mean. For example, we know that an “X” on a browser window will close the browser. An “X” on a modal will close the modal. There are also new symbols we have learned in recent years, like three short horizontal lines make a burger menu and very often that menu symbol turns into an “X” to close your menu.

https://dribbble.com/marcelodavanzo

Let’s talk about the thumbs-up vs. the thumbs-down icon because it’s often used in products to show good vs. bad. Facebook, for example, is available in 43 languages, and they use the same icons in each one, showing once more how one icon can be a powerful unspoken communication tool. Facebook uses a “thumbs up” to show that you like something. The language next to the icon changes, but not the symbol.

https://jajodia-saket.sjbn.co/2011/04/facebook-like-button-in-different-languages-as-it-appears-to-people-around-the-world/

Spotify also uses the thumbs up and down for a user to express if they liked or disliked the song that was playing.

https://www.spotify.com/

At The Zebra we use this same icon to gather user feedback to know if a piece of information was helpful or not.

https://www.thezebra.com/

Icons are inclusive.

Icons are an excellent way to be inclusive in design. Think of people using products that probably don’t understand the language that the product is written in very well. Having pictorial descriptions can show empathy.

If you’ve seen Mean Girls, I’m sure you’re familiar with the following exchange:

Damien: “You’re taking 12th-grade calculus?”

Cady: “Yeah, I like math.”

Damien: “Ew … why”

Cady: “Because it’s the same in every country.”

Icons are a visual vocabulary that anyone from any culture, any country, and any walk of life can understand. A heart means love. A happy face means happiness. A pen means to write. If you’re driving and see an airplane icon, you know an airport is nearby. I realized only recently that icons and design helped me feel included. They helped me understand things that otherwise I would not have when I was learning English. In a way, icons and design helped me feel a little less like an outsider. Icons should be used as a powerful design tool because they are useful, familiar, and inclusive.

This post was originally written for The Zebra’s Medium Blog.

Marivi Carlton