Code for App icon design

Product icon Grid has formed a consistent standard, and set up a clear set of graphic element positioning rules. This standardization brings about a flexible and coherent system.

The above is already full size proportional to the high width grid chart can be right click Save as a reference map to use

Grid

The shape of the key line

The shape of the key line is the basis of the grid. Using these core shapes as a guide, you can make the entire related product icon consistent visual proportions.

Square

Height & Width: 152

Circular

Diameter: 176

Vertical Rectangle

Height: 176 Wide: 128

Horizontal Rectangle

Height: 128 Wide: 176

DP Unit Grid

The launcher on the device displays the product icon (Edge 1DP) in 48DP, so when you create the icon, use the 48DP size, and enlarge it 400% to the X (Edge-modified 4DP) when necessary.

Maintain such a shrinkage ratio to keep the edges sharp and aligned when the size is reduced.

1:1 cell grid

4:1 cell Grid

Geometric

We have set preset rules for these specific key lines: round, square, rectangular, orthogonal, and diagonal. This versatile and concise element palette is designed to unify product icons and standardize their placement on the grid.

Why do you want to do this? The famous visual illusion cases above the right figure can be exemplified:

The same long line segment different visual performance produces the same visual perception, the rectangle's visual perception area is relatively large, so the relative grid line centered minimum part to design to achieve a variety of other shape style icon unity.

Content Area

Content should be kept within the active area and, if necessary, content can be extended to the modified area, but not beyond.

Active area

Cosmetic area

Key line Shapes

Key-line shapes are the foundation of the grid, and the consistency of the system icons can be maintained through key lines.

Square

Width & Height: 18px

Circular

Diameter: 20px

Vertical Rectangle

High: 20px, Width: 16px

Vertical Rectangle

High: 20px, Width: 16px

Geometric

We have set preset rules for these specific key lines: round, square, rectangular, orthogonal, and diagonal. The purpose of this versatile and concise element palette is to unify the Google system icons and specifications for their placement on the grid.

Build

Composition

System icon Profiling

Stroke end

Angle

Leave White

Stroke

Internal Corner

Border area

Angle

Consistent fillet radius (2px) is the key to unifying a full range of system icons, and do not modify it.

The angle inside the icon should be at right angles, and do not modify it.

External corner

Inside corner

Stroke

Consistent brush width (2px) is also the key to unifying a full range of system icons, please keep the width of 2px on the outside corners.

Consistent

Polyline and Angle

Stroke end

Internal Corner

Visual correction

In extreme cases, the necessary corrections can increase the sharpness of the icons. If necessary, maintain a consistent geometry with other icons, and do not distort them.

Complex

Narrow

Empty

For readability and touch operation, the icons can be left with a blank area around them.

Empty area

Placed

----------------------------------------------------------------------------------------------

Best practices

Consistent icons can be beneficial to the user to understand, in different applications also try to use the existing system icon.

(pictured above) desirable

Use the same brush width and the end of the square stroke.

(above) not to be taken

Do not use a different brush width and a non square stroke end.

(pictured above) desirable

Make the icons look positive and firm.

(above) not to be taken

Don't tilt, rotate, or make icons look solid.

(pictured above) desirable

Simplify icons to make them more legible and readable.

(above) not to be taken

Don't overdo it so that the icons are complex.

(pictured above) desirable

Make the icons more geometric and become more visible.

(above) not to be taken

Don't overdo it, use the fine brush width.

(pictured above) desirable

Use a consistent geometry shape.

(above) not to be taken

Do not use too loose a shape.

(pictured above) desirable

Let the icon on the pixel (X, Y coordinate values do not contain decimals).

Icons should be equal in width and height (e.g. 24x24) to avoid distortion.

(above) not to be taken

The icon is not at the pixel point.

Width and height range.