---
title: "Rocket Chat App Graphics Guidelines"
slug: "graphics-guidelines"
description: "Explore graphics guidelines for Rocket Chat apps. Create secure, clear visuals that align with collaboration standards."
updated: 2026-02-11T04:15:06Z
published: 2026-02-11T04:15:06Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Graphics Guidelines

These guidelines help ensure that the app assets meet the technical requirements for uploading to the marketplace, avoiding potential rejection or delays in the app review process.

[Download Figma template](https://www.figma.com/community/file/1223633152022074485)

[Embedded content](https://cdn.iframe.ly/yd0M002)

## App icons

App icons create the first impression potential users get from your app. A well-designed icon can lead to more downloads by conveying the app's purpose and capturing users’ attention.

The app icon is displayed on:

1. App listing
2. App detail
3. Rocket.Chat sidebar

### Specs

**Dimensions**: 960x540px

**Format**: JPG, PNG (without transparency)

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image (1).avif)

### Guidelines

Ensure that your app icon is unique by searching the Marketplace for existing apps with similar icons before designing it.

**Do**design a unique app icon that stands out from competitors.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(68).png)

**Don’t** design an app icon identical to the icon of an existing app.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(69).png)

**Do** use a simple and recognizable design that conveys the app's purpose.

**Do**follow the visual guides so the app icon can be read in different contexts.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(70).png)

**Don't** use a complicated or cluttered design that may be difficult to recognize or distinguish.

**Don't**include the name of your app inside the app icon.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(71).png)

**Do**use a background color.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(72).png)

**Don't** use transparent backgrounds, as the app icon may not have enough contrast to be properly displayed on different themes of Rocket.Chat.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(73).png)

**Do**use the visual guides to center your logo within the frame manually.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(74).png)

**Don't** automatically center your logo within the frame; its shapes may require manual adjustments to optimize its optical balance.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(75).png)

---

## App screenshots

App screenshots help potential users understand what the app does and how it works, increasing the likelihood of installs. High-quality screenshots can enhance the app's overall branding and improve its perceived quality.

### Specs

**Dimensions**: 960x540px

**Format**: JPG, PNG (without transparency)

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(76).png)

### Guidelines

**Do**use clear, high-resolution images showcasing the app's features and functionality.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(77).png)

**Don't** use low-quality, blurry, or stretched images that do not present the app accurately or attractively.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(78).png)

**Display** the most important information and features first, using a descriptive and compelling headline highlighting the app's benefits.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(79).png)

**Don't** crowd the screenshots with too much information or use vague or generic headlines.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(80).png)