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.
Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.
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.
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.
Dense layouts
On desktop, when the mouse and keyboard are the primary input methods, measurements may be scaled down to 20dp.
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.
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.
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.
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.
Cross-platform adaptations
System icon metrics
Anatomy
Icons are comprised of stroke terminal, iconography, counter area, stroke, and 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.
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.
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.
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.
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.
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).
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).
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.
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.
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.
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.
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 |