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.
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 guidance below to ensure your app icons fit the Teams Store standards.
Apps for Microsoft 365 icons
The app package for any App for Microsoft 365 must include two icons that represent the extension in several places including the following:
- The app stores in the various Microsoft 365 applications, such as the Teams app store.
- The Manage your apps page that can be accessed from various Microsoft 365 applications.
- The app bars of Teams, Outlook, and the Microsoft 365 Copilot application.
One of these must be a color icon and the other an outline icon and both must be PNG format. These icons must meet certain size requirements. This article specifies the requirements and best practices for designing these icons.
Balanced layout
The icons are intended to create a uniform layout. These guidelines help you create your app icon.
Creating your assets
Microsoft 365 needs two assets during app submission to generate the 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, for example, 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
Your icons may appear in other places in Microsoft 365 applications, depending on what types of extensions or capabilities are included in your App for Microsoft 365. The following are some examples.
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)
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
The following is 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
Ensure that your icon has enough contrast against the background. We recommend 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 the 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.