Icons

Basic application icons used in forms, components and copy

Don’t mix styles

There are two popular icon styles: outline and filled

Do
All icons got one style.
Don't
3 icons in outline style and 1 filled mixed

Exception: Use filled style to show an active state.

Do
Follow the consistency of forms. All icons in one style.
Don't
The calendar icon has sharp edges while other icons have smooth edges.

Think twice paint once

Generally, icons change colors after shifting their state: hover, active, focus, error, success. Omit use of colors without the intention of indicating their state.

Do
2 colors used with one highlighting active tab.
Don't
3 different colors used without any purpose.

Exception: Some apps are well suited for colored icons. This approach creates a playful atmosphere. It also may work as color coding.

Use popular sizing

Basic icon sizes are 18x18px and 24x24px.

Do
Consistent 24x24px icon size.
Don't
Different icon size in similar components.
Do
Use small icons to complement the text.
Don't
Don’t use big icons…

Add details with purpose

Avoid high-detailed icons as they distract from main thing. Simplify them for better clarity.

Do
Good and simple icon, easy to recognize
Don't
Too many needless detail
Do
Simple icon with familiar angle, easy to recognize
Don't
Don’t tilt, rotate, scale