Three basic specifications for Icons Design

The specification of icon design covers the expression of colors, symbols, lines and so on. When the entire design system is not so clear to establish an icon library, we should choose a more conservative approach to remove the set of icon specifications that the design system will affect.

The specification will cover the basic composition of the Icon Icon: canvas size, line and visual weight.


Visual weight

The same high and wide images have different visual weight because of the shape, such as the diameter 14px circle and the 14px wide square in the visual look not the same size.

In Sketch, the size of objects is often judged by height and width, and the negative space formed by different shapes is not visually different.

Looking at the above picture, you can see that the square is visually maximum, while the circle and the triangle are smaller; therefore, it seems as large as possible to maintain each icon on the visual weight.



Of course, there are some exceptions, such as the direction (left and right, up and down) for the drop – down menu or the last page, which are maintained at the “visual” center when drawing these icon icons.



The size and drawing space of the canvas


The size of the canvas for making the icon icon is 14px * 14px. The drawing space will vary with composition, based on square composition.

Square composition
Because the square is the largest figure in vision, the square composition will reserve 1px space on the canvas of 14px* 14px.

Circular composition
The circular composition will exceed the space reserved for 1px, in order to make the visual weight equal to the square composition.


Line use

The use of lines can be divided into three elements:


1px line elements (main composition)
The main composition will form the main shape of the icon icon. The main part of the icon icon is painted with 1px thick round head line, and the rounded corners are 1px.


0.8px line elements (for details)
Besides the main shape, the details inside the icon, the rounded corners of the 0.8px line are Sketch line rounded corners.


1.4px elements (usually used for origin, square)
For special cases, when icon details are round, they will be used.


At present, only the most basic composition of the icon, of course, the use of lines will also be influenced by the style of the design system, which will continue to be revised in the future.

Leave a Reply