Icons

Product icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of the material is sturdy, with clean folds and crisp edges. The matte-like finish interacts with light through subtle highlights and consistent shadows.

The product icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This standardization results in a flexible but coherent system.

Keyline shapes

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion across related product icons.

DP unit grid

Android expects product icons to be provided at 48dp, with edges at 1dp. When you create the icon, maintain the 48-unit measure, but scale it to 400% at 192 x 192 dp (the edge becomes 4dp).

Any scaling done to the original will scale the image up or down proportionally. By maintaining the unit ratio, you preserve sharp edges and correct alignment when the scale is reduced.

Geometry

Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been developed to unify product icons and systemize their placement on the grid.

Product icon anatomy describes the graphic elements that make up a product icon. The consistency of these elements across icons for a given brand is critical in maintaining a shared visual language. Familiarity with these elements makes it easier to understand characteristics of each logo and subtle differences between them. It will also help educate your eye to recognize the underlying structure of logo designs.

1. Finish
2. Material background
3. Material foreground
4. Color
5. Shadow

Lighting

Within the material environment, virtual lights illuminate the scene and allow objects to cast shadows. A top light cast on material elements creates a contact shadow while highlighting the top and bottom edges. An angled light reinforces the sense of surface across the elements.

Shadows

For a product icon, the top light from above casts a soft shadow surrounding an element lightly on the top and left. The shadow is slightly heavier below and to the right. This shadow is always contained within the icon’s silhouette.

Edge tint and shade

The top and bottom edges of material elements provide a sense of depth and surface. Material elements have a standard 1dp thickness. All edge distances are measured from an element's interior edge.

Tint highlights the top edge of all elements. The left, right, and bottom edges do not have a tint applied.

Shade darkens the bottom edge of all elements. The left, right, and top edges do not have a shade applied.

Finish

The finish layer is a result of the virtual 45º light source. It extends from the top-left corner to the exterior edge of the icon’s silhouette. The finish is always contained within these boundaries.

Color

Color elements are flush to the paper’s surface.

Don’t embellish color elements with any edges or shadows.

Layer

Layered paper elements create depth, having edges and shadows.

Be cautious with the quantity of overlapping surfaces. Having too many complicates the icon and lacks focus.

Elevate

Elevating a key material element atop a simple background silhouette focuses attention to the center.

Don’t crop elevated material elements within another shape.

Score

Scored material elements have the illusion of depth without losing their geometric form. Scores should be centered on symmetrical shapes.

Don’t use multiple scores, or position a score off-center.

Fold

Folded material elements are skewed, having greater dimension. Spot colors should be avoided, so as to avoid altering or misrepresenting key elements.

Overlap

Overlapped material elements create unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.

Don’t exceed more than two overlaps. Having too many complicates the icon and lacks focus.

Accordion

Accordion folded material elements are adjoined by a connecting fold, used to add dimension to a single material element.

Don’t exceed more than two accordion folds. Having too many complicates the icon and lacks focus.

Distort

Product icons should never be distorted or transformed. Elements should remain in their geometric form, and not be skewed, rotated, bowed, warped, or bent.

Form

Keyline shapes

Paper vs color

Gestures

Human icon rules

Shapes are bold and geometric.

Symmetry and consistency of shapes give the icons a unique quality, while keeping them simple and bold.

DP unit grid

System icons are displayed at 24dp. When creating icons, it’s important to design at 100% scale for pixel-accuracy.

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. For dense layouts on desktop, icons can be scaled down to 20dp.

Icon grid

The icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This standardization results in a flexible but coherent system.

Content area

The content of an icon should remain inside of the live area. Content should only extend into the trim area if additional visual weight is needed. Do not place any part of the icon outside of the trim area.

Dense layouts

For dense layouts on desktop, icons may be scaled down to 20dp with a trim area of 2dp surrounding the icon.

Keyline shapes

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion throughout the system icons.

Geometry

Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been developed to unify Google system icons and systemize their placement on the icon grid.

System icon anatomy

1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area

Corners

Consistent corner radiuses are key to unifying the overall system icon family. A 2dp corner radius is used on the silhouette form of the icon. Do not round the corners of strokes (shapes 2dp wide or less).

Interior corners should be square. Do not round the corners of interior shapes.

Strokes

Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and both interior and exterior strokes.

Optical corrections

Extreme scenarios that call for subtle tweaks add to the legibility of an icon. Instances where complex details are unavoidable require adjusting metrics.

If optical corrections are necessary, only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.

Clearance

Adequate space around the icon is needed to allow for legibility and touch.

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications.

Human icon anatomy

1. Head
2. Neck
3. Upper body
4. Arm
5. Leg

Form

Full body

Upper body

Contained

Detailed parts

Human icon rules

The standard opacity for an active icon on a light background is 54% (#000000). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 26% (#000000).

The standard opacity for an active icon on a dark background is 100% (#FFFFFF). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 30% (#FFFFFF).