Extension Icon Guidelines

In Brackets, icons are used to:

• leverage globally understood visual concepts, or where icons usage is more conventional than text
• save space by using an easily understood symbol, where localization or text orientation is constrained direct the user visually and break down or differentiate elements (i.e. feature lists)
• enforce consistency within the application
• make the interface visually engaging.

Styleguide

• use simple shapes that are not too detailed, use as less anchor points as possible
• make sure it's flat i.e. without gradients, highlights, or shadows
• the corners are slightly rounded
• use thinner lines rather than thicker lines
• try to use SVG instead of PNG

Icon Size

• 20px by 20px
• for sprites use a grid with gridlines 20px apart.

Use Colors to Indicate Extension State

The icon should be white with opacity set to 0.7 in the CSS by default.

• pressed state has an opacity of 0.5 set in CSS on the white icon
• disabled state has an opacity of 0.3 set in CSS on the white icon
• use green (#91cc41) for success state
• use blue (#78b2f2) for active/open state
• use yellow (#e3b551) for warning state
• use red (#f74687) for error state

Examples

• Extension Manager Icon
• Device Preview Icon
• Web Font Icon

Ping @larz0 if you need help with your extension icon.