This article was translated from Slava Shestopalov’s original article

1. Use grids

An icon is usually evolved from basic elements such as rectangle, circle and triangle. When the icon is blurred and the light spot is observed, it will be found that they basically have the same visual weight.

2. Notice the pixel grid

Align with the grid and give line ICONS a line width of 2 pixels to make them look good on non-Retina screens. A 2 pixel center aligned border ensures adequate thickness and a clear outline.

3. Keep the details of the icon consistent

It is best to start with the most complex icon, which determines the level of detail and keeps the rest of the ICONS the same level of detail.

4. Control the size of the minimum clearance

Within an icon, the distance between adjacent elements cannot be too small; Within a set of ICONS, determine a minimum distance and apply it to the ICONS so they don’t feel stuck together.

5. Cut out duplicates

There may be repetitive details in a set of ICONS. Cut out the repetitive details and let the user focus on the different elements. Like fraction simplification in math, the less distracting the user sees, the easier it is to understand the icon.

Choose a particular style and follow it

Do not mix side and front views in a set of ICONS. Keeping ICONS in a consistent style helps users identify them and implies that they have the same importance or status.

7. Use multiples of 2 as dimensions

8-pixel grids and 12-column layouts are used in many app interfaces because they are more flexible than the decimal size. 12 is divisible by 2, 3, 4, and 6, so icon areas of 24 and 48 pixels have become standard areas that can be scaled whenever needed.

8. Keep the silhouette clean and accurate

The goal is not to be perfect, nor to draw a perfect line for the sake of drawing a perfect line. But it is important to render ICONS correctly, not warped, in the final product. Always draw ICONS with as few shape anchors as possible and make sure there are no gaps between adjacent elements.

9. Clean up source files

When creating SVG diagrams using design tools such as Sketch, there are a number of redundant “by-products” such as redundant groups, layers, and cropped templates. While everything looks beautiful in Sketch, there’s nothing extra.

Those who see this Are looking to make better designs with some skills and experience. If you want to know more about Design, I recommend you read the following article: Why UX, CX, UI, IA, IxD, and Other Sorts of Design Are Dumb