Cilck Here

Uncertain if the course is right for you? Call Expert
Have doubts about the course? Free Webinar
Get one to one session with our Mentor Book Session

Using Icons in Design? 3 Problems + 5 Solutions

WE love icons. Our users love icons. Little kids love icons. They are useful to the elderly. What else can I say? Icons are an integral part of any design. They save us some words and they express a lot more than words.

So why is it so important to use icons in the design if you are an UX designer?

Icons, when used properly bring the right user experience and come with many usability benefits. These are the top 5 reasons why we use icons in the design process:

Easily recognizable

By using common icons in your designs, your audience can recognize them instantly, icons will help them with navigation and tasks.

They save you Space

This benefit is particularly necessary on mobile devices where using icons will save you valuable space.

Better touch targets 

The suggested icon size for mobile devices is 1 cm X 1 cm, a perfect target for tapping with your finger.

Icons are universal 

Universally accepted means, icons may be simply understood, even though users don’t speak your language.

Icons are aesthetically appealing

When well-designed, icons will create a website or app more visually engaging.

Well well, this article is not about the importance of using the icons, its about what goes wrong with the icons?

So, where do icons go wrong?

There are 3 primary reasons when we evaluate icons and their wrong usage. If you carefully read and test them in your mind, you might have a chance to find one of the reasons suitable for you and further, you can avoid it.

I think, making all these 3 mistakes is good for you. You will avoid them in future and use icons flawlessly. Read them, and bring perfection in your icon usage.

1. Wrong size

This mistake can happen in two different ways. One of them is, we use icons made for smaller usage and then scale them up and another is using icons made for larger usage and scale them down. Just a vice versa case. Yep, you guessed it right, using smaller icons at bigger places and bigger icons at smaller places will just ruin their beauty and you will end up making them horrible. In both cases, you will lose their elegance so avoid this mistake.

Using icons in the wrong size is due to the lack of right eye. If you have an eye for aesthetics and beauty, you will never commit this mistake. There are websites around the internet which are using icons in the wrong manner. If you come across any of such website, do let us know what you found wrong with the usage of icons in it. Comments section is right under this article.

2. Unfamiliarity

So, above this point, we discussed how size matters when it comes to icons. Ok, so size is not the ‘only’ factor in the right usage of icons.

What about the context? If you have supposedly used right icons but what if they lack context? What if people are not able to connect them with the right meaning? 

As discussed why icons used, they must translate themselves into people’s language. So, using unfamiliar icons will just confuse your users. Hence, maintaining the familiarity between your icons and what you want to say just remain cool.

3. Labelling

What if you have a habit to put a text or label before the icon? You will lose the use of icon here.

Human brains process the images faster than the text i.e. letters and numbers so if you use both the labels and images i.e. icons in the place, you will lose the importance of icons here. Why? Letters are nothing but images. So, using labels before the places of icons will just throw your icon ideas in the trash.

So, here we discussed the 3 problems, now let’s see how we can overcome these 3 problems…

1. Use the right size

Every icon is designed with a purpose and size is one of them. If some icons are made to be used in the larger sizes, you should use them in the bigger sizes. If some of them are meant to be used in the smaller ones, use them in the size they are meant for.

If your client is not cool with the idea of using the right sized icons, convince them for the same. Give them an idea of how it will look weird. Even if they are not convinced, you have done your job right.

2. Customization

Sometimes, you need to use custom icons in order to make your platform stand out. There are two types of icons, universal and custom. If your client has a new and different product to offer, use the customized icons.

Creating icons for the specific usage but understandable by common user will help you create a new context with the icons. You can be a trendsetter in the world of iconography.

3. Universal icons

When you need a fast reaction, clickbait actions and easy understandability, use a universal set of icons.

An easy example of these universal icons is street signs and traffic signals. Here, they keep using the signs which use icons and colors which everyone can recognize. 

If your website is new, the platform is new to the users, use universal icons and get faster results.

4. Icons first, labels next

A great design is both about form and function. Use icons first and then text or label. This way, you can use the icons efficiently and get the most out of them. 

5. Be unique, and test

You can use the icons to be unique but you need to test them with the common users. Sometimes, you can feel that the icons are so smart for the platform but your users might be losing the meaning of it. Get the test done with the common users, this way you can unique as well as creative at the same time.

So, we discussed the 3 problems and 5 problems with which, we can be perfect with our icon usage. If you like this article, don’t forget to share it with your fellow designers and drop us a comment if you have any suggestions.

For more information on UX design and other industry-leading courses, visit www.felix-its.com.

our locations : Mumbai – Andheri east , Pune – Kothrud,Vimannagar ,Pimpri.

Want to get details about the course? Provide your details and we will contact you.






    Verify Code (required)