1# Application Icons
2
3An application icon should artistically and accurately signal the purpose, functionality, and brand identity of the application.
4
5![canvas-xhdpi](figures/canvas-xhdpi.png)
6Example OpenHarmony application icons
7
8
9
10## Design Principles
11
12Comply with the following principles when designing OpenHarmony application icons:
13
14|![elegantly-simple@2x](figures/elegantly-simple@2x.png)|![instantly-recognizable](figures/instantly-recognizable.png)| ![emotionally-engaging](figures/emotionally-engaging.png)|
15| -------- | -------- | -------- |
16| **Elegantly simple**<br>Add to your application icon elegance accented by simple elements and clean lines.| **Instantly recognizable**<br>Make sure your application icon accurately conveys what it represents: the purpose, functionality, and brand identity. Strive for high legibility and recognizability.| **Emotionally engaging**<br>Carefully use graphics and colors for your application icon to effectively communicate ideas and your brand's visual identity. |
17
18## Graphics Design
19
20Comply with the basic principles and design methods described below when designing an application icon.
21
22
23### Basic Principles
24
25Your application icon should be dominated by a single element, a metaphorical illustration that fully represents the purpose and functionality of the application. Use smooth lines, neat proportions, and well-thought-out colors.
26
27![canvas-01xhdpi](figures/canvas-01xhdpi.png)
28
29
30### Design Methods
31
32To maximize consistency and harmony of icon graphics, OpenHarmony theme icons follow the golden ratio.
33
34
35#### Derivation of the Golden Ratio
36
37![golden-ratio](figures/golden-ratio.png)
38
39
40#### Use of the Golden Ratio
41
42The figure below illustrates the golden ratio used in the application icon design.
43
44![canvas-02xhdpi](figures/canvas-02xhdpi.png)
45
46
47## Icon Deliverables
48
49The OpenHarmony application icons are delivered using adaptive icons. The table below lists the icon deliverables that should be provided.
50
51| Attribute| Description|
52| -------- | -------- |
53| Format| png |
54| Size| 288px\*288px |
55| Content| One foreground layer + One background layer|
56
57Square image resources are required, as shown below.
58
59![adaptive icon](figures/en-us_image_0000001600905394.png)
60
61
62### Implementing an Adaptive Icon
63
64After the correct image resources are provided, the system uses an adaptive mask to process the icon to ensure that all icons are displayed consistently on the home screen, as shown below.
65
66![layered-icon](figures/layered-icon.png)
67
68- Visible area: After the foreground layer and background layer are overlaid, the 2/3 area in the middle is displayed. The size of the visible area is 192 px x 192 px.
69
70- Mask: The mask area is used.
71
72To ensure that your icon can maintain the optimal display effect in different use scenarios, test the display effect as shown below.
73
74| ![en-us_image_0000001650549569.png](figures/en-us_image_0000001650549569.png) | ![en-us_image_0000001650467121.png](figures/en-us_image_0000001650467121.png)|
75| -------- | -------- |
76| Settings icons| Notification icons|
77
78| UI| Icon Size|
79| -------- | -------- |
80| Settings| 40 vp \* 40 vp (120 px \* 120 px)|
81| Notification| 16 vp \* 16 vp (48 px \* 48 px)|
82
83
84For details about the default application icon design template provided by OpenHarmony, see [Resources](design-resources.md).
85