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.

Example shows the uniform layout for app icons.

Creating your assets

Microsoft Teams needs two assets during app submission to generate the app icons.

Example shows the two assets to generate 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.

Example shows the color app icon dimensions of your logo icon.

Icon attributes


Example shows the icon attributes for a colored icon.

White background

Example shows the color attributes for an icon with 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

Example shows the app icon in personal app.

App flyout

Example shows app icon in app flyout.

Bot (channel view)

Example shows an app icon in channel view of bot.

Message extension flyout

Example shows an app icon in message extension flyout.

Meeting apps flyout

Example shows an app icon in meeting app flyout.

Meeting U-bar

Example shows an app icon in meeting U-bar.

Best practices

Example shows a logo within the safe area.

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.

Example shows a logo that is not within the safe area.

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.

Example shows an icon with full bleed.

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.

Example shows an icon with rounder corners.

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.

Example shows an upload of icon without border.

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.

Example shows an upload of icon with a border.

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.

Example shows an app icon with enough contrast.

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.

Example shows an app icon which is faded.

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.

Example shows an app icon with your brand elevated.

Do: Elevate your brand

Focus on your brand by using a full flat color as background.

Example shows an app icon with your brand in a circle.

Don’t: Avoid placing your brand icon in a circle

Elevate your brand by keeping the brand icon within 96 x 96 safe area.

Example shows an app icon with abbreviation..

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.

Example shows an app icon with multiple words.

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.

Example shows a balanced app icon.

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.

Example shows a skewed or stretched app icon.

Don’t: Skew or stretch your icon

Keep your icon within the safe area. Don’t stretch your icon in one direction or another.