Customize the Microsoft Teams app icons

VisualSP is available as a plug-in for Microsoft Teams. When installed, you will see a VisualSP icon in the left rail:

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:

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

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

Flyout

App bar and home screen

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".

1. 2. In the Open dialog, navigate to the package you want to upload and choose Open.
   3. 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

Update an already installed app

If you are trying to customize the app after it has already been installed, you will need to completely remove the old app instance before you can update it and make sure to update the version number. You could update this number to 1.4.1, for example:

To remove the app, simply right-click on the icon and select 'Uninstall':

To confirm the app has been completely removed, see if the app is no longer on the left rail and in the message box, and it isn't available when you try to add it to the rail.