8 practical tips to improve the details of icon design-Free Editor Online Photoshop

The < blockquote > icon is one of the most critical parts of the UI page. It is a visual language, representing information, content and revealing the meaning behind the function.

Share the 55th article of < div > clip

Icons should use simple visual metaphors to make users understand and recognize them quickly.
Good icons will also give the product unique personality. Here are 8 simple and practical design suggestions, which can be directly applied to daily design

1. Set grid

Usually we design a group of icons instead of a single one. In order to make the whole set of icons more uniform, we first need to set up a grid.
Define the security zone and set the key line , use the same border as the template to maintain the scale and size of all icons.

2. Be consistent

When designing icons, use the same stroke, fillet and fill styles , to ensure that the icons look more uniform and easy to identify.

A group of icon design with 2px stroke and 3px fillet.

3. Specify

In icon design, less is more. Use clear metaphors and limited details to make each icon easy to identify and understand.

The more details, the better. on the contrary, we should keep the most concise on the basis of clear expression.

4. Use the same spacing

Using the same spacing between icon elements can make the icon look harmonious.
Tips: hold down ALT key in figma, sketch and XD to display the distance between elements.

5. Visual alignment

You can’t just rely on the software to align the icons. More often, you need to balance the weight of the icons and keep the visual alignment .

The most common example is play icon . The visual effect of center alignment is not good. You need to move the play icon to the right to keep balance.

6. Fill in the blanks

The readability of the icon can be improved by rotating the narrow style icon to fill the whole container.

7. Combination style

Use the combination of planar and linear icons to describe the state of the page , to help users find the right icon or button.

In the navigation bar at the bottom of the app, the area icon is usually used to represent the selected state, and the linear icon is used to represent the unselected state.