1. Home
  2. Installation & Configuration
  3. Install VisualSP
  4. Customize the Microsoft Teams app icons

Customize the Microsoft Teams app icons

Applies to: VisualSP
Print Friendly, PDF & Email
VisualSP is available as a plug-in for Microsoft Teams. When installed, you will see a VisualSP icon in the railing:

This icon can be changed to reflect your company branding by editing the Teams app package. The app package file is a .zip file containing the following:
  • A manifest file named "manifest.json", which specifies attributes of our app and points to required resources for your experience.
  • A transparent "outline" icon (32 x 32 pixels) and a full "color" icon (192 x 192 pixels).

Icons

Microsoft Teams requires two icons for your app experience, to be used within our product. Icons must be included in the package and referenced via relative paths in the manifest. The maximum length of each path is 2048 bytes, and the format of the icon is .png.

color

The color icon is used throughout Microsoft Teams (in app and tab galleries). This icon should be 192x192 pixels. Your icon can be any color (or colors), but the background should be your branded accent color.

outline

The outline icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." This icon must be 32x32 pixels. Your outline icon must contain only white and transparency (no other colors). The icon can be white with transparent background or transparent with a white background. The outline icon should not have extra padding surrounding the icon and should be as tightly cropped as possible while still maintaining the 32x32 dimensions. Here are a few good examples:

Sample outline icons

For example, say your company is Contoso and you have two new icons:

Icon showcase

Here's how the icons would appear in the UI:

Flyout

Sample Contoso icons

App bar and home screen

Sample Contoso icons

Editing the manifest.JSON file

Extract the files from the app package file. The extracted files will include 2 images and a manifiest.JSON file. Replace the images with your own. Next, open the JSON file with a text editor. Here are some fields that you can change to customize our app with your brand:
  1. Change the name of the app in the rail:

  2. Update the "outline" and "color" icon names with the names of your branded icons:

  3. Change the name of the app in the tab:

  4. Change the name in your channel:

Upload your package into a team using the Store

  1. In the lower left corner of Teams, choose the Store (or Apps) icon. On the Store page, choose "Upload a custom app".
View team
    1. In the Open dialog, navigate to the package you want to upload and choose Open.
    2. On the next screen, click on the Add button:

Adding the VisualSP for Teams app to all users

As a Microsoft 365 administrator, you can install the VisualSP app for Teams so that all of your users have access to VisualSP for Teams by default. Here are the instructions from Microsoft: Manage app setup policies in Microsoft Teams
Updated on August 10, 2020

Related Articles