Product icons

Product icons are the visual expression of a brand’s products, services, and tools.


Design principles

Brand expression

Product icons are the visual expression of a brand and product, including their services and tools. Icons communicate the core idea and intent of a...

Product icons are the visual expression of a brand and product, including their services and tools. Icons communicate the core idea and intent of a product in a simple, bold, and friendly way. While each icon is visually distinct, all product icons for a brand should be unified through concept and execution.

These guidelines are a starting point to ensure that your product icon colors and key elements reflect your brand identity.

Gmail, Reply fake app, Calendar and Crane fake app icons

Design approach

The tactile and physical quality of Material is reflected in the design of Material icons. Each icon is cut, folded, and lit as paper would...

The tactile and physical quality of Material is reflected in the design of Material icons. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of Material is sturdy, with clean folds and crisp edges. Surfaces interact with light through subtle highlights and consistent shadows.

white envelope on black grid and letter opener
Physical prototype
white envelope and shadow
Lighting study
white envelope with shadow
Material prototype
Gmail icon
Color study

Grid and keyline shapes

Icon sizes

When creating an icon, view and edit it at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any...

When creating an icon, view and edit it at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any changes to the original will be scaled up or down proportionally, which preserves sharp edges and correct alignment when the scale is returned to 100% (48dp).

48 x 48d grid with 1dp edge
1:1 Unit grid
192 x 192 dp grid with 3dp edge
4:1 Unit grid

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.

grey grid on grey background
Grid
geometrical figure with two circles
Keyline

Keyline Shapes

Keyline shapes are based on the grid. By using these core shapes as a baseline, you can maintain consistent visual proportions throughout your product icons....

Keyline shapes are based on the grid. By using these core shapes as a baseline, you can maintain consistent visual proportions throughout your product icons.

red square with grey geometrical figures
Square
Height: 152dp
Width: 152dp
red circle with grey geometrical figures
Circle
Diameter: 176dp
red rectangle with grey geometrical figures
Vertical rectangle
Height: 176dp
Width: 128dp
red rectangle with grey geometrical figures
Horizontal rectangle
Height: 128dp
Width: 176dp

Geometry

These keyline shapes use preset standards: circle, square, rectangle, orthogonals, and diagonals. They unify product icons and maintain consistent placement on the grid.

square with circle and other geometrical figures inside and around
Square
circle with circle and other geometrical figures inside and around
Circle
vertical rectangle with grey Crane logo
Vertical rectangle
horizontal rectangle with grey Mail app icon
Horizontal rectangle

Specs

Anatomy

To express a shared visual language, the graphic elements that make up a product icon should be consistent across all of a brand’s icons. Logos...

To express a shared visual language, the graphic elements that make up a product icon should be consistent across all of a brand’s icons. Logos in particular should have characteristics that help establish familiarity across brand elements.

A product icon’s underlying structure positions each element in front of the previous one, such that each logo is designed from the bottom up.

2 diagrams, Left: 2 squares and 2 circles laying flat, Right: diagram of 3 layers of squares and circles
1.Finish
2.Material background
3.Material foreground
4.Color
5.Shadow
pink square with smaller grey square inside
Material background
The furthest back layer of Material
white square with smaller pink square inside
Material foreground
A layer of Material casts a shadow on the background
white square with smaller grey square and pink dot
Spot color
Color applied to a small portion of an element
pink square with smaller grey square inside
Flooding
Color applied to an entire element, edge-to-edge
white box with a grey box inside, both have red top edges
Tinted edge
The top edge of a Material element is tinted (a lighter version of the original color)
white box with a grey box inside, both have red bottom edges
Shaded edge
The bottom edge of a Material element is shaded (a darker version of the original color)
white box with grey box inside, red shadow around grey box
Contact shadow
A soft shadow around the edges of the foreground.
red tint on white box with grey box inside
Finish
Surface lighting is a soft tint in front of all icon elements, fading from the upper left to lower right

Lighting

In the Material Design environment, virtual lights illuminate the scene and allow elements to cast shadows. Light is cast on the top of elements, creating...

In the Material Design environment, virtual lights illuminate the scene and allow elements to cast shadows. Light is cast on the top of elements, creating a shadow that highlights the icon’s top and bottom edges. An angled light reinforces the sense of dimension across the elements.

red light from top to bottom of white square with grey square and circle inside
Top
red light covering part of white square with grey square and circle inside
45º angle

Shadows

A contact shadow is a result of the virtual light from above. A soft shadow surrounds a Material element lightly on the top and left,...

Contact shadow

A contact shadow is a result of the virtual light from above. A soft shadow surrounds a Material element lightly on the top and left, and with slightly more emphasis below and to the right of the element. The shadow is contained within the icon’s background silhouette.

Drop shadow metrics

Mode: Normal
Opacity: 20%
X Offset: 4dp
Y Offset: 4dp
Blur: 4dp
Color: Refer to Tint, shade and shadow values

red shade around grey square inside white square
Drop shadow around square

Edge tint and shade

The top and bottom edges of Material elements provide a sense of depth, which is emphasized through edge tinting and shading: Tinted edge Height: 1dp...

The top and bottom edges of Material elements provide a sense of depth, which is emphasized through edge tinting and shading:

  • Tints highlight the top edge of an element (left, right, and bottom edges are not tinted)
  • Shades darkens the bottom edge of an element (left, right, and top edges are not shaded)
white box with a grey box inside, both have red top edges
Tinted edge
Height: 1dp
Opacity: 20%
Color: White (#FFFFFF)
white box with a grey box inside, both have red bottom edges
Shaded edge
Height: 1dp
Opacity: 20%
Color: Refer to tint, shade and shadow values

Finish

The finishing layer expresses the effect of Material Design’s virtual 45º light source. It extends from the top-left corner to the exterior edge of the...

The finishing layer expresses the effect of Material Design’s virtual 45º light source. It extends from the top-left corner to the exterior edge of the icon’s silhouette.

Gradient metrics

Type: Radial
Angle: 45º
Color: White (#FFFFFF)
Midpoint Location: 33%

Slider 1

Opacity: 10%
Location: 0%

Slider 2

Opacity: 0%
Location: 100%

red tint on white box with grey box inside
Finishing layer

*Note the values outlined in this article are referenced from Adobe Illustrator.


Icon treatments

Color

Material elements have tactile surfaces. When combined with color, these surfaces can produce numerous unique combinations. Color is flush with an element’s surface. Because color...

Material elements have tactile surfaces. When combined with color, these surfaces can produce numerous unique combinations.

Color is flush with an element’s surface. Because color itself has no depth, it doesn’t contain edges or shadows.

white square with red circle inside
Do
white square with shadow around red circle inside
Don't

Layer

When Material elements are layered, depth is produced by the shadows each layer casts. The number of surface layers that overlap should be limited, as...

When Material elements are layered, depth is produced by the shadows each layer casts. The number of surface layers that overlap should be limited, as too many layers can overcomplicate an icon.

white square with grey square inside
Do
white square with 3 grey squares inside
Don'tDon’t add too many layers.

Scoring

Scoring an icon creates the illusion of depth by dividing surfaces in half. Scores should be centered and placed on symmetrical shapes.

Scoring an icon creates the illusion of depth by dividing surfaces in half. Scores should be centered and placed on symmetrical shapes.

one circle inside another, top half is darker than bottom half
Do
one circle inside another, divided into 4 asymmetric sections
Don'tDon’t use multiple scores or position a score off-center.

Fold

When folded at multiple angles, Material elements have greater dimension.

When folded at multiple angles, Material elements have greater dimension.

circle with 4 folds
Do
circle with 4 folds and smaller circle inside
Don'tDon’t use spot color on folded elements, to avoid altering or misrepresenting key elements.

Overlap

When Material elements overlap, it creates unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.

When Material elements overlap, it creates unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.

grey square overlapped by white square with circle inside
Do
grey square overlapped by a lighter grey square that is overlapped by a white square with circle inside
Don'tDon’t overlap more than two elements to avoid overcomplicating the icon.

Accordion

An accordion fold involves adjoining two Material elements with a connecting fold, adding dimension to an element.

An accordion fold involves adjoining two Material elements with a connecting fold, adding dimension to an element.

grey square folded into white square with circle
Do
grey square folded into another grey square white square with circle
Don'tDon’t exceed more than two accordion folds, as having too many complicates the icon and doesn’t provide a clear focal point.

Distort

Elements should remain in their geometric form and not be skewed, rotated, bowed, warped, or bent.

Elements should remain in their geometric form and not be skewed, rotated, bowed, warped, or bent.

white square with grey circle inside tilted at an angle
Don'tDon’t distort or transform product icons.
bowed white square with grey circle inside
Don't

Up next