Marketplace App Logo Guidelines

Note To improve the user experience, the design guidelines have been upgraded and migrated. The app logo guidelines described in this article reflect the content before the upgrade. The design guidelines document was upgraded on May 30, 2022. View the latest content directly at DingTalk App Icon Design Guidelines. The app logo appears in the Developer Console, the DingTalk Client-side, and the marketplace. Provide a clear, appropriately sized logo image to ensure a polished and complete appearance in the interface.

Use Cases

The app logo appears as a rounded square in the DingTalk Workbench, the marketplace, and the app details page. Note: In Workbench components, the app logo is displayed at an actual size of 40 × 40 px. Ensure the logo remains recognizable at this size.

Submission Specifications

Logo Format	PNG/JPG static image
Logo Size	240 × 240 px (square, no rounded corners)
Logo File Size	120 KB or less
Logo Background	Opaque

Design Guidelines

1. Design Principles

Principle	Description
Simple and Clear	On mobile devices, app logos are usually scaled down to varying degrees. When designing, pay close attention to keeping the graphic simple to avoid a lack of clarity that makes it unrecognizable at small sizes. A simple graphic design also improves the overall quality of the logo.
Accurate Expression	The first prerequisite for an excellent logo design is accurate meaning, allowing users to instantly recognize what it represents. Highly distill the product’s characteristics to find the graphic elements that best represent its attributes, and emphasize these elements in the design.
Distinctive	There are many products of the same type, and their app logos tend to look similar. To make your app stand out from the many similar products, it must convey distinctiveness while highlighting the product’s core functions, avoiding visual homogeneity.
Brand Continuity	For products with brand recognition, make full use of their brand logo. These logos have already established a strong brand impression and influence, along with high brand recognition. When designing the app icon, fully leverage the existing brand image. Let the brand’s deep heritage continue to work and extend the brand image, giving the brand stronger vitality.
Avoid Using Text	Using text as an app logo is a crude and simplistic approach. Because there is too much text, it can only be shrunk within a limited space, making the app logo look crowded and hard to read. Another fatal consequence of using a lot of text is that it greatly reduces the aesthetic quality of the app icon, which not only fails to create a good impression but instead provokes user aversion.
Do Not Use Photos	Do not use a photo directly as an app logo. Photos are bitmaps, which easily lose quality when scaled, causing a series of potential issues when used to design a logo. The role of a photo is to provide creativity and inspiration for logo design, not to be used directly in creating the logo. Vector graphics can be scaled without loss of quality, so they are the most suitable choice for logo design.

2. Container Grid

The app logo output must preserve the integrity of the main element and must not be cropped by the front-end circular container.

2.1 Image Cropping Requirements

The actual output size of the app logo is 240 × 240 px, with square corners, in PNG/JPG format and a solid, opaque background.

2.2 Grid System

To keep the visual weight of app logos consistent, ensure the graphic within the background container fits inside the grid areas of a circle, square, or rectangle.
The unit grid size is 8 × 8 px.

2.3 Examples

3. Background Color

Second-party and third-party apps can use their own brand colors.
For the background color of first-party apps and feature entry icons, select from the following color palette.
Do not use gradients, pure white, or pure black. The background should be a single solid color.

4. Graphic Requirements

Design the main element using a “solid/filled” graphic approach to keep the app logo clear and eye-catching in various scenarios.
Use pure white fill to ensure it stands out sufficiently against colored backgrounds.
If second-party or third-party developers have their own brand graphics, present them in a flat or silhouette style so they remain easy to recognize when the app logo is scaled down.
For correct examples, refer to “2.3 Examples.”

A text logo, or a main element that is too small in area, is difficult to recognize when actually displayed. Using a linear graphic that is too thin on a light background does not provide enough clarity when actually displayed.

Security Risks

The app logo must be original and free of legal risks.
The app logo must not contain prohibited, restricted, or vulgar illegal characters or patterns, such as pornography, gambling, drugs, firearms, or tobacco. It must not involve political leanings or political overtones.
The app logo must not contain tags such as red dots, NEW, or HOT.
Do not use a QR Code as a mini program logo.

File Download

DingTalk App Logo Design Template

Platform overview

Developer guide

Build a bot app

Event subscription

Getting Started

App Types & Access

Robots

Message Templates & Notifications

Event Subscription & Push

Security & Compliance

Connectors

Resources & Rate Limits

Sign-in & SSO

Use Cases

Submission Specifications

Design Guidelines

1. Design Principles

2. Container Grid

2.1 Image Cropping Requirements

2.2 Grid System

2.3 Examples

3. Background Color

4. Graphic Requirements

Security Risks

File Download

​Use Cases

​Submission Specifications

​Design Guidelines

​1. Design Principles

​2. Container Grid

​2.1 Image Cropping Requirements

​2.2 Grid System

​2.3 Examples

​3. Background Color

​4. Graphic Requirements

​Security Risks

​File Download

Use Cases

Submission Specifications

Design Guidelines

1. Design Principles

2. Container Grid

2.1 Image Cropping Requirements

2.2 Grid System

2.3 Examples

3. Background Color

4. Graphic Requirements

Security Risks

File Download