Icons are the crowning touch in the design of web pages and apps. They can not only help convey text information, but also be recognized efficiently as an information carrier. Icons also have a certain decorative effect, which can improve the aesthetics of interface design.

Two. Icon type

At present, there is no authoritative classification about the types of icons. I divide them into two categories according to their uses: "function icons" and "display icons".

1. Function icon

Generally speaking, all icons that users can click on in the UI interface can be regarded as function icons, which often represent a function or a link jump. Typical application scenarios of such icons are the bottom tab bar in ios system and the left side slide menu option in MaterialDesign. Icons in some lists or cards also belong to function icons, but such icons often represent a function, while the bottom tab bar icon often represents a page or plate. 2. Show icons

Compared with functional icons, display icons have a sense of design, uniqueness, connotation and identifiability. Generally speaking, the display icon is mainly the startup icon of the application. This icon represents the attributes, temperament and brand image of a product.

Three. Icon style

There are many styles of icon design, such as linear icon, plane icon, line-plane icon, plane icon, light imitation icon, imitation icon, hand-drawn icon and so on. Let me briefly introduce some common icons.

1. Linear icon

Linear icons are icon styles composed of lines, curves, points and other elements. This kind of icon is light and concise, which has a certain imagination space and will not cause too much visual interference to the interface.

2. Face icon

Surface icons can be simply understood as the filling of linear icons, but surface icons are more stable, three-dimensional and clearly convey colors than linear icons.

3. Line-face combination icon

The typical representative of line-surface combination icon is "MBE style" icon, whose design feature is the combination of rough drawing edge and offset filling surface, which is smart and vivid. Thick lines play an absolute role in dividing the picture, highlighting the content and showing clearly.