5 Tips to Improve Icons Usage

Using icons could bring a large variety of benefits. For example, they are very attractive, engaging, and save space, etc.

On the other hand, it is not an easy discipline. Icons can point out your weakness in UI design very strongly!

See the following list of tips and resources on how to use icons in your design correctly.

Make it Simple

Usability, beauty, clarity, and legibility lie in simplicity. Try to choose or create not complex icons with various colors. Be sure that icons are easy to recognize and memorize.

Be Consistent

Consistency thought the whole interface is the key principle, providing design usability. Consistency of icons is much easier to achieve, if you use one icon package for the interface.

Test Scalability

The icons should be recognizable also in smaller sizes. Test their scalability to be sure that your design will fit all devices and sizes.

Size & Hit Target

The most usual size of systems icons is 24 x 24 dp (I would not recommend to make icons smaller than 20 x 20 dp). However, you should think about the target size, which should take at least 48 x 48 dp on mobile devices.

Don’t forget to check if all icons have the same padding!

Explain Icons

There are some cases when users just can’t understand the meaning of the icon on the first try. In these cases, I would just use text labels to explain them. The bright example is the bottom navigation.

My Top 3 Icon Resources

Jan Mráz

UX/UI Designer
Jan is a UX-design freelancer and design lead at Atheros Intelligence. He has a rich experience in the creative IT industry, education in business administration, and management from the University of Economics Prague. Contact Jan to talk about your next project.

The above article may contain affiliate links, which help support Clever Sequence

Close this search box.

Latest Guides