Skip to content

Theme Guidelines

Jump to bottom
Alexandros L Felekidis edited this page Apr 6, 2015 · 26 revisions

These are some simple guidelines we use in order to have a cohesive icon pack. To put it simple we use Google Material Design Guidelines with some alterations.

Free shapes: we don't stick to uniform shapes! Corners are however rounded as subscribed (3px radius).

We keep our icons simple & flat

We don't use shadows expect for:

  • The tinded & shaded edges (1px height 20% opacity black & white)
  • hovering layer shade (20% opacity black)
  • The lightning layer at a 45° angle

We try to stick to gmd colors

There is no need to try & reinvent a good flat icon :)

Some examples:

users icon calculator icon

###Actual files

Scalable icons are made on 48px grid. We use 4 main shapes for the icons and every other form falls under one of these 4 categories:

  • Circle: uses a 44 pixels diameter
  • Square: uses a 40x40 pixels area
  • Rectangles:
    • 44x36 pixels landscape direction
    • 32x44 pixels for portrait direction

In some cases the 48x48 original design may not be as sharp when scaled to smaller icon sizes. To avoid this issue, we generate clones of the icon is 16x16, 24x24 and 32x32 preserving values that would scale below 1px.

(e.g.: A 48x48 icon with 1px shadows when scaled down to 16x16 size the shadows thickness will be 0.33px which isn't a displayable quantity and as a result the icon will be blurry)

###The lighting layer

After the icon design is complete we create a lightning layer which has the boundaries as the icon. We use a 45 deegree gradient from top left to bottom right. The gradient should start at #ffffff26 and end at a 100% opacity color of your preference. The gradient end should depend on the dominant color of the icon and the tone you want to give to it. The color should correspond with Google Material Design Guidelines colors. If an icon is neutrally colored by itself always use #177ed500 as a gradient finish

Clone this wiki locally