Guidelines

When adding a new icon to our themes you must meet the following design guidelines at a minimum. They're currently in the process of being rewritten so bare with if it looks mess for now. You may be asked to make further changes if your design doesn't fit well with the rest of the theme, which will be assessed on a case by case basis.

Icon Anatomy

Each icon is split into four basic components:

• Base shadow - the drop shadow of the baseplate. This should not be changed.
• Base plate - the main shape on which the symbol is placed.
• Symbol shadow - a shadow of the symbol layered below it.
• Symbol - the key part of the icon which identifies which app it is for.

Circle Anatomy

SYMBOLS:

• User 24, 26 or 28 sized symbols and 30 or 32 sized symbols if they are circles.
• Avoid plain symbols, use quasi flat when possible.
• The size size doesn't have to be a perfect square, so for example 26px wide and 24px tall is perfectly acceptable.
• Always check for optical illusions by looking at the icon in 48 px size, sometimes you need to de-centre the symbol for it to look proper in smaller size.
• If you're going to use faux shadows in the symbol makes sure the "light source" is on the top left. The shadow should point to the bottom right just like the drop and inset shadow of the base-plate.
• The symbol shadow is a duplicate of the symbol background coloured black, made 10% opaque and moved 1px to the right and bottom and of course moved below the symbols. If the symbol shadow consists of more then one object, merge them into one single path.
• Don't use strokes. You can use objects that look like strokes, that's OK, but make sure they are paths.
• Fullscreen symbols (like in Kazam and Firefox for example) are accepted, but don't overuse this style. If you're gonna use this move the inset shadow to the symbol layer.
• Align to grid.

COLOURING:

• Avoid white symbols. Use light (eeeeee for example is a good colour) and if you really have to use plain white symbol tint it with the same colour as the background.
• Colour the symbols in vivid, but not eye jarring colours when they are quasi flat styled.
• Colour the background (base layer) with subtle gradient (top is lighter, bottom is darker) with a colour in the same spectrum of the RGB wheel. Use nice and vivid colours, but don't use eye jarring ones.