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

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: 

1. Go to Developer Portal for Teams. 
2. Sign in with your Microsoft 365 account. 
3. Select Apps → Your App → Branding. 
4. Under Branding, you should see options to upload: 
5. Color icon (192×192 px). 
6. Outline icon (32×32 px). 
7. 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.

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: 

• Microsoft Teams App Icon Guidelines 
• Fluent UI Icons (Figma),  
• Icons8 Teams Icons 
• Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft. 

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.