Add an icon to your app

Goal

Add a custom app icon to use it as a logo for your app. The custom app icon helps visually identify your app on the app toolbar on a Miro board. You can also set a custom app icon to be displayed on an App card to provide a visual cue about the content of the app card.

Prerequisites

Before you begin, make sure that:

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Your development environment includes Node.js 14.15 or a later version.

Check the app icon requirements

You can upload 2 icon images:

• A monochrome icon.
  The monochrome outline icon is visible on the app toolbar, after installing the app.
• A full-color icon.
  The full-color icon is visible on the app toolbar panel and on the Marketplace, if you publish your app.

The app icon needs to meet the following requirements:

• The file format must be SVG.
• The SVG file cannot be empty: the file size must be larger than 0.
• The SVG file must be at least 1 (visible/rendered) character in size.
• The SVG file size cannot exceed 5000 bytes.
• The shape of the icon image must be square.
  For example: 24x24, 32x32
• Monochrome icons cannot include more than 1 color.
  Regardless of the color of the original icon, valid monochrome icons are converted to indigo.
• Monochrome icon images cannot include gradients.

Example:

Figure 1. Miro logo icons: full color and monochrome (indigo).

Upload an app icon

To upload an app icon:

1. Sign in to Miro.
2. Click your user profile avatar, and from the drop-down menu select Settings.
3. On the settings page, click the Your apps tab, review the Terms and Conditions, select the I agree to the Terms and Conditions checkbox, and then click Create new app.
4. On the Create new app dialog:
   a. In App name, enter a name to identify your app.
   b. From Select the Developer team for your app, select a developer team associated with your user profile.
   c. Click Create app.
5. On the app settings page, scroll down until you reach the Display information section.
6. Under Outline icon, drag and drop a valid monochrome SVG file onto the drop area.
   Alternatively, click choose a file to open your local machine file explorer, and to select a valid monochrome SVG file to upload as an outline icon.
7. Under Color icon, drag and drop a valid full-color SVG file onto the drop area.
   Alternatively, click choose a file to open a file explorer on your local machine, and to select a valid full-color SVG file to upload as a color icon.

Figure 2. Select a monochrome SVG icon for Outline icon, and a full-color SVG icon for Color icon.

Review the app icon

After uploading the monochrome and the full-color SVG icons, the file drop areas display previews of the files.

To overwrite one or both uploaded files with different ones, click choose a file, and then proceed to select and upload another set of SVG files.

Figure 3. Add an app icon: review the monochrome outline icon and the full-color icon in the previews.

After successfully uploading your app icons, they are available on the Miro boards where the app is installed:

• The monochrome outline is visible on the app toolbar.
• The full-color icon is visible on the app toolbar panel (and on the Marketplace if you publish your app).

Figure 4. Monochrome outline app icon on the app toolbar, and color app icon with app name on the app toolbar panel.

See also

• Check Miro App Examples on GitHub
• Design guidelines
• Create an app card