Would you like to tell us how we are doing?

You bet No thanks

Building blocks

Focus

Try to keep the majority of the icon shape within the focal area to create balance among icons.

In some cases, an icon might need to expand into the safe frame to include a common shape, splat indicator or text.

Diagram showing the focal area and the safe frame for an icon.
Diagram showing an icon that stays within the focal area.

Recommended

Diagram showing an icon that correctly expands into the safe frame.
Diagram showing an icon that correctly expands into the safe frame.
Diagram showing an icon that does not fill the focal area.

Not recommended

Diagram showing an icon that occupies the entire safe frame.
Diagram showing an icon that has too many shapes in the safe frame.

Splat indicators

Diagram showing the correct splat indicator and text placement on an icon.

Splat indicators can overlay the top-right corner of an icon. Text can overlay the bottom center of an icon.

Treatment

Add a subtle gradient to icons.

To keep the icon as sharp as possible, don't use extra effects. Don't use colors for the enabled state (except the content area icons).

Enabled on a bright background

Diagram showing an enabled icon on a bright background.

Top of the gradient:

  • Hex #4F4F4F
  • R 79  G 79  B 79

Bottom of the gradient:

  • Hex #363636
  • R 54  G 54  B 54

The disabled state is at 50% opacity.

Enabled on a dark background

Diagram showing an enabled icon on a dark background.

Top of the gradient:

  • Hex #E3E3E3
  • R 227  G 227  B 227

Bottom of the gradient:

  • Hex #D1D1D1
  • R 209  G 209  B 209

The disabled state is at 50% opacity.

Selected

Diagram showing a selected icon on a bright and dark background.

Top of the gradient:

  • Hex #3CBCE7
  • R 60  G 188  B 231

Bottom of the gradient:

  • Hex #01A8DF
  • R 1  G 168  B 223

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 values to keep the design coherent.

Green color swatch.
Amber color swatch.
Red color swatch.
Blue color swatch.

Hex: #00B800

Use: Positive, action, and start

Hex: #E6B400

Use: Attention

Hex: #D60000

Use: Warning, stop, and error

Hex: #00A8DF

Use: Selection and information

Shapes and lines

You can create icons in any shape as long as the silhouette is simple, clear, and true to the metaphor. The silhouette must be a minimum of 4 pixels at the thinnest part to clearly define the outer part of the icon. Detail in the icon can be smaller and narrower (a minimum of 2 pixels).

Round the outer corners slightly, 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.

Cuts and objects

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. To maintain readability and minimize clutter, your icon should not contain more than three objects.

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 maintain the line and silhouette thickness.

Common shapes

You can add common shapes to icons to indicate functionality or direction, as a complement to the metaphor. The function should be the icon itself, but in some cases, add-ons strengthen the purpose of the icon.

Diagram showing an icon with the delete shape.

Delete

Diagram showing an icon with the favorite shape.

Favorite

Diagram showing an icon with the add shape.

Add

Diagram showing an icon with the search shape.

Search

Diagram showing an icon with the play shape.

Play

This image shows an icon with the mail shape.

Mail

Diagram showing an icon with the send shape.

Send

Diagram showing an icon with the secure shape.

Secure

Diagram showing an icon with the contact shape.

Contact

Diagram showing an icon with the edit shape.

Edit

Diagram showing an icon with the move back shape.

Move left/back

Diagram showing an icon with the attach shape.

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.

Diagram showing an example of an icon with correct positioning of the common shape.

Recommended: A Forward folder icon with correct positioning of the common shape.

Diagram showing an example of an icon with incorrect positioning of the common shape.

Not recommended: The forward shape is placed incorrectly. Stay true to the logic of forward and backward.

Diagram showing an example of an icon with incorrect positioning of the common shape.

Not recommended: The main icon and the common shape look like the same object.

On and off states

Icons that appear in on and off states follow the same rules across the UI. You can define the off state by adding a crossbar at 45 degrees 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.

An on state icon.

On

An off state icon.

Off

Delete, close, and cancel

A delete icon.

Delete: Use Delete when something is completely removed from the system (for example, files, images, and applications).

A close icon.

Close: Use Close when part of something is removed (for example, a window, list item, or an instance in a group selection).

A cancel icon.

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).



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus