Building blocks

Focal area

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.

This image shows the focal area and the safe frame for an icon.

Recommended

Not recommended

Splats can overlay the top right corner of an icon. Text can overlay the bottom center of an icon.

This image shows an icon with the correct splat and text placement.

Treatment

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

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
This image shows the color green. #00B800 Positive, action, and start
This image shows the color amber. #E6B400 Attention
This image shows the color red. #D60000 Warning, stop, and error
This image shows the color blue. #00A8DF Selection and information

Shapes and lines

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.

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

Common shapes

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.

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.

On and off states

Delete, close, and cancel


Was this information helpful? Send us your comments.