Preparing Assets

Preparing Assets for App Publishing

Before you publish your Aragon app, you will need to prepare a few types of assets in order for the Aragon client to display it correctly and differentiate it from other apps.

The main assets are:

  • App menu icon (SVG)

  • Large app icon (SVG or PNG)

  • App badge icon (SVG or PNG)

  • Screenshots (PNG)

  • Short description (text only)

  • Long description (Markdown or text)

In the next sections, we will describe the requirements for each asset one by one. Templates are also provided to help you prepare everything.

If you are looking for a design tool you could use Figma or Canva among other options


This icon is used on the left-hand app navigation panel of the Aragon client. Size of the icon, including padding, is 22x22 px. The padding should be at least 3px or more on each side, depending on the icon shape

Color of the icon should be #888888 so that the Aragon client can automatically colorize the icon in different app states

Line width of the icon shape should be 1px so your app icon will look consistent with others. Sticking to the pixel grid is also recommended for sharp rendering

Export to SVG for App Center submissions \

Large app icon

The large app icon will be displayed in the Aragon client's App Center, and unique icons will help users to visually differentiate between apps. The large app icons may be displayed in various sizes, so you should target at least 192x192px when designing the icon. Try to have some visual similarity to the App menu icon - otherwise users may be confused after installing the app

The core Aragon apps (Finance, Token Manager, and Voting) have a gradient background and a white cutout shape - but it’s up to you to choose the branding and style for your app icon

Export to SVG or high res (192x192px) PNG for App Center submissions

The exported icon should be square. The Aragon client will automatically apply a mask with rounded edges

App badge icons

The app badge icon can be used in the UI whenever the app is referenced in other apps. The badge is a default aragonUI component, and has some neat extra features, like being able to view the contract address and version of an app quickly. This should be visually the same icon as the Large app icon. However, if your Large app icon has a lot of detail, you may want to reduce the level of detail for the app badge icon as it’s smaller

Export to SVG or high res (48x48px) PNG for App Center submissions

The exported icon should be square. The Aragon client will automatically apply a mask with rounded edges


The screenshots will be shown in your app's expanded App Center page, to show users a preview of your app before deciding to install it. Include 2-8 main screens of your app - so it’s easy to see what it does

You can include both desktop and mobile (portrait) screenshots

Desktop (landscape) screenshots should be 16:10 aspect ratio, minimum resolution 2560 px × 1600 px (they will be automatically resized)

Mobile (portrait) screenshots should be 9:16 aspect ratio, minimum resolution 1080 px x 1920 px (they will be automatically resized)

Export to PNG for App Center submissions

App description

The description of your app is very important for users to quickly understand what it does. The App Center can render two descriptions: a short preview and a longer, detailed description.

Short description

This is shown on your app's card in the App Center - it will be the first impression of your app, so make it count! Maximum 3 lines of text, max character count 60

Keep it very easy to understand at a glance

Don’t repeat the app name in the short description

Long description

The long description will be shown in your app's expanded App Center page. We recommend using a concise, informative paragraph followed by a short list of main features. Potential users will likely skim through this, so make it easy to digest. Maximum character count 400

Ideally a short paragraph about the main app function, then a list of features

Keep it simple to understand for all types of users

You can use Markdown for rich text

Last updated