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

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
DoMake icons graphic and bold.



Camera icon using delicate, complex shapes
Don'tDon’t use delicate, thin stroke weights.




Thumbs up icon using simple, geometric shapes
DoUse geometric, consistent shapes.



Thumbs up icon using organic, natural shapes
Don'tDon’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.

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

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

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 padding surrounds the 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...

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.

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
DoPosition icons “on pixel.”



Icon grid including a folder icon misaligned to the grid. X and Y placement coordinates are shown using decimals
Don'tDon’t place the icon on a coordinate that isn’t “on pixel”.



Cross-platform adaptations

App bar, Title with back icon
Android
The up button contains a thin arrow with a stem.
App bar, Title with back icon
iOS
On iOS, the back arrow is thicker and doesn’t have a stem.
App bar, Title with back icon with Back text label
iOS
On iOS, the back arrow may also include a label for the associated destination.
App bar, Title and overflow menu
Android
The action overflow menu icon (indicated by the “More…” symbol) contains three vertical dots.
App bar, Title and overflow menu
iOS
The action overflow menu icon (indicated by the “More…” symbol) contains three horizontal dots.

System icon metrics

Anatomy

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

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.

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.

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
DoUse consistent stroke weights and squared stroke terminals.



Timer icon using multiple stroke weights
Don'tDon’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...

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
DoMake icons face forward.
Building icon using 3D shapes
Don'tDon’t tilt, rotate, or make icons appear dimensional.
Boat icon using simple, geometric shapes
DoSimplify icons for greater clarity and legibility.
Boat icon complex, illustrative shapes
Don'tDon’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.

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

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


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


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.

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

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
CautionIn 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
DoAdjust 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 in the app
3. Outlined icons

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

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
DoCustomize the corner radius to remain legible while reflecting your product’s style.
Icon on grid with rounded radius
CautionDon’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...

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
1. Stroke
2. Transparent fill

The recommended stroke weight for two-tone icons is 2dp.
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> <caption | This email app uses two-tone brand elements, such as its logo.
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

Up next