Designing Icons: Introduction
- Written:
- on
Interested about what makes for an awesome icon? Us too! In this Designing Icons blog series, we’ll explore icons, their metaphors, and what goes into making a great icon. And then we’ll do a walkthrough of the tools needed to create your very own awesome icon sets.
You don’t need money, don’t need fame. Don’t need no credit card to ride this train…
Did you ever think about how an icon of a heart can mean more than one thing? How it can be a literal stand-in for the anatomical organ in our chests, but can also be used as an analogue for what that organ represents? As Huey Lewis so aptly put it, “that’s the power of love.” Or, the power of an effective icon. Whatever.
From health apps to wayfinding signage, icons help us navigate the world. Icons guide us, warn us, and inform us. They track our pulse, they point the way to the train station, and heck, they even let us know how to change a hawk into a little white dove…
But icons don’t need to be a curious thing. The most effective are those that can be understood quickly and intuitively.
First Things First: What Is an Icon?
The word “icon” can mean many things, but for our purposes, we’ll define it as follows:
An icon is a simplified illustration used to represent an idea, concept, or physical object.
In short, an icon is a visual metaphor. It can be an ideogram, where the symbol represents an idea or concept, or a pictogram, where the symbol represents a more concrete physical object. In most cases, an icon straddles the line between the two. And that’s part of the beauty of icons – they’re inherently flexible.
An icon is a simplified illustration used to represent an idea, concept, or physical object.
An icon of a heart can mean an organ that pumps blood, or it can represent love. Likewise, an icon of a dog can represent a “dog” in particular or be broadened to mean “animals” as a whole. When paired with an “x” or crossed-out, it can mean “no pets allowed”— the same root, but with shades of meaning.
Icons are all around us, and we interact with them from the moment we open our eyes. They’re present on our alarm clocks, on our stoves and microwaves, and even in our cars. Icons abound in our digital interfaces, from mobile phones to websites.
That small sun and cloud in your weather app? That’s an icon. The little image of a piece of bread on your toaster dial? That’s an icon. The low-fuel indicator on your car dashboard? Icon! The arrow on the road sign pointing you towards Hill Valley? That, compadre, is also an icon. That little “x” in the corner of your browser window? Well, yes, that’s also an icon … but don’t you dare touch it. We’ve got a lot more learnin’ to do.
A (Particularly) Brief History of Icons
Symbols have been used to communicate ideas and concepts for, well, ever. The oldest known non-figurative drawings ever found have been traced to over 64,000 years ago. That means that neanderthals used an early form of iconography! In the first “icons”, meaning and imagery were likely the same. A drawing of a bird represented a bird. These first artists created stylized representations of the world around them: stars, rivers, mountains, trees. In other words, the first icons were pictograms.
Jump ahead 40,000 years, and we find rock art featuring similar geometric shapes and signs that span thousands of miles — between France and Spain, all the way to Indonesia and Australia. As time marched on, so did the complexity of communication. Ideograms became more common, and our ancestors began using icons to tell stories, provide information, and transmit warnings. Egyptian Hieroglyphs became a language in their own right, and iconography found its way into cultures across the globe, from Native American symbols all the way to Olympic pictograms.
In the early 20th century, a series of symbols began appearing on fences and in rail yards throughout the United States. These “hobo hieroglyphs” were a secret iconographic code used and understood only by itinerant travelers. A scrawled picture of a cat meant “kind lady lives here.” A house with a blacked-out window or a slashed doorway meant a “well-guarded house.” These symbols were a quick and easy way to communicate with other hobos and became a language in their own right.
Today, we use icons to share information quickly. From signage at international airports to daily reminders about your step count, icons are an integral part of our lives. At their most efficient, they can transcend words and cultures. Simply put, icons are as close to a universal form of communication as we have.
Icons are as close to a universal form of communication as we have.
What Everyday Icons Work (Or Not)?
If you’re still reading this, chances are you’re just a little bit particular about building great icons. We are too — and boy oh boy, there’s so much more to say!
So how about you? What “everyday life” icons do you encounter daily? Which do you think work well? Which ones seem confusing or clunky? Let us know what you think on the Twitters.
In our future posts, we’ll talk about how effective and appropriate metaphors rely on knowing the context in which an icon will be used. In other words, when it comes to building icons, context is king.
And in the spirit of making things awesome-er, check out Font Awesome 6 Alpha and let us know what you think!See what’s new in Font Awesome 6