How to Design Better Icons
April 16, 2021 - Reading time: 4 minutes
Interface iconography tips & tricks.
Iconography is one of the most crucial parts of the user interface. It’s a visual language that represents commands, content and reveals the meaning behind functionality.
Your icons should always represent simple visual metaphors that users can understand and recognize instantly.
Based on how you design and use icons in your product, you can bring a feel of uniqueness to the brand. So here are my tips to help you design better icons.
Tip 1 — Set up a grid
You’ll never create just a single icon. You always design a set. To make your set uniform, you will need a grid.
Define the safe zone and set keylines. Use a resulted grid as a template to solidify all your icon’s proportions and sizes.
Tip 2 — Make it consistent
Use the same line width, corner radius, and fill style when designing your set. This will ensure your icons look brand unified and more recognizable.
Exmaple: Line thickness - 2px, corner radius - 3px;
Tip 3 — Make it clear
Less is more in the icon design. Use clear metaphors with the same amount of details to make each icon easy to recognize and understand.
Tip 4 — Use equal spacing
Use the same amount of space between your icon elements to make your set look harmonious.
You can count the distance between vector lines by holding the ALT key in Figma, Sketch, or XD.
Tip 5 — Optical correction
Align your icon elements based on the optical center and balance the visual weight.
Tip 6 — Fill the space
Rotate narrow icons and use the whole container space to get better readability.
Tip 7— Combine styles
Use fill & outline styles to describe the interface states and help the user spot the right icon or button.
Tip 8 — Handy tools
Tools
- Icons8.com
- iconfinder.com
- flaticon.com
- thenouproject.com
Resources
Updates
FAQ