Note
Access to this page requires authorization. You can try signing in or .
Access to this page requires authorization. You can try .
Design icons for agent acquisition and management
A Copilot agent is an app for Microsoft 365, and its app package must include two icon files that represent the agent in the app acquisition and management UI of Teams, Office, Copilot, and other Microsoft 365 applications. This article describes the requirements and best practices for creating these icons.
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.
Both icons must meet specific size requirements. This article outlines the requirements and best practices for designing these icons, with guidelines intended to help you create a balanced, uniform layout across Microsoft 365 experiences.
👁 Diagram that shows the uniform layout for app icons.
Creating your assets
Microsoft 365 needs two mandatory and one optional asset during app submission to generate the icons. The following are the requirements for these assets.
👁 Diagram that shows the three assets used to generate app icons.
| Asset | Size | Purpose |
|---|---|---|
| Full‑bleed color icon | 192 × 192 px | Used in app stores and flyouts. |
| Default (rest) icon | 32 × 32 px | Used in app bar; default state. |
| Focused (pressed) icon (Optional) | 32 × 32 px | Used in app bar; focused/active state. |
Color icon specification
The color app icon dimensions must be 192 x 192 pixels.
If your icon includes a logo or brand mark, keep it within the 120 x 120 safe area in the center.
The submitted icon must be a perfect square.
Do not round the corners. Microsoft 365 applies masking automatically at runtime for consistent UI rendering.
👁 Diagram that shows the color app icon dimensions of your logo icon.
Icon attributes
Colored
👁 Diagram that shows the color attributes for an icon with colored background.
White background
👁 Diagram that shows the color attributes for an icon with 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
👁 Diagram that shows the app icon in personal app.
App flyout
👁 Diagram that shows app icon in app flyout.
Bot (channel view)
👁 Diagram that shows an app icon in channel view of bot.
Message extension flyout
👁 Diagram that shows an app icon in message extension flyout.
Meeting apps flyout
👁 Diagram that shows an app icon in meeting app flyout.
Meeting U-bar
👁 Diagram that shows an app icon in meeting U-bar.
Best practices
Use the following best practices when designing your app icons. The images represent how the icons are displayed in Teams.
👁 Diagram that shows a logo within the safe area.
Do: Follow the recommendation for safe area (120 x 120)
Keep all critical branding inside the 120 × 120 px safe area. This ensures that important elements of your icon are not masked or cropped when displayed in different contexts.
👁 Diagram that shows a logo that is not within the safe area.
Don’t: Extend your logo beyond the safe area
Extending your logo beyond the safe area results in uneven padding after masking.
👁 Diagram that shows an icon with full bleed.
Do: Provide full bleed for rounded corners
Upload a full‑bleed square PNG (192 × 192 px). The corners are rounded dynamically.
👁 Diagram that shows an icon with rounder corners.
Don’t: Round the corners of your icon
Don’t round the corners. Submit a perfect square at 192 × 192 px, the corners are rounded dynamically.
👁 Diagram that 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.
👁 Diagram that 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.
👁 Diagram that shows an app icon with enough contrast.
Do: Provide enough contrast
Maintain sufficient foreground/background contrast. A ratio of 4.5:1 is recommended for best accessibility.
👁 Diagram that shows an app icon which is faded.
Don’t: Fade the icon
Don’t use faded or low‑contrast visuals.
👁 Diagram that shows an app icon with your brand elevated.
Do: Elevate your brand
Focus on your brand by using a full flat color as background.
👁 Diagram that 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 the 96 x 96 safe area.
👁 Diagram that shows an app icon with an abbreviation.
Do: Abbreviate long words in the app icon
Abbreviate long app names so that it’s easier to read when your icon is resized to 32 x 32 size.
👁 Diagram that 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.
👁 Diagram that shows a balanced app icon.
Do: Create balance (96 x 96)
Ensure visual balance within a 96 × 96 px center area for optimal scaling.
👁 Diagram that 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 any direction.
Feedback
Was this page helpful?