Teams app icon for Teams Store and app bar
This article provides the guidelines for creating icons in your app ecosystem to help designers and you submit the correct application icon. Following these guidelines creates uniformity and balance in your app ecosystem and emphasizes the artwork of your app icon.
App icon
When submitting your app package, include two PNG versions of the app icon, a color icon and an outline icon. For your app to pass Microsoft Teams Store review, these icons must meet certain size requirements. Follow the steps to ensure your app icons fit the Teams Store standards.
Balanced layout
The icons are intended to create a uniform layout. These guidelines help you create your app icon for submission.
Creating your assets
Microsoft Teams needs two assets during app submission to generate the app icons.
| Counter | Description |
|---|---|
| 1 | A full bleed PNG format at 192 x 192 pixels. Utilize the full asset space as the background. This is used in the Teams Store or fly-outs. |
| 2 | A default or rest PNG format icon at 32 x 32 pixels. This icon is used as rest/default state in the app bar and other locations in the product. |
Color icon architecture
The color app icon dimensions must be 192 x 192 pixels. If you have a logo icon, the logo needs to fit within the 120 x 120 safe area in the center.
The submitted icon must be a full square. Teams automatically applies masking for consistent icon shapes across the app.
Icon attributes
Colored
White background
App icon utilization
Refer this list for content areas where your icon shows in the product, depending on app type or capability.
Personal app
App flyout
Bot (channel view)
Message extension flyout
Meeting apps flyout
Meeting U-bar
Best practices
Do: Follow the recommendation for safe area (120 x 120)
It's recommended that if you have a logo, keep it within the 120 x 120 safe area inside of the 192 x 192 PNG format icon.
Don’t: Make the icon bigger than the safe area
Here's an example of a logo inside of the PNG format icon that isn't within the safe area. It creates uneven padding (negative space) around the icon.
Do: Provide full bleed for rounded corners
If you have a full bleed image, just upload a square PNG format at 192 x 192. The corners are rounded dynamically.
Don’t: Round the corners of your icon
Don’t round the corners. Submit at perfect square at 192 x 192, the corners are rounded dynamically.
Do: Upload an icon without a border
Border is added automatically. In this case just upload your PNG format without a border, even if it’s on a white background.
Don’t: Add a border
Borders are added dynamically. If you include a border in your PNG format, it results in unwanted duplication on white backgrounds.
Do: Provide enough contrast
Consider your icon to have enough contrast against the background. It's recommended that a ratio of 4.5:1 for best accessibility.
Don’t: Fade the icon
Avoid low contrast for your icons. Ensure that the background and icon you use in your PNG format has enough contrast.
Do: Elevate your brand
Focus on your brand by using a full flat color as background.
Don’t: Avoid placing your brand icon in a circle
Elevate your brand by keeping the brand icon within 96 x 96 safe area.
Do: Abbreviate long words in the app icon
If you have a long app name, try to abbreviate so that it’s easier to read when your icon is resized to 32 x 32 size.
Don’t: Include multiple words in app icon
Avoid using multiple words on the icon. It's impossible to read the text when the icon is at smaller sizes, for example, 32 x 32 or 36 x 36.
Do: Create balance (96 x 96)
Elevate your brand by keeping balance. Stick to the 96 x 96 safe area for a sense of equilibrium.
Don’t: Skew or stretch your icon
Keep your icon within the safe area. Don’t stretch your icon in one direction or another.
Platform Docs