White-label Your Desktop App

White-labeling the Rocket.Chat desktop app allows you to customize branding and visual identity for the application to align with your organization. This typically includes replacing visual assets (icons, tray images, branding surfaces) and updating build-time metadata used during packaging and distribution. This document provides a step-by-step process for white-labeling your desktop app.

To follow the instructions, you must have a basic understanding of Git, Node.js, JavaScript, and Electron.

Customize visual assets

Oftentimes, white-labeling involves replacing or regenerating application assets used across the UI and system surfaces. Rocket.Chat utilizes a mix of standard image formats and React-based SVG components to ensure high-fidelity rendering across different display densities. The primary asset directories are located under:

• ./src/ui/icons/

• ./src/ui/assets/

These files are implemented as React components rather than static images. As a result, changes must preserve valid JSX/TSX structure.

Asset updates are not reflected automatically; they must be recompiled as part of the asset build step. After modifying any asset files, regenerate derived assets by running:

yarn build-assets

This step ensures all dependent icons and images are rebuilt consistently across platforms.

Customize tray icon

The system tray icon can be customized in two supported ways, depending on your workflow and familiarity with React components.

• Option 1: Replace platform-specific tray icons directly by modifying the image files under /src/public/images/tray . This approach is straightforward and suitable when you already have finalized icon assets.

• Option 2: Modify the base icon component located at /src/ui/icon/AppIcon.tsx . This component serves as the source for generating all derived icons used by the application. When updated, it allows consistent regeneration of icons across resolutions and platforms. This approach is generally preferred if you are comfortable working with TSX and want a single source of truth.

After making the changes, run this command to compile the new assets:

yarn build-assets 

Customize About screen

The About screen manages the display of versioning, logos, and copyright attribution. To modify the copyright or layout, go to  /src/ui/components/AboutDialog/index.tsx . You can update text content such as copyright information here. If the application logo has already been replaced as part of asset customization, it will automatically be reflected in this screen without additional changes.

To manually override the copyright string, update:

const copyright = `© 2026-${new Date().getFullYear()}, Your Organization Name`;

Build and package the white-labeled app

We use electron-builder to compile and produce the executable files. To make any updates,

1. Check the file electron-builder.json.

2. Update all references to the term rocket.chat/rocket/chat.rocket/rocketchat based on the context of each setting.

• See the electron-builder configuration guide for more details.

• To maintain automatic updates, see the electron-builder publish guide.

After making any white-labeling change in the configuration, build a new release by running these commands:

yarn build
yarn release

See the GitHub repository for more information on configuring CI/CD.

Theming for Rocket.Chat is still under development. You can follow the discussion to learn more about it.