1# System Icons 2 3Icons are one of the key visual elements for the operating system and UI. They must help users easily identify the key information and semantics they represent. To ensure consistent visual experience across devices, the icon elements should be consistent and match the background against different devices in various scenarios. In addition, the color rules of human factors must be followed to provide a comfortable reading experience and a harmonious UI display for users. The system's design rules also must be followed for area charts and line charts, which use the same graphic structure to reduce the reading difficulty. 4 5 6 7 8 9## Design Principles 10 11OpenHarmony system icons pursue the design principles of exquisiteness, simplicity, and particularity. They mainly use geometry to shape graphics, simplify the structure of lines, and accurately grasp the proportion relationship. Up-to-date design languages are added to the style to make it look more fashionable. Sharp right angles are avoided to ensure that the style looks friendly and inviting. 12 13| <div style="width:50%">Exquisiteness and simplicity</div>| <div style="width:50%">Particularity</div>| 14| -------- | -------- | 15| Born from geometric shapes, simple lines, and precise control of proportions and structural positions.| Opening details show the intercalation and folding relationships, and the negative space conveys the shadow and a sense of space. | 16|  |  | 17 18## Icon Styles 19 20The system icon has two styles: outlined icon and filled icon. The two styles use the same structure to ensure consistent visual experience. <br>Icons are classified into single-color icons and dual-color icons based on use scenarios. Single-color icons are used to assist in expressing basic functions on the UI. 21|  |  | 22| -------- | -------- | 23| Outlined icons|Filled icons| 24 25A dual-color icon expresses the colorful dual-color effect based on the filled style. This type of icon is mainly used in scenarios where functions need to be highlighted. 26|  | | 27| -------- | -------- | 28| Status icon - off| Status icon - on | 29|  |  | 30|Functional entry icons| Operational entry icons| 31 32 33## Icon Size and Layout 34 35The standard size of a system icon is 24 vp. The size of an icon in the main drawing area is 22 vp, with 1 vp of space reserved around the drawing area. 36 37|  || 38| -------- | -------- | 39|Drawing area|Space area| 40 41**Key Shapes** 42 43Key shapes are the foundation of the grid. Using these core shapes as a guide ensures a visually consistent scale and volume in the icons related to the product. 44 45|  | | 46| -------- | -------- | 47|Square<br>Width and height: 20 vp| Circle<br>Diameter: 22 vp| 48|  |  | 49|Horizontal rectangle<br>Width: 22 vp<br>Height: 18 vp|Vertical rectangle<br>Width: 18 vp<br>Height: 22 vp| 50 51**Extra Visual Weight** 52 53If the icon shape is special, extra visual weight needs to be added to balance the overall icon volume. The drawing area can be extended into the space area, but the overall icon size remains within 24 vp. 54 55 | |  | 56| -------- | -------- | 57 58**Gravity Center of Icons** 59Ensure that the gravity center of an icon is in the center of the icon area. Given that the gravity center of the icon is stable, the icon can extend beyond the drawing area to the space area. 60|  | | 61| -------- | -------- | 62|<br>Recommended|<br>Not recommended| 63 64## Shape Characteristics 65 661. Line thickness: 1.5 vp 67 682. End point style: round head 69 703. Outer rounded corner: 4 vp; inner rounded corner: 2.5 vp 71 724. Opening width: 1 vp 73 74 75 76| | | 77| -------- | -------- | 78|  | **Cut-off**<br>1. Leave a margin in the upper part for the cut-off line and retain the connection line in the lower part.<br>2. Opening width: 1 vp<br>3. The cutting surface should be flat and straight. <br>4. The oblique line is 45 degrees from the upper left corner to the lower right corner. | 79 80**Graphics Overlay** 81 82Two icons are used together to demonstrate the concepts of clusters, groups, and sets. 83Leave a margin of 1 vp between shapes. 84|  | | 85| -------- | -------- | 86| <br>Recommended| <br>Not recommended| 87 88 Add the inner rounded corner of 3.5 vp to the corner of the icon gap. 89 90|  |  | 91| -------- | -------- | 92| <br>Recommended |<br>Not recommended | 93 94 95## Icon Resource Naming Rules 96 97**Naming example: *ic_Module_Function_Location_Color_Status_Number*** 98 99*ic_Module_Function* is mandatory, and *Location_Color_Status_Number* is optional. 100 101Note: All resource names must be in lowercase. Long fields can be abbreviated. The name cannot contain spaces. Different fields are separated by underscores (_). 102 103 104 105 106For details about the default icon library provided by OpenHarmony, see [Resources](design-resources.md). 107
