Introduction
Our software icons are our most expressive set of icons that are designed to stand out, but also communicate being a part of a cohesive software portfolio.
Anatomy
To express a shared visual language, the graphic elements that make up a product icon should be consistent across all a brand’s icons. Logos should have characteristics that help establish familiarity across brand elements.
A product icon’s underlying structure positions each element in front of the previous one, such that each logo is designed from the bottom up.
- Finish
- Material background
- Material foreground
- Color
- Shadow
Material background
The furthest back layer of Material
Material foreground
A layer of Material casts a shadow on the background
Spot color
Color applied to a small portion of an element
Flooding
Color applied to an entire element, edge-to-edge
Tinted edge
Tints highlight the top edge of an element (left, right, and bottom edges are not tinted). This should be 1dp in height and be Blue 100 or Green 100.
Shaded edge
Shades darkens the bottom edge of an element (left, right, and top edges are not shaded). This should be 1dp in height and be Blue 700 or Green 400.
Contact shadow
A soft shadow around the edges of the foreground.
Finish
Surface lighting is a soft tint in front of all icon elements, fading from the upper left to lower right
Lighting
In the Material Design environment, virtual lights illuminate the scene and allow elements to cast shadows. Light is cast on the top of elements, creating a shadow that highlights the icon’s top and bottom edges. An angled light reinforces the sense of dimension across the elements.
Top
45º angle
Color
Material elements have tactile surfaces. When combined with color, these surfaces can produce numerous unique combinations.
Color is flush with an element’s surface.
Because color itself has no depth, it doesn’t contain edges or shadows.
Layer
When Material elements are layered, depth is produced by the shadows each layer casts. The number of surface layers that overlap should be limited, as too many layers can overcomplicate an icon.
Use one or two layers to show depth.
Don’t add too many layers.
Overlap
When Material elements overlap, it creates unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.
If needed, you can overlap an element over another.
