Overview

Modifiers or Badges can be applied to all type of icons with the exception of functional icons. Badging an icon does not affect or change the style classification of that icon.

Modifier/Badges

• Modifiers (sometimes referred to as badges) should always reference the color palette below.
• When defining a color for a modifier, consider the messaging associated with it. Does the icon convey a warning, error or is it neutral or does it provide positive feedback to the user?
• When defining a color for a modifier, consider the base color of the icon. Blue and green are both positive and can be interchanged.
• Modifiers are overlaid on the bottom right quadrant of the icon.
• A 1 pixel white outer stroke outline separates the modifier from the base icon.
• The smallest badge or modifier icons is 13x13 pixels with a 1px outline overlaid at the bottom right corner over a 24px icon.
• The modifier symbol is always white on top of a field of color.

Color Palette

Show Color Values

Badge Sizes

Icon Samples