Colorful Icons

Colorful icons

Colorful icons make full use of the Breeze color palette. Colorful icons are not flat and incorporate elevation, shadows, and lighting.

Use a variety of techniques to give your icon depth.
Don't make your icon flat - this makes it visually bland.

There are a variety of colorful icon types:

Margins

Vertical

Colorful icons have a top and bottom margin of 4 pixels. Icons should not put any details here whatsoever.

Anjuta icon with 4px top and bottom margins. The icon does not enter the margins.

Horizontal

Colorful icons also have a left and right margin of 4 pixels. Minor details can extend here as necessary.

Anjuta icon with 4px left and right margins. The circle's edges extend into the margin.

32px Colorful Icons

32px colorful icons have a 2px margin instead of 4px margins.

Use 2px margins on 32px colorful icons.
Don't use 4px margins on 32px colorful icons; this reduces the canvas size too much

Anatomy

All colorful icons share the same basic anatomy.

  1. Foreground
  2. Foreground Shadow
  3. Base
  4. Base Shadow
The foreground of an icon is the distinctive part that conveys the most branding.

The foreground of an icon is the distinctive part that conveys the most branding.

Foregrounds on a background have a 45° shadow to the bottom right that spans the entire background.

Foregrounds on a background have a 45° shadow to the bottom right that spans the entire background.

Icons can have a background to serve as a base for their foreground.

Icons can have a background to serve as a base for their foreground.

The foreground, or the background if there is one, has a 1px hard shadow on the bottom.

The foreground, or the background if there is one, has a 1px hard shadow on the bottom.

Elements

Color

Icons can have a variety of shapes, which when combined with color, produce numerous unique arrangements.

Color can be used to add variety to an otherwise bland surface.
Don't give color shadows; color is not shape and should not be treated as such.

Layers

Icons are composed of layers that cast shadows.

Give icons at most two or three major layers.
Don't give icons too many layers.

Lighting and Shadows

Ambient Lighting

Icon fills should reflect ambient lighting — go from a lighter top to a darker bottom.

Do have gradients behave like light is coming from above the icon.
Don't have gradients behave like light is coming from below the icon.

Hard Shadow

Every icon should have a 1px solid hard shadow. A good baseline color to overlay is 10% black (#000000).

Add a 1px hard shadow to give your icon depth.
Don't forget to add a hard shadow; this makes your icon seem flat.

45° Shadows

Foregrounds should have a 45° shadow to the bottom right.

Objects are solid, and block shadows from passing through.
Don't have shadows pass through objects; they are not glass.
45° shadows are bounded to their parent elements.
45° shadows should not exceed the bounds of their parents.
45° shadows have a gradient that fades out before they hit an edge.
45° shadows are not solid and do not extend to the edge of their parents.

Application Icons

MIME Type Icons

Category and Preferences Icons

Places Icons