System icons

System icons symbolize common actions, files, devices, and directories.


Design principles

Concept

System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics. Download icons...

Read More

System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.

Set of Material Design icons

Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

Camera icon using bold, simple shapes

Do.

Make icons graphic and bold.

Camera icon using delicate, complex shapes

Don’t.

Don’t use delicate, thin stroke weights.

Thumbs up icon using simple, geometric shapes

Do.

Use geometric, consistent shapes.

Thumbs up icon using organic, natural shapes

Don’t.

Don’t use gestural or loose organic shapes.


Grid and keyline shapes

Icon design templates

Create your own system and product icons with these Adobe Illustrator files including the 24dp icon grid.

Read More

Create your own system and product icons with these Adobe Illustrator files including the 24dp icon grid.

DOWNLOAD ICON DESIGN TEMPLATES
Available under Apache 2.0. By downloading this file, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.

Icon sizes

System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy. On desktop, when the mouse and...

Read More

System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

24 dp by 24 dp icon grid at 100% size

100% scale

24 dp by 24 dp icon grid scaled to 1000% size

1000% scale

Dense layouts

On desktop, when the mouse and keyboard are the primary input methods, measurements may be scaled down to 20dp.

20 dp by 20 dp dense icon grid at 100% size

100% scale

20 dp by 20 dp dense icon grid scaled to 1000% size

1000% scale

Layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such...

Read More

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.

24 dp by 24 dp icon grid with the 20 dp by 20 dp live area highlighted

Live area

Icon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter.

24 dp by 24 dp icon grid with the inner 2 dp padding highlighted

Padding

2dp of empty space makes up the padding surrounding the 20dp x 20dp live area.

20 dp by 20 dp dense icon grid with the 16 dp by 16 dp live area highlighted

Dense live area

Icon content is limited to the 16dp x 16dp live area, with 2dp of padding around the perimeter.

20 dp by 20 dp dense icon grid with the inner 2 dp padding highlighted

Dense padding

2dp of padding surrounds the live area.

Keyline Shapes

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements. Keyline shapes are the foundation of the grid. By using...

Read More

Icon grid and keyline

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

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

Basic shapes

Specific keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Google system icons and regulate their placement on the icon grid.

24 dp by 24 dp icon grid

Grid

24 dp by 24 dp grid of foundational icon keylines: square, circle, vertical rectangle, horizontal rectangle

Keyline

24 dp by 24 dp grid of foundational icon keylines with the square keyline highlighted

Square

Height: 18dp
Width: 18dp

24 dp by 24 dp grid of foundational icon keylines with the circle keyline highlighted

Circle

Diameter: 20dp

24 dp by 24 dp grid of foundational icon keylines with the vertical rectangle keyline highlighted

Vertical Rectangle

Height: 20dp
Width: 16dp

24 dp by 24 dp grid of foundational icon keylines with the horizontal rectangle keyline highlighted

Horizontal Rectangle

Height: 16dp
Width: 20dp

Geometry

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

Icon grid using the clipboard icon as an example of the square keyline

Clipboard icon

Icon grid using the camera icon as an example of the horizontal rectangle

Camera icon

Clarity (Pixel perfection)

To avoid distorting an icon, position icons “on pixel” by making the X and Y coordinates into integers, without decimals.

Read More

To avoid distorting an icon, position icons “on pixel” by making the X and Y coordinates into integers, without decimals.

Icon grid including a folder icon aligning to the grid. X and Y placement coordinates are shown using integers

Do.

Position icons “on pixel.”

Icon grid including a folder icon misaligned to the grid. X and Y placement coordinates are shown using decimals

Don’t.

Don’t place the icon on a coordinate that isn’t “on pixel”.


System icon metrics

Anatomy

Icons are comprised of stroke terminal, iconography, counter area, stroke, and bounding area.

Read More
Diagram of a calendar icon on a grid highlighting the different pieces of an icon
  1. Stroke terminal

  2. Corner

  3. Counter area

  4. Stroke

  5. Counter stroke

  6. Bounding area

Corners

Corner radiuses are 2dp by default. Interior corners should be square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded.

Read More

Corner radiuses are 2dp by default. Interior corners should be square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded.

Open envelope icon placed on grid with 2 dp rounded exterior corners highlighted

Exterior corners with 2dp corner radii

Credit card icon placed on a grid with 2 dp linear interior corners highlighted

Interior corners

Stroke

System icons use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

Read More

System icons use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

Timer icon placed on a grid with 2 dp strokes highlighted

2dp stroke

Set of four icons which rely on 2 dp strokes

Consistency

Arrow icon placed on a grid with arrowhead terminals trimmed to 45 degrees highlighted

Stroke terminal

Plus icon placed on a grid with linear 2 dp inner stroke highlighted

Counter stroke

Timer icon using consistent stroke weights

Do.

Use consistent stroke weights and squared stroke terminals.

Timer icon using multiple stroke weights

Don’t.

Don’t use inconsistent stroke weights or rounded stroke terminals.

Complex icon shapes

If a system icon requires complex details, subtle adjustments can be made to improve its legibility. These adjustments are referred to as optical corrections. Any...

Read More

If a system icon requires complex details, subtle adjustments can be made to improve its legibility. These adjustments are referred to as optical corrections. Any optical corrections should use the geometric forms on which all other icons are based, without skewing or distorting those shapes.

Paperclip icon on a grid with adjusted 1.5 stroke highlighted

Complex adjustments

The paperclip icon uses 1.5dp of the possible 2dp stroke area to fit multiple curves within the 24 x 24dp icon space.

Smoking icon on a grid with adjusted 1.5 stroke highlighted

Small scale

This icon uses a 1.5dp stroke to show waves within the 24 x 24dp icon space.

Building icon using flat shapes

Do.

Make icons face forward.

Building icon using 3D shapes

Don’t.

Don’t tilt, rotate, or make icons appear dimensional.

Boat icon using simple, geometric shapes

Do.

Simplify icons for greater clarity and legibility.

Boat icon complex, illustrative shapes

Don’t.

Don’t be overly literal. Avoid complex icons.

Space

Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp.

Read More

Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp.

1. 24 dp search icon with 48dp touch target area highlighted. 2. A set of juxtaposed icons placed in context with their touch target area highlighted
  1. Clearance area
  2. Placement

Dense layouts (Desktop)

When a mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. Dense icons of 20dp can use a...

Read More

When a mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. Dense icons of 20dp can use a touch target of 40dp.

1. 20 dp dense search icon with 40dp touch target area highlighted. 2. A set of juxtaposed icons placed in context with their touch target area highlighted
  1. Clearance area
  2. Placement

Color

Icons on light backgrounds

The standard opacity for an active icon with focused state on a light background is 87% (#000000). An active with unfocused state is 54%. An...

Read More

Active icon

The standard opacity for an active icon with focused state on a light background is 87% (#000000). An active with unfocused state is 54%.

Inactive icon

An inactive icon, which is lower in the visual hierarchy, should have an opacity of 38% (#000000).

Diagram of an icon as active and focused then active and unfocused and inactive states on a light background

Icons on dark backgrounds

The standard opacity for an active icon with focused state on a dark background is 100% (#FFFFFF). An active with unfocused state is 70%. An...

Read More

Active icon

The standard opacity for an active icon with focused state on a dark background is 100% (#FFFFFF). An active with unfocused state is 70%.

Inactive icon

An inactive icon, which is lower in the visual hierarchy, should have an opacity of 50% (#FFFFFF).

Diagram of an icon as active and focused, active and unfocused and inactive on a dark background

Icon themes

Three attributes of system icons can be customized in order to create custom system icons: stroke and fill, corner radius, and color.

Preset icon themes

The following four preset custom icon sets are created by adjusting these attributes.

Outlined icons

Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can...

Read More

Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the weight of your typography.

Stroke and fill

When system icons are unfilled, they are defined by their stroke. A thicker stroke adds a sense of heaviness and mass, making filled icons feel heavier. A thinner stroke implies lightness, giving unfilled icons a lighter style.

Unfilled icon on grid

Unfilled icon

Filled icon on grid

Filled icon

Unfilled favorite icon on grid

To maintain legibility, the recommended stroke weight is 2dp for most icons.

Unfilled done, mail, star and language icons

2dp outlined icons remain readable across sizes and applications.

Stroke alignment

Stroke placement affects an icon’s overall appearance, depending on whether the stroke is placed on the inside, center, or outside of a shape. In most cases, the stroke is best aligned with the inside of a shape.

Standard filled delete icon and three unfilled delete icons different stroke alignments
  1. Standard Material icon
  2. Inside stroke alignment
  3. Center stroke alignment
  4. Outside stroke alignment
Unfilled delete icon

Aligning the stroke to the shape interior produces a legible icon with a consistent stroke weight.

GPS fixed, directions run, Android, camera icons

For optimal legibility and recognition, the standard Material icon style should be retained in some cases, such as full body human icons or proprietary icons.

Unfilled build icon in grid

Caution.

In most cases, the stroke is best aligned inside of a shape. Occasionally, aligning the stroke to the center or outside of the shape works better for an icon.

Unfilled build icon in grid

Do.

Adjust shapes appropriately for your design and brand when customizing an icon’s stroke and alignment.

Shine app top app bar with icons

The lighter stroke weight of these outlined icons mimics the thin lines of the app’s brand.

1. Shrine app logo 2. Shrine order page 3. Shrine outlined icons
  1. Brand logo
  2. Outlined icons
  3. Outlined icons in the app

Sharp and rounded icons

Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles...

Read More

Sharp icons

Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren’t well-reflected by rounded shapes.

Rounded icons

Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.

Corner radius

An icon’s corner radius consists of curved exterior corners. Icons can be are characterized by a larger corner radius or a smaller one.

Icons on grid with 1, 2, 3 and 4dp corner radius

The recommended corner radius values are between 0dp and 4dp.

Plus icon on grid

If the stroke is 2dp or less, the corner radius must be 1dp.

Plus icon on grid

Adjust the icon’s interior corners and counter area to match the corner radius.

Icon on grid with custom radius

Do.

Customize the corner radius to remain legible while reflecting your product’s style.

Icon on grid with rounded radius

Caution.

Don’t round interior corners if it reduces the icon’s legibility.

>

Diamond icon on app screen

The 0dp corner radius of the sharp icon set echoes this app’s rectangular design details.

1. Diamond logo 2. App screen with Urban architecture title 3. 12 icons
  1. Brand logo
  2. Sharp icons
  3. Sharp icons in the app
Travel app with rounded buttons

This app uses rounded buttons and a line-drawn logo.

1. Crane logo 2. 12 rounded icons 3. Travel app screen
  1. Brand logo
  2. Rounded icons
  3. Rounded icons in the app

Two-tone icons

Two-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors...

Read More

Two-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors and can improve legibility.

Lock icon on grid

The recommended stroke weight for two-tone icons is 2dp.

  1. Stroke
  2. Transparent fill
Edit, lock, question answer and face icons

Transparency should only be applied to the fill of two-tone icons.

Two-tone icons can use different colors for an icon’s stroke and fill. The fill’s transparency can be adjusted to improve legibility and align with your brand.

Icon strokes must be 87% on light backgrounds and 100% on dark backgrounds. Fill color can vary depending on the tone of the background.

Light background

Dark background

Stroke

87% solid

100% solid

Email app with Paris photos and message about high school reunion

This email app uses two-tone brand elements, such as its logo.

1. Reply logo 2. 12 icons 3. Reply email app screen
  1. Brand logo
  2. Two-tone icons
  3. Two-tone icons in the app