MS Office toolbar and Ribbon UI images style guide

You can use the following formats of icons on Microsoft Office toolbars and Ribbon tabs:  bmp, png and ico. In addition, Microsoft Office uses four color depths: 16-color, 256-color, True color and True color + alpha channel icons. The following table shows the different color depths used.

 

Depth Example icon
16-color 16-color
256-color 256-color
True color True color
True color + alpha  True color + alpha

Toolbar style

Microsoft Office 2000, XP, 2003 and 2007 (Outlook explorer only) require 16×16 pixel icons in BMP or PNG formats. The following table shows what color depth you can use in different Office versions.

  16 colors
(4 bits)
256 colors
(8 bits)
True color
(24 bits)
True color + alpha
(32 bits)
Office 2000 + +    
Office XP + + + +
Office 2003 + + + +
Office 2007 (Outlook explorer) + + + +

Ribbon style

Most ribbon controls in Office 2007 and 2010 will require both 32×32 and 16×16 pixel icons (only 16×16 icons are used by the Quick Access Toolbar). Ribbon galleries typically use 16×16, 32×32, 48×48, or 64×64 pixel icons. Supported formats are BMP, PNG and ICO. You can use any color depth in Ribbon. Office 2007 and Office 2010 will show your icons correctly.

Design tips

If you design your application using Add-in Express for Microsoft Office and .NET, you need to use the ImageList component to group your icons into collections. In this case you need to take into consideration some of the ImageList‘s specificities. For instance, before adding images make sure you set the ColorDepth and ImageSize properties so that they match the images being added. You shouldn’t set the TransparentColor property because ImageList does extra processing of images and if you set it, you will have to add all images anew. Transparent color is set directly in the ImageTransparentColor property of Add-in Express components. For ICO images, transparent color must be set to the default value (Transparent).

P.S.  Sample icons that were used for testing can be downloaded here.

Updated: 24-June-2010

Post a comment

Have any questions? Ask us right now!