Categories
Uncategorized

How to Design Better Icons

View the original post

UI icon tips

Interface iconography tips & tricks.

This article is brought to you by Buninux.com.
Visit our premium asset store and level up your design inventory. ☟

Buninux – World-class UI/UX assets for designers and developers.

How to design icons

Intro

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 the feel of brand and 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.

Iconography grid

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;

Consistent icons
Icon set from Super Basic Icons.

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.

Clear icon metaphor

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.

Equal spacing in icons

Tip 5 — Optical correction

Align your icon elements based on the optical center and balance the visual weight.

Icon optical correction

Tip 6 — Fill the space

Rotate narrow icons and use the whole container space to get better readability.

Fill the container space

Tip 7— Combine styles

Use fill & outline styles to describe the interface states and help the user spot the right icon or button.

Combine icon styles

Tip 8 — Handy tools

Tools

  • Icons8.com
  • iconfinder.com
  • flaticon.com
  • thenouproject.com

Resources

Thanks for the read. This material was originally was posted on my Instagram. Please subscribe for more usefulness.

Also, you can visit my premium UI asset store and support your local design dealer. ☟

Buninux – World-class UI/UX assets for designers and developers.

Buninux — World-class UI assets for designers & developers.


How to Design Better Icons was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.