What size is the Microsoft Teams color icon?

The Teams app color icon is 192×192 pixels, but the safe zone for the main content is a circle of 120×120 pixels centered within the 192px canvas. Keep logos and text within this inner circle.

What size is the Microsoft Teams outline icon?

The Teams outline icon is 32×32 pixels. This is a simplified, monochrome (white/transparent) version of your app icon, used in the Teams command bar and personal app navigation.

Why does Teams need two icon types?

The color icon (192px) is displayed in the Teams app store, app details, and the activity feed. The outline icon (32px) is displayed in the app rail (the sidebar) where space is limited and a simpler icon is needed.

Are my images uploaded to a server?

No. All processing happens entirely in your browser using the Canvas API. Your images never leave your device.

What background color should I use for the Teams color icon?

Use a solid brand color as the full 192×192 background. Teams applies a circular mask to the icon, so the background color becomes the visible surrounding color of the circle. Avoid white backgrounds — they disappear against the Teams light-mode interface.

Does the Teams outline icon need to be exactly 32×32 pixels?

Yes, the outline icon must be exactly 32×32 pixels and must be white on a transparent (or fully transparent) background. Any other color will be ignored or replaced by Teams when rendering in the sidebar.

Microsoft Teams Icon Generator — Teams App Icons

Why Use This Tool?

Microsoft Teams is the enterprise collaboration platform built into Microsoft 365, with hundreds of millions of users. Building a Teams app requires two icons: a full-color icon for store listings and a simplified outline icon for the Teams sidebar. The safe zone requirement (120px circle within a 192px canvas) is easy to get wrong without the right tool.

Microsoft Teams Icon Size Guide (2026)

Icon Type	Size (pixels)	Safe Zone	Notes
Color Icon	192×192	120×120 center circle	App store, activity feed
Outline Icon	32×32	Full canvas	White on transparent, sidebar

Privacy First — 100% Client-Side

Your images are processed entirely in your browser using the HTML5 Canvas API. Nothing is uploaded to any server. You can verify this by disconnecting from the internet after loading the page — the tool works offline.

Tip: The color icon's safe zone (120×120 centered in 192×192) is critical — Teams rounds the icon to a circle and the corners are cropped. Any content outside the 120px center circle will be clipped. The outer 36px on each side is purely background padding that gets cut away.

Tips for Microsoft Teams Icons

Color icon safe zone — design the actual logo or symbol to fit within the centered 120×120 circle. The surrounding 36px padding area becomes the rounded background that Teams clips.
Outline icon must be white on a transparent background, 32×32 pixels. It's a simplified silhouette of your color icon, not a detailed version. Thin lines can disappear at this size — use strokes of at least 2px.
Background color for color icon — use your brand color as the full background of the 192×192 canvas. Teams applies a circle mask, so the background will show as the icon's surrounding color.
Package your icons in your manifest.json under "icons": { "color": "color.png", "outline": "outline.png" }.
Submit through App Studio (now Teams Toolkit) or the Teams Developer Portal (dev.teams.microsoft.com) for validation before publishing.