App Icons

App Icon Template

Because App Icons are cropped to a circle in the majority of cases, it’s important that logos are scaled properly within the image bounds. Using this guide will also ensure app icons are scaled consistently.

View the Figma Template here

Open

App Icon Template

Image Bounds

The physical boundary of the final image that will be exported. Your background color can extend beyond this to the edge of the image bounds.

Crop Line

Where your icon will be cropped to a circle shape in the platform. Mattermost automatically does the cropping, so no need to do that in the image file.

Safe Area

The recommended bounds to keep your logo’s main shapes within. Your background color can extend beyond this to the edge of the image bounds.

Open

Sample Icons with the template guide showing

Image Specs

App Icons in Context

Below are a few samples of how app icons will appear in the interface