Creating accessible extension icons for Microsoft Edge

Third-party extension developers are encouraged to use image assets that meet Microsoft’s strict accessibility requirements so that icons are clearly visible for both light and dark themes. We recommend that all extension icons have a 14:1 ratio between the icon’s background color and the dominant color of the icon itself.

First-party extensions developed by Microsoft apply a “stickering” visual treatment to satisfy these requirements.

Examples of the "stickering"

The main goal of “stickering” is to make the icon visually accessible on any background color. The recommended color ratio between the white outer stroke and your icon should be 14:1 to support the high contrast requirements.

Good icon

With stickering, a primarily dark icon will remain visible on any background color.

image of icon being visible on any background color

Bad icon

Without stickering, an icon could blend in with the background and become impossible to see.

image of icon blending into black background

"Stickering" your extension icon

The following five steps outline the suggested method of creating an extension icon that meets Microsoft’s accessibility requirements:

Step 1 Step 2 Step 3 Step 4 Step 5
Set your icon within your specified grid. Reduce your icon size by 2 pixels. Copy your icon and paste in place. Create a 2 pixel outer stroke with rounded corners. Outline your stroke, release the compound path, and merge the remaining shapes. Color the outer stroke white and the inner icon as you wish.
step1 step2 step3 step4 step5