Material Design icon Design

Material Design icon Design

Icon-System icon

Definition

The System icon or icon in the UI indicates a command, file, device, or directory. System icons are also used to indicate some common functions, such as clearing the recycle bin, printing or saving.

The design of system icons should be concise and friendly, with a sense of fashion, and sometimes it can also be a bit humorous. To simplify a lot of meaning to a simplified icon, make sure that the meaning of the icon is still clear and understandable under such a small size.

Design principles

Shows the geometric shapes of some black bodies.

A concise simhei image can have unique quality when it adopts symmetric and consistent design.

Grid, ratio, and size

The icon mesh is the reference mesh of all icons and has a specific composition and proportion. An icon consists of plane ry of some alignment icon mesh. There are four basic ry shapes in the plane, with a specific size to ensure that all icons have a consistent visual sense and proportion. You can use two different Icon Sets with the same shape and size in the application: Status Bar, context icon set, Operation bar, and desktop icon set.

Rounded corner

The square and rectangle should be added with rounded corners. You can also use both the rounded corners and the sharp corners, which is more concave. All icons composed of strokes or lines have sharp corners.

The System icon set of each dimension uses rounded corners of different sizes to ensure visual consistency.

Consistency

Consistency is very important. Try to use the icons provided in the system, as well as in different apps.

Context and icons in the Application

The icon mesh determines that the icon is located in a fixed size (24 DPS) area.

Original article: Icons Translation: Haoxiqiang Proofreader: cxytomo