You are on page 1of 13

Launcher icons

guidelines 1.1
1his documenI is a gaIhering oI IhoughIs and suggesIions Ior Ihe creaIion oI consisIenI and
balanced 1oolbar MeeCo icons. 1he key objecIive oI Ihis documenI is Io guide and assisI, noI
Io Iell and demand.
3OHDVHXVHWKLVJXLGHDVDVWDUWLQJSRLQWEXWIHHOIUHHWRWU\VRPHWKLQJGLHUHQWWRJHWWKH
righI resulIs.
June 2011
Launcher icons
Quick overview
Highlight
Bounding box = 80x80px
Icon shape = 78x78px
Canvas
Glyph
Launcher icons
One light source, One focal zone
Light
Dark
Light source
Icon size = 78x78px
Focal zone 54x54px
Icon size = 78x78px
Bounding box = 80x80px Bounding box = 80x80px
Focal zone 54x54px
Highlight
Glyph shadow
Launcher icons
Example sheet
1his documenI is a gaIhering oI IhoughIs and suggesIions Ior Ihe creaIion oI consisIenI
and balanced ln-App MeeCo icons. 1he key objecIive oI Ihis documenI is Io guide and
assisI, noI Io Iell and demand.
3OHDVHXVHWKLVJXLGHDVDVWDUWLQJSRLQWEXWIHHOIUHHWRWU\VRPHWKLQJGLHUHQWWRJHWWKH
righI resulIs.
June 2011
ln-App lcons
Bounding box = 64x64 pixels
Squircle = 62x62 pixels
Container = 40x40 pixels. Pictograms NEVER exceed this!
Inner box = 32x32
Pictogram is centred and should be constructed to sit perfectly on
Strokes and strike-throughs = 3 pixel
Angle rotation for primary objects = 30 (+ -)
Negative space = 2 pixels
In-app icons
Strike-throughs
3 pixels thick
Rotated 30 from top-right to bottom-left
Pictograms made from strokes or containing strokes
3 (sometimes 4 pixels)
Stroke ends are fully circular
Negative space
2 pixels
Object rotation and angles
Primary object rotated 30 (+ -)
In-app icons
List icons: suggestions
'
Rounded corners
2 pixels for regular outer shapes
1 pixel for smaller object
4 pixels for irregular shapes
45 30
For picIograms IhaI are Io be roIaIed, we
recommend using an angle oI 30.
AlIhough we would encourage Ihis Io be Iollowed
sIricIly wiIh sIrike-Ihroughs, we appreciaIe IhaI
some picIograms simply look beIIer roIaIed aI
anoIher value. 1he magniIying glass Ior Search is
a good example oI Ihis.
For exIra precision, we could also
consider aligning all "secondary" angled objecIs
Io a pre-dened angle ouIwiIh our sIandard
angle. 1he angle oI Ihe mounIain Iops lleII work
beIIer aI 45.
0
90
1
5

-1
9
5

3
0

-
1
5
0

4
5

-
1
3
5

6
0

-
1
2
0

7
5

-
1
0
5

9
0

-
9
0

1
0
5

-
7
5

1
2
0

-
6
0

1
3
5

-
4
5

1
5
0

-
3
0

1
6
5

- 1
5

3
0

ln-app icons
LisI icons: angles and roIaIion
1he picIogram is cenIred and should be consIrucIed Io siI
perIecIly on a pixel grid, using whole pixel measuremenIs. 1his
also includes negaIive spaces.
ln some cases, pixel perIecIion is simply noI possible. 1his is
especially Irue oI picIograms IhaI are roIaIed. Please Iollow Ihe
guidelines as much as possible and aI leasI use whole pixel
measuremenIs wiIh Ihe componenIs used Io build Ihe picIogram,
like circles and sIrokes.

ln-app icons
LisI icons: pixel perIecIion
1oolbar guidelines 1.1
1his documenI is a gaIhering oI IhoughIs and suggesIions Ior Ihe creaIion oI consisIenI and
balanced 1oolbar MeeCo icons. 1he key objecIive oI Ihis documenI is Io guide and assisI, noI
Io Iell and demand.
3OHDVHXVHWKLVJXLGHDVDVWDUWLQJSRLQWEXWIHHOIUHHWRWU\VRPHWKLQJGLHUHQWWRJHWWKH
righI resulIs.
June 2011
!"#$%&$'()"*(+(,-*,-(.&*/01
2&34"'567(&1(3/$45/%(6$%(18"#0%()/(3"$145#34/%(4"(1&4(./59/340:("$(
6(.&*/0('5&%;(#1&$'(<8"0/(.&*/0(7/61#5/7/$41
=/'64&>/(1.63/(+(?(.&*/01
@""0)65(&3"$1
A#&3B(">/5>&/<
1oolbar icons
1he basics
CbjecI roIaIion and angles
Primary objecIs roIaIed 30 l+ -
Secondary, angled objecIs should be aligned wiIh
a whole number angle iI 30 does noI work.
Arrows
All arrows are made Irom sIrokes wiIh Iully rounded corners
we recommend sIrokes Io be 4 pixels Ihick
MosI 1oolbar icons are needed Ior boIh lighI and dark
EDFNJURXQGVDQGKDYHGLHUHQWVWDWHVIRU Normal, SelecIed
and Dimmed.
6W\OHVIRUWKHVHVWDWHVFDQEHIRXQGLQWKHOH
meego-icons-masIer-doc.ai
Drop your icons inIo a layouI similar Io Ihe one above,
allowing you Io see iI your icons look visually balanced.
NegaIive space
2 pixels
Rounded corners
3 pixels Ior regular shapes
!""#$%&
'(%)*#+,-.++/

You might also like