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.