Icons
Basic application icons used in forms, components and copy
Don’t mix styles
There are two popular icon styles: outline and filled
All icons got one style.
3 icons in outline style and 1 filled mixed
Exception: Use filled style to show an active state.
Follow the consistency of forms. All icons in one style.
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.
2 colors used with one highlighting active tab.
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.
Consistent 24x24px icon size.
Different icon size in similar components.
Use small icons to complement the text.
Don’t use big icons…
Add details with purpose
Avoid high-detailed icons as they distract from main thing. Simplify them for better clarity.
Good and simple icon, easy to recognize
Too many needless detail
Simple icon with familiar angle, easy to recognize
Don’t tilt, rotate, scale