DEV Community

Cover image for 5 Tips to Improve Icon Usage
Just Determined
Just Determined

Posted on

5 Tips to Improve Icon Usage

1. 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.

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

3. 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.

4. Size & Hit Target
The most usual size of system icons is 24 x 24dp (I would not recommend to make smaller than 20 x 20dp). However, you should think about the target size, which should take at least 48 x 48dp on mobile devices. Don't forget to check if all icons have the same padding!

5. 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 labels to explain them. The bright example is the bottom navigation.

I will do a video to showcase this on My Channel. Follow me and wait for it.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay