How to correctly create the outline icon for a custom Microsoft Teams app?

Question

How to correctly create the outline icon for a custom Microsoft Teams app?

Praveen Volety 25

I need to provide an outline icon for a custom Teams app (the one that appears in the left sidebar like Chat, Teams, Calls, etc.).
What is the correct size for the outline icon?

What design rules it must follow (stroke thickness, color, background)?

Where can I find the official Teams outline icons used for Activity/Chat/Teams/Calls so I can match the same style?

Is there a way to preview how the icon will look in the Teams sidebar before submitting the app?

Thanks.

Praveen Volety 25 Reputation points

2025-12-02T20:03:02.44+00:00

Hi @Chris Duong ,
Thanks for your reply.

My color icon is 192*192 pixels, and the main logo content is placed within the recommended safe region of 120*120 pixels, following Microsoft Teams design guidelines.

Could you please advise on the specific method or tool I should use to generate the outline image from my color icon so that it adheres to the Microsoft Teams design standard for the 'active' or 'selected' state in the left-hand navigation bar and also adapts to both light/dark themes?
Color_icon.png

Here's the Outline Image:
Outline_Icon-Transparent.png

Resized Image:
Outline_Icon_Final.png
Chris Duong 10,705 Reputation points Microsoft External Staff Moderator

2025-12-02T22:08:18.0766667+00:00
Hi @Praveen Volety,

Thank you for sharing your color icon and outline version. I appreciate your effort in following Microsoft Teams design guidelines for the color icon. Regarding your question on generating the outline icon that meets Teams standards, here are my detailed recommendations:

1/ Key requirements for outline icon

Size: 32 × 32 px (PNG format).

Background: Must be transparent, not white.

Color:

Use a single color (monochrome), typically white (#FFFFFF) or gray (#C8C8C8).

Avoid black outlines because they do not adapt well to dark themes.

Stroke Thickness:

Follow Fluent UI style: approximately 1.5–2 px at 32 px size.

No gradients or multiple colors.

2/ How to generate the outline icon

You can use the following methods/tools:

Figma or Adobe Illustrator:

Import your color icon.

Convert to vector outline (use “Image Trace” in Illustrator or “Outline Stroke” in Figma).

Remove fill colors, keep strokes only.

Set stroke color to white or gray.

Export as 32 × 32 px PNG with transparent background.

Online Tools:

Tools like remove.bg for background removal, then adjust stroke in Figma.

Fluent UI Icon Style Reference:

Check Fluent System Icons for stroke weight and color consistency.

3/ Preview before submission

Use Microsoft Teams Developer Portal:

Upload your app package with the new outline icon.

Navigate to Branding → Icons.

Teams will show a live preview in both light and dark themes.

Notes: From the image you provided, the outline icon you shared has a white background and black stroke, which may not adapt well to dark mode. Please update it to:

Transparent background.

White or gray stroke.

Ensure stroke thickness matches Fluent UI guidelines.

You can refer to these articles:

Official UI Kit to help you design icons and preview in Figma: Microsoft Teams UI Kit | Figma

You can preview your icon in the Microsoft Teams Developer Portal

Note: Microsoft is providing the above information as a convenience to you. Some of the websites are not under Microsoft's control. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link

I hope this helps. Should you require further assistance, feel free to contact us.
Praveen Volety 25 Reputation points

2025-12-03T04:59:04.7966667+00:00

Thanks for the detailed information. I have followed the guidelines and created the outline image. Please confirm whether this image works in the Teams sidebar for both light and dark backgrounds. Also, let me know if any changes are needed. Thanks!
Outline_Image.png
Praveen Volety 25 Reputation points

2025-12-04T10:37:55.41+00:00

Thank you for your support. I have created the image according to the guidelines. Since I don’t have developer access for Teams, I am reaching out here for assistance.
Outline_Final 2.png So, if this follows all the best practices, then reducing the image to 32×32 would be the only thing I need to do, right?
Chris Duong 10,705 Reputation points Microsoft External Staff Moderator

2025-12-04T18:42:13.5366667+00:00
Hi @Praveen Volety,

Thank you for sharing your outline icon and for following the Microsoft Teams design guidelines.

After reviewing the image you sent, I noticed the following:

The icon has a transparent background and a simple outline style, which aligns with Fluent UI principles.

However, the current stroke color is dark gray/black. To ensure good visibility in both light and dark modes, you may consider changing it to white (#FFFFFF) or a light gray.

Additional note: The stroke thickness should be within the range of 1.5–2 px when at 32 px size.

After adjusting the color and stroke thickness (if needed), resizing the image to 32 × 32 px PNG with a transparent background and no extra padding will be the final step.

Thank you again for your collaboration. If there is anything I can help you with, please let me know.
Isaac Chuah 0 Reputation points

2026-07-28T01:43:00.8933333+00:00

Hello, I have a similar issue with this attached logo. No matter what I do to the logo, the developer platform just tells me "Outline icon must use only white and transparent pixels."

I have tried multiple different export formats, editing it in Photoshop with threshold, start with an svg and render it as an anti-aliased png, nothing works. What exactly is expected? I even uploaded back the default outline.png file which I assume should be compliant. But, it isn't either - same error message.

3 answers

Your answer

Praveen Volety 25 Reputation points

2025-12-02T20:03:02.44+00:00

Hi @Chris Duong ,
Thanks for your reply.

My color icon is 192*192 pixels, and the main logo content is placed within the recommended safe region of 120*120 pixels, following Microsoft Teams design guidelines.

Could you please advise on the specific method or tool I should use to generate the outline image from my color icon so that it adheres to the Microsoft Teams design standard for the 'active' or 'selected' state in the left-hand navigation bar and also adapts to both light/dark themes?
Color_icon.png

Here's the Outline Image:
Outline_Icon-Transparent.png

Resized Image:
Outline_Icon_Final.png
Praveen Volety 25 Reputation points

2025-12-03T04:59:04.7966667+00:00

Thanks for the detailed information. I have followed the guidelines and created the outline image. Please confirm whether this image works in the Teams sidebar for both light and dark backgrounds. Also, let me know if any changes are needed. Thanks!
Outline_Image.png
Praveen Volety 25 Reputation points

2025-12-04T10:37:55.41+00:00

Thank you for your support. I have created the image according to the guidelines. Since I don’t have developer access for Teams, I am reaching out here for assistance.
Outline_Final 2.png So, if this follows all the best practices, then reducing the image to 32×32 would be the only thing I need to do, right?
Chris Duong 10,705 Reputation points Microsoft External Staff Moderator

2025-12-04T18:42:13.5366667+00:00

Hi @Praveen Volety,

Thank you for sharing your outline icon and for following the Microsoft Teams design guidelines.

After reviewing the image you sent, I noticed the following:

The icon has a transparent background and a simple outline style, which aligns with Fluent UI principles.

However, the current stroke color is dark gray/black. To ensure good visibility in both light and dark modes, you may consider changing it to white (#FFFFFF) or a light gray.

Additional note: The stroke thickness should be within the range of 1.5–2 px when at 32 px size.

After adjusting the color and stroke thickness (if needed), resizing the image to 32 × 32 px PNG with a transparent background and no extra padding will be the final step.

Thank you again for your collaboration. If there is anything I can help you with, please let me know.
Isaac Chuah 0 Reputation points

2026-07-28T01:43:00.8933333+00:00

Hello, I have a similar issue with this attached logo. No matter what I do to the logo, the developer platform just tells me "Outline icon must use only white and transparent pixels."

I have tried multiple different export formats, editing it in Photoshop with threshold, start with an svg and render it as an anti-aliased png, nothing works. What exactly is expected? I even uploaded back the default outline.png file which I assume should be compliant. But, it isn't either - same error message.

Answer 1

Hi @Praveen Volety,

Welcome to the Microsoft Q&A forum.

Thank you for reaching out and for your attention to detail in ensuring your custom Teams app looks great. I appreciate your effort to follow best practices for design consistency.

Here are my recommendations, which I hope will be helpful to you:     

1/ Correct size for the outline icon

Outline icon (used in the Teams sidebar):
- Size: 32 × 32 pixels (PNG format)
- Transparent background is required.
Color icon (used in Teams Store and other places):
- Size: 192 × 192 pixels (PNG format)
- Keep your logo within a 120 × 120 px safe area inside the 192 px square.

2/ Design rules

Stroke thickness: Use consistent strokes similar to Fluent UI icons (typically 1.5–2 px at 32 px size).
Color:
- Outline icon should be monochrome (usually white or gray) and adapt well to light/dark themes.
- No gradients or multiple colors for the outline icon.
Background:
- Outline icon must have a transparent background.
- Teams applies its own background color in the sidebar.

3/ Official icons

You can find official Microsoft Teams icons and Fluent UI icon sets here:

These resources will help you match the style used for Activity, Chat, Teams, and Calls.

Note: Microsoft is providing the above information as a convenience to you. Some of the websites are not under Microsoft's control. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link

4/ Previewing the icon before submission

You can preview your app and its icons using the Microsoft Teams Developer Portal:

Upload your app package (including the manifest and icons) in Developer Portal for Teams.
Navigate to Branding → Add your color and outline icons.
Teams will render a preview of how your icon appears in the sidebar before you publish.

I hope this information is helpful. Please follow these steps and let me know if it works for you. If not, feel free to share them in the comments on this post so I can continue to assist you.

I look forward to hearing your thoughts on this.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have any extra questions about this answer, please click "Comment".

Note: Follow the steps in our documentation to enable email notifications if you want to receive email notifications related to this topic.

Answer 2

Hi @Praveen Volety,

Thank you for sharing your updated outline icon and for following the Microsoft Teams design guidelines.

I’ve reviewed the image you provided, and I'd like to provide the following information:

The icon uses a transparent background, which is correct for Teams sidebar icons.
The outline style is consistent and simple, which aligns with Fluent UI principles.

Currently, the stroke appears very light gray or white, which is good for dark themes but may be hard to see on light themes. Here are my recommend actions:

You may use pure white (#FFFFFF) for dark theme compatibility and ensure Teams applies the correct contrast automatically. Alternatively, consider a slightly darker gray for better visibility in light mode.
Stroke thickness:
- The current stroke looks thinner than the recommended 1.5–2 px at 32 px size.
  - Please increase the stroke weight slightly to match Fluent UI standards.
Ensure the final exported icon is 32 × 32 px PNG with no extra padding.

Then you can confirm the appearance in both light and dark themes by:

Go to Developer Portal for Teams.
Sign in with your Microsoft 365 account.
Select Apps → Your App → Branding.
Under Branding, you should see options to upload:
Color icon (192×192 px).
Outline icon (32×32 px).
After uploading, you can preview how the icon looks in light and dark themes.

Note: You need to have Developer permissions or be the app owner in the tenant to access Branding settings.
Feel free to contact us if you need additional assistance or have further questions.

Answer 3

Hello everyone,

I created and uploaded the icons according to the specified requirements, using the sizes 192 × 192 and 32 × 32 pixels.

The icons are displayed correctly in the Teams app. However, in Teams Online, the icon is not displayed. I suspect that the image might not be found or loaded correctly.

Since I have already created and uploaded the icons according to the required dimensions, I’m not sure what else I could adjust.

Has anyone experienced a similar issue or can help me figure out how to get the icon displayed correctly in Teams Online?

Thanks in advance for your help!

outline.png

color.png

User's image