Table of Contents
Icons are used almost everywhere, be it a website, app or even print. We like to use them in our designs to improve the user experience as well as the design itself. The problem is that it is very easy to make a mistake. This ends up damaging the design and worsening the user experience. In this article, we will discuss the top 3 mistakes to avoid and 5 tips or practices to use icons to create great designs and amazing user experience.
3 main reasons why icons don’t work
Let’s start with three main reasons why icons often either don’t work as they should or at all. There is some chance that you will find that you were doing one of these three mistakes. In my case, I have “successfully” done all of them. Hopefuly, reading and learning about these three mistakes, as well as the good practices that follows, will help you perfect your work with icons on the first try.
Using icons in a wrong size
There are two ways we can go wrong when we work with icons. First, we can take an icon, or a set of icons, designed for smaller scale and scale them up. Second, we can take an icon, or a set of icons, that were designed for bigger scale and scale them down. In both cases, none of these icons will work as they should. In the first case, our icons will look just terrible. This is a bit hard to describe in words. From the point of aesthetic, these icons will look bad, like screaming “I am too big!”. These icons lack elegance.
The problem with size no.1
There is a problem, especially with this first case. Many people who are not so familiar with design, or have trained eye, will often completely miss this. They will not see that something is “right” or that it doesn’t “feel” right. This is also why it is so easy to find examples of this very bad practice. One example is, quite unfortunately, FontAwesome website. Take a look at the sections pitching the main features and reasons why we should use Font Awesome.
I have to admit that on this example, this issue with icons is not so obvious. However, some of the icons team behind Font Awesome used to provide visual aid for their pitches just doesn’t look good. For example, take a look at the “tachometer” icon next to the “Add some Awesome” text, “desktop” icon next to the “Desktop Friendly” text, or “calendar” next to the “Latest Updates” text. Especially, these three icons would look much better in smaller scale or size.
Let me give you another, and much better, example of a design using icons in a bad size. This is a website for open-source microblogging network Mastodon. Scroll down the section with features. This website is following even two bad practices. First, those icons are just too big. Second, the text in the second and fourth row is right aligned. Never use right aligned text for longer content. Doing this makes it harder for people to read the content. They have to constantly look for the beginning of the line. Align left and rag right.
The last example is a website for a project management app Tasman. This is actually a very good example to illustrate the power of using icons in proper sizes. When we scroll to sections with features we can see examples of both, small and big icons. Let me ask you one question. Which icons look better, the big ones in center of images or the smaller ones used as a pattern around the center icon? We can see that those smaller icons, used as pattern, are more elegant and aesthetically pleasing.
The problem with size no.2
In the second case, the problem is the exact opposite. The icons used in the design are too small. Anyway, what exactly is small? Small is a relative and vague term. When we talk about small icons, we talk about icons that are so small that it affects their legibility. In other words, it is hard for people seeing these icons recognize the these icons. As a result, people can’t fully understand the meaning of these icons, interact with the design properly.
The problem in this case is not only that the overall experience suffers. Illegible or unrecognizable icons can cause a much bigger issues. For example, they can put health of people in danger. Imagine an icon showing a warning about some serious danger. Unfortunately, the icon is too small and people may either not understand what does it mean or they may even miss it completely. As a result, the icon can’t work as it should and help people avoid getting hurt.
Sure, this is one of the more extreme examples. However, it is important for us to see and understand one thing. When it comes to icons, size can play a crucial role, much more important than just making the icon “look bad”. We need to understand that icons, and symbols in general, are tools that help us provide important clues and information faster than written text. However, this works only when they are legible and recognizable. Which brings us to second reason why icons may not work.
Trying to be unique – unfamiliarity
We just discussed how size can influence the legibility and recognizability of the icon. Both of these attributes are important. However, even if we nail down these attributes and our icons perfect, we have not won yet. Our effort spent on making all icons legible and recognizable will be wasted if people can’t connect these icons with the right meaning. As we discussed, icons and symbols are tools provide us with important clues and information faster than text.
However, icons have to be familiar to people in order for icons to fulfill this function. When people see the icon they have to understand its meaning. They have to be able to “translate” that icon into text, metaphorically speaking. Otherwise, the icon will fail. It will remain just a relatively small picture that says absolutely nothing. I have abslutelly nothing against uniqueness. It is necessary to create something that stands out. We just have to do it correctly.
Using label before the icon
The main purpose of icons and symbols is to provide us with important clues and information. And, to do this faster than written text. I know that I am starting to be annoying with repeating this over and over again. However, it was necessary to do it in order to explain this mistake we may be sometimes doing, consciously or unconsciously. This mistake is all about using text or a label before the icon related to that text.
Human brain, our brain, can process images much faster than text. Sure, the text itself, or rather the letters, are basically also images. However, our brain has to process them, connect them into words and them find meanings for these words. Only then we can fully understand what is the text about. Otherwise, the text will remain just a giberish that will make no sense to us. Icons are supposed to be one way to solve this issue, unless they are not.
What happens when we place the label, or any text, related to the icon before the icon? We take one of the main and most significant advantages and upsides of icons have and we are throwing it into the trash can. Let’s think about it. Does it matter how faster the brain is in processing images than text if the image follows “after” the text? No, it doesn’t matter at all because users will always see the text first, not the icon.
Here, using icon is pointless. The icon has no real function. It is just another piece of decoration at the and of the line. From the point of usability, the design would probably work just as well without the icon. We are still forcing the user to read the text first and we assume that she can fully understand the text. We are not making it easier for her by giving her some quick visual cue first, and longer description later.
5 tips on how to use icons in design the right way
We know the three things we should never do. Now, let’s switch the sides of the coin. Let’s take a look at what some things we can and should do to make sure our iconography will work in any and every design.
Use correct size
We discussed two main issues related to icons and their scaling or sizing. These issues were, first, icons are used in a bigger size than they should be. Second issue is the direct opposite, when icons are used in a smaller size than they should be. Whenever we want to use some icon, we have to remember that one critical thing. Every icon is designed with a special intent or purpose. This intent or purpose is also specifies how the icon should be used. What do I mean?
Some icons are designed with the intent to be used in bigger sizes. As a result, these icons usually look great even if we go over the board and make the really big. Their designer took this into account and these icons can handle it. There are also icons that are designed with the intent to be used only in small sizes. We can scale these icons down as much as we want and these icons will still look great and remain legible. Sure, there are limits for how far we can go, but you know what I mean.
So, how can we avoid this issue and make sure all icons look great? The easiest way to achieve this is by viewing the icon we want to use in different sizes. If our eye is trained enough, we will be able to see the difference. We will see that some icons look better in a smaller size while some in bigger. We will see how the size of the icon changes legibility of the icon, its aesthetics, cleanliness and quality. It will be easier to spot these changes with some icons and with certain sizes. We need to have patience and play with it.
Okay, but this may not solve our problem. What if we have to use some type of icon in a size that is not proper for that icon? There are two potential ways to fix this. First, we can look for a better icon that looks great in the size we need and that conveys the same meaning. Then, if we find this icon we can replace it. Sure, we have to convince our client to do so, but this should not be a problem using the right arguments, such as improved legibility, usability, perceived quality of the design which can increase conversions. In other words, more potential for increasing the number of users, customers or profits, or all.
Second, we can try to use the same icon, just in a small size. In the end, more white space is usually better than less. This may again require some negotiation with our client. Fortunately, we can use the same arguments we used for the first fix-improved legibility, usability, perceived quality of the design which can increase conversions. Another way to push this change is by introducing the first potential fix as our main plan and then offer this as an alternative.
This small psychological trick can help us introduce the second fix as something that is less disruptive. We will not change the iconography of the design. Instead, we will only change the size of the icons, or some of them. This is much more subtle change and our client may be more inclined to accept it.
Finally, if our client wants to keep the current iconography and size without any changes, we can accept it. We did our job with sharing our concerns as well as alternative solutions. However, that was our only responsibility. We have to accept that our client has the final word and that we can’t control it, at least not completely.
Custom icons for closed ecosystems, universal everywhere else
One question we often have to ask is when can we use custom icons and when universal. By custom I mean icons made for some specific product or platform, that may not be recognizable for people not using that product or platform. In this case, I would choose universal, or universal-like, icons on places where people first their first get in contact with the platform or product. And, on places where people expect to see universal icons.
For example, if our product or platform has a website, iconography used for social media, menu, contact, features and similar objects should use iconography that look familiar (universal, or universal-like). In this case, there will be a loot of people landing on the website for the first time. Completely custom icons could confuse people and maybe even force them to leave the website before taking any action. The same for apps. On these touch points, universal icons work better.
On the other hand, when user gets deeper into our product, or platform, we have much more freedom. In a fact, I think that using custom icons here is to our benefit. Custom icons can help us make the user experience more unique and bind the user to the product. We can teach the user to “speak” the language of our product. This will have two benefits. First, it will be esier for the user to interact with our product. Second, it will be harder for her to leave it.
The only thing we should consider here is creating proper user onboarding process. We have to make sure the user will, in some way, learn the meaning of the iconography used in our product. Otherwise, every unfamiliar icon will be a reason for confusion, discomfort or frustration. And, when any of these reach certain point, user may decide to leave and find an alternative to our product.
Universal icons when fast reactions are required
Another situation where we should prefer universal icons is when users need to react quickly. This is why street signs use symbols and traffic lights use colors. There is only so such time to react. Reading words and thinking about their meaning could be costly, even dangerous. Ecosystem of a product or platform can be an exception. If user knows the symbols used by the platform very well, it may be more beneficial to use custom icons, or mix of custom and universal.
However, we must make sure user knows the iconography really well. Really good user onboarding is necessary. And even then, it is still questionable and hard to assess how well the user can react if we use custom iconography or universal. This is probably why many apps and platforms stick to universal iconography on certain places. It is a safer bet. Conclusion? Go with universal icons when fast reaction is required. It is safer.
Icon first, label second
This one will be short. If we want to use icons to their full potential, it is very simple. We must always put icons before any label or text, that is related to the icon. This enables us as to use icons as both, visual and also functional aid. Great design is about both, form and function. Great design can be eye-pleasing as well as functional. There is no rule or law forbidding this. If so, let’s break it. Anyway, for now, remember this simple rule: icon first, any label or text second.
Be unique, but test
The last advice will be again very simple. It is absolutely okay to make our designs more unique and distinct by creating a custom iconography. We just have to make sure that people can recognize the icon and understand its meaning. In other words, we should test the iconography with real users, of a good sample size. If our tests say icons work well, we can use as much creativity as we want. Remember, no assumptions, only real and measurable data.
Closing thoughts on icons in design
This is all I have for you today. We discussed the top three mistakes that are often made in design when it comes to iconography. Then, we discussed five simple tips or practices that will help us use icons to create great design and amazing user experience. I hope you enjoyed this article and learned something new, something useful that will help you in your work. Final message? Remember that icons are much more than just a decoration. They can be powerful tools for enriching user experience. Let’s start using them that way.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
