harmony 鸿蒙Application Icons

2025-06-12
浏览 (4)

Application Icons

An application icon should artistically and accurately signal the purpose, functionality, and brand identity of the application.

canvas-xhdpi Example OpenHarmony application icons

Design Principles

Comply with the following principles when designing OpenHarmony application icons:


Elegantly simple Add to your application icon elegance accented by simple elements and clean lines.	Instantly recognizable Make sure your application icon accurately conveys what it represents: the purpose, functionality, and brand identity. Strive for high legibility and recognizability.	Emotionally engaging Carefully use graphics and colors for your application icon to effectively communicate ideas and your brand’s visual identity.

Graphics Design

Comply with the basic principles and design methods described below when designing an application icon.

Basic Principles

Your 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.

canvas-01xhdpi

Design Methods

To maximize consistency and harmony of icon graphics, OpenHarmony theme icons follow the golden ratio.

Derivation of the Golden Ratio

golden-ratio

Use of the Golden Ratio

The figure below illustrates the golden ratio used in the application icon design.

canvas-02xhdpi

Icon Deliverables

The OpenHarmony application icons are delivered using adaptive icons. The table below lists the icon deliverables that should be provided.

Attribute	Description
Format	png
Size	288px*288px
Content	One foreground layer + One background layer

Square image resources are required, as shown below.

adaptive icon

Implementing an Adaptive Icon

After 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.

layered-icon

Visible area: After the foreground layer and background layer are overlaid, the ²⁄₃ area in the middle is displayed. The size of the visible area is 192 px x 192 px.
Mask: The mask area is used.

To ensure that your icon can maintain the optimal display effect in different use scenarios, test the display effect as shown below.