Guidelines

File

Editor: Adobe Illustrator or SVG editor

• Raster editors are welcomed but frowned upon for scaling.

Dimensions: 192x192 pixels

• Please, no inches or non-square rectangles.

Vector Save: .AI or .SVG

• PSDs don't scale well
• Proprietary formats we can't open won't be used unless you can provide us with a raster as well.

Export: PNG-24 with transparency (PNG 32)

Pixel Perfection: Don't use "Align Objects to Pixel Grid" unless you are a design ninja. It ruins long shadows and edges as well as positioning. You should instead manually check that all dimensions and positions are all integers.

Objects

Keyline Shapes

• Rectangles: 152x152 (Square), 176x128 (Landscape), 128x176 (Portrait)
  • 12px Radius rounded corners
• Circle: 176x176

Maximum Area: 176x176

Raised Objects: Should have: Long shadows, tints, shades, and drop shadows (See Raised Objects)

Finish: Need: On very top layer, special radial gradient, fills the icon's silhouette (See Finish)

Whole Icon: Need: Tint, shade, drop shadow, raised object shadows clipped off if applicable (See Whole Icon)

Crease

• Composed of two lines that are each the width of the object and 1px tall
• Darker line should be the top, where the top down light wouldn't have as much of a direct effect.
• 5% opacity shade color for top, 5% white for the bottom or Shade Opacity.

Colors

• Material Design Palette colors as much as possible. (special colors like for logos, gradients, or anything that fits are okay)
• Limit use of gradient spots or objects. They look great in some places, but can easily ruin an icon.
• Shades, drop shadows, and long shadows have the appropriate shade color for the object it is on (not necessarily the object where lighting effect is from)

Text

• Use Roboto for generic text, logo font or path for specialized text. (logos for Pandora, Facebook, etc)
• Create Outlines and Make Compound Path help creating long shadows, drop shadows, tints, shades, or aligning.

Long Shadows

Gradient

• Type: Linear
• Starting Node: 20% Opacity or what the shade opacity would be (10% #212121 for a long shadow over a light gray) Color: Shade Color
• End Node: 5% Opacity or 0% Opacity Color: Shade Color
• Gradient Slider Midpoint: Position 50%
• Angle: -45 degrees

Shape

By Blending

Can be created by using a Blend from a copy of the object at its original location to a copy of the object transformed -45 degrees with the outside anchors completely off the artboard.

• Blend: Use Specified Steps and pick a higher number for higher accuracy (for curvature)
  • More than 50 but less than 500 steps
  • Pathfinder > Crop using a copy of to the object(s) it's on
  • Use the Lasso Tool in Isolation Mode to eliminate extra anchors that cause a staircase effect or awkward curvature

By Lines

Sometimes it's easier and more accuate to use a rotated rectangle or pair of lines to create the long shadow.

Raised Objects

Tint and Shade: Use the Difference (Minus) of two copies of the object separated vertically by a pixel

• Don't use duplicate objects and use them without making it the difference and realigned onto the object
• Use these helpful Actions for creating and aligning tints and shades

Tint

• Use 20% opacity white for all colors but Gray 50 to Gray 300
• Use 40% opacity white for Gray 50 to Gray 300 (100% when tint looks better)

Shade

• Must have at least one shade, preferred to have both.

On Shade

Below Shade

• Don't leave a gap between the shade and the object

Drop Shadow

-45 Degree

• Mode: Normal
• 4px offset for both X and Y
• 4px blur
• Colors: Shade color

Top Down

• Mode: Normal

• 0px X and 4px Y offset

• 4px blur

• Colors: Shade Color

• Clip off the shadows if they extend past the icon's perimeter

• Use long and drop shadow (See Long Shadow)

Finish

Radial gradient overlay on the top layer of the icon

Gradient

• Mode: Radial
• Starting Node: 10% Opacity Color: White
• Gradient Slider Midpoint: Position 33% (Spec Material) or
• Gradient Slider Midpoint: Position 50% (In Google's Icons)
• End Node: 0% Opacity Color: White
• Angle: -45 degrees
• Shouldn't create white outside of the icon
• Radial Circle: Covers the entire icon perimeter (not including drop shadows), extends from top-left corner of icon silhouette or the intersections of the farthest point in each direction
• Starting Point: Center of gradient circle, top-left corner of icon silhouette or the intersections of the farthest point in each direction

Whole Icon

Shouldn't extend past the 8px margin on all for side of the icon for a max area of 176x176 pixels

Drop Shadow

Vanilla

KMZ Style

Add two fills to the appearance of the icon layer or group

• Stroke Color: No stroke
• Fill Color: White
• Mode: Multiply
• Top Shadow:
  • Mode: Multiply
  • Opacity: 12%
  • 0px offset for both X and Y
  • 2px blur
  • Color: black (#000000, not #202020)
• Bottom Shadow:
  • Mode: Multiply
  • Opacity 24%
  • 0px offset for X and a 4px for Y
  • 2px blur
  • Color: black (#000000, not #202020)

Single shade added to icon layer or group

• Shadow:

  • Mode: Normal
  • Opacity 20%
  • 0px offset for X and a 4px for Y
  • 4px blur
  • Color: black (#000000, not #202020)

• Make sure the objects making the outside perimeter of the icon have a tint and shade that are on the object

• If there is a drop shadow for a glyph that extends off of the icon, clip it so it doesn't interact with the whole icon's drop shadow

Icon Complexity

• Don't over complicate the icons with excessive amounts of raised object
  • Think wisely about using more than two (including keyline or base shape)
• Don't and too many spot colors that won't scale well for lower densities.

Read More

• Actions, Graphic Styles, and more for Adobe Illustrator
• Google's Product Icon Specification

---

Key

Values or Menu Items

Meta Text

Item: Main text

• Child item
  • Grandchild item

Link