DEV Community

Cover image for 5 Tips to Improve Icon Usage
Wil Crat
Wil Crat

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.

Top comments (0)