You should try to keep each icon within the focal area. In some cases, an icon might need to expand into the safe frame to create balance among icons or to include a common shape, splat or text.
Recommended
 |
 |
 |
Not recommended
 |
 |
 |
Splats can overlay the top right corner of an icon. Text can overlay the bottom center of an icon.
Add a subtle gradient to the icons and treat them as if they are painted on an underlying surface.
To keep the icon as sharp and crisp as possible, do not use any extra effects. Do not use colors for the enabled state (with the exception of content area icons).
Enabled: Bright background  |
Top of the gradient:
Bottom of the gradient:
The disabled state is at 50% opacity. |
Enabled: Dark background  |
Top of the gradient:
Bottom of the gradient:
The disabled state is at 50% opacity. |
Selected  |
Top of the gradient:
Bottom of the gradient:
The disabled state is at 50% opacity. |
Colors
Use color for content area icons only. Stay true to the color palette and imitate the gradient value to stay coherent with the treatment.
| Color | Hex value | Use |
|---|---|---|
 |
#00B800 | Positive, action, and start |
 |
#E6B400 | Attention |
 |
#D60000 | Warning, stop, and error |
 |
#00A8DF | Selection and information |
You can create icons in any shape or form as long as the silhouette is kept simple, clear, and true to the metaphor. The silhouette must be a minimum of 4 pixels at the thinnest part to make the outer part of the icon clearly defined. Detail within the icon can be smaller and narrower (a minimum of 2 pixels).
Make the outer corners slightly rounded but keep the shape as close as possible to the object or function that it represents. Round line caps according to the thickness of the line. Keep arrow stems hard.
If you divide an icon into multiple objects, include a 3-pixel gap to separate the objects. The gap should be equally thick along the foremost object. Your icon should not contain more than three objects to maintain readability and reduce clutter within the icon.
If an icon contains duplicate objects, the foremost object should be bigger than the object portrayed in the back. The back object should be 15% smaller but keep the line and silhouette thickness.
You can add common shapes that describe functionality or direction to icons as a complement to the main metaphor. The function should be the icon itself, but in some cases, add-ons strengthen the purpose of the icon.
Delete  |
Favorite  |
Add  |
Search  |
Play  |
 |
Send  |
Secure  |
Contact  |
Edit  |
Move left/back  |
Attach  |
The default placement of common shapes is at the bottom right corner. Depending on the shape of the main icon, you might need to adjust the add-on vertically so that the add-on looks like a separate object.
 |
Recommended: A ‘Forward folder’ icon with correct positioning of the common shape. |
 |
Not recommended: The forward behavior is placed incorrectly. Stay true to the logic of forward and backward. |
 |
Not recommended: The main icon and the common shape look like the same object. |
On  |
Off  |
Icons that appear in on and off states follow the same rules across the UI. The off state is defined by adding a crossbar at 45° with a cut out shadow in negative space to enhance the bar. The crossbar extends equally beyond the main shape past the bottom left corner and the top right corner. |
 |
Delete: Use Delete when something is completely removed from the system (for example, files, images, and applications). |
 |
Close: Use Close when part of something is removed (for example, a window, list item or an instance in a group selection). |
 |
Cancel: Use Cancel for a behavior. For example, if a user edits something and doesn't want to save the changes, provide the option to cancel. |
