icon_design.jd revision 6b13bc043e715b5415b701e93141daa0d49fa364
1page.title=Icon Design Guidelines 2@jd:body 3 4<div id="qv-wrapper"> 5<div id="qv"> 6 7<h2>Icon design quickview</h2> 8 9<ul> 10<li>You can use several types of icons in an Android application.</li> 11<li>Your icons should follow the specification in this document.</li> 12<li>A set of standard icons is provided by the Android platform. Your 13application can use the standard icons by referencing them as resources.</li> 14</ul> 15 16<h2>In this document</h2> 17 18<ol> 19<li><a href="#launcherstructure">Launcher icon</a></li> 20<li><a href="#menustructure">Menu icon</a></li> 21<li><a href="#statusbarstructure">Status bar icon</a></li> 22<li><a href="#tabstructure">Tab icon</a></li> 23<li><a href="#dialogstructure">Dialog icon</a></li> 24<li><a href="#listviewstructure">List view icon</a></li> 25 26<li style="margin-top:4px;"><a href="#dodonts">General guidelines</a></li> 27<li><a href="#templatespack">Using the Icon Templates Pack</a></li> 28<li><a href="#iconappendix">Icon appendix</a> 29 <ol> 30 <li><a href="#launcherapx">Launcher icons</a></li> 31 <li><a href="#menuapx">Menu icons</a></li> 32 <li><a href="#statusbarapx">Status bar icons</a></li> 33 </ol> 34</li> 35 36</ol> 37 38<h2>See also</h2> 39 40<ol> 41<li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon 42Templates Pack »</a></li> 43</ol> 44 45</div> 46</div> 47 48<p>Creating a unified look and feel throughout a user interface adds value to 49your product. Streamlining the graphic style will also make the UI seem more 50professional to the user.</p> 51 52<p>This document shows you how to create icons for various parts 53of your application’s user interface that fit the style set by the Android UI 54team. Following these guidelines will help you to create a polished and unified 55experience for the user.</p> 56 57<p>To get started creating conforming icons more quickly, you can download 58the Android Icon Templates Pack. For more information, see 59<a href="#templatespack">Using the Android Icon Template Pack</a>.</p> 60 61<h2 id="launcherstructure">Launcher icon</h2> 62 63<p>A launcher icon is the graphic that represents your application on an Android 64device’s Home screen. It is a simplified 3D icon with a fixed perspective. The 65required perspective is shown in Figure 1.</p> 66 67<h4 id="launcherstructure">Structure</h4> 68 69<ul> 70<li>The base of a launcher icon can face either the top view or the front 71view.</li> 72 73<li>The majority of a launcher icon’s surface should be created using the 74launcher icon <a href="#launcherpalette">color palette</a>. To add emphasis, use 75one or more bright accent colors to highlight specific characteristics.</li> 76 77<li>All launcher icons must be created with rounded corners to make them look 78friendly and simple—as shown in Figure 2.</li> 79 80<li>All dimensions specified are based on a 250x250 pixel artboard size 81in a vector graphics editor like Adobe Illustrator, where the icon fits within 82the artboard boundaries.</li> 83 84<li><strong>Final art must be scaled down and exported as a transparent 48x48 px 85PNG file using a raster image editor such as Adobe Photoshop.</strong></li> 86 87<li>Templates for creating launcher icons in Adobe Illustrator and Photoshop are 88available in the Icon Templates Pack.</li> 89</ul> 90 91<table class="image-caption"> 92<tr> 93<td class="image-caption-i" style="padding-right:0"> 94 <img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of 95launcher icon corners and perspective angles" /> 96</td> 97<td class="image-caption-c"> 98 <div class="caption grad-rule-top"> 99 <p><strong>Figure 1.</strong> Perspective angles for launcher icons (90° is 100vertical).</p> 101 <div class="image-caption-nested"> 102 <table style="margin-top:0;"> 103 <tr><td style="padding-right:1em"><em>1.</em></td><td>92°</td></tr> 104 <tr><td><em>2.</em></td><td>92°</td></tr> 105 <tr><td><em>3.</em></td><td>173°</td></tr> 106 <tr><td><em>4.</em></td><td>171°</td></tr> 107 <tr><td><em>5.</em></td><td>49°</td></tr> 108 <tr><td><em>6.</em></td><td>171°</td></tr> 109 <tr><td><em>7.</em></td><td>64°</td></tr> 110 <tr><td><em>8.</em></td><td>97°</td></tr> 111 <tr><td><em>9.</em></td><td>75°</td></tr> 112 <tr><td><em>10.</em></td><td>93°</td></tr> 113 <tr><td><em>11.</em></td><td>169°</td></tr> 114 </table> 115 </div> 116 </div> 117 <div class="caption grad-rule-top"> 118 <p><strong>Figure 2.</strong> Rounded corners for launcher icons.</p> 119 </div> 120</td> 121</tr> 122</table> 123 124<h4 id="launcherlight">Light, effects, and shadows</h4> 125 126<p>Launcher icons are simplified 3D icons using light and shadows for 127definition. A light source is placed slightly to the left in front of the icon, 128and therefore the shadow expands to the right and back.</p> 129 130<table class="image-caption"> 131<tr> 132<td class="image-caption-i"> 133 <img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of 134light, effects, and shadows for launcher icons."/> 135</td> 136<td class="image-caption-c"> 137 <div class="caption grad-rule-top"> 138 <p><strong>Figure 3. </strong>Light, effects, and shadows for launcher icons.</p> 139 <div class="image-caption-nested"> 140 <table style="margin-top:0;"> 141 <tr><td style="padding-right:1em"><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr> 142 <tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67°</td></tr> 143 <tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr> 144 <tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr> 145 <tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr> 146 </table> 147 </div> 148 </div> 149</td> 150</tr> 151</table> 152 153<table style="margin:0px;padding:0px;"> 154<tr> 155<td style="border:0;width:350px;"> 156 157<h4 id="launcherpalette">Launcher icon color palette</h4> 158 159<table style="margin:0px;padding:0px;"> 160<tr> 161<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td> 162<td class="image-caption-c" style="padding-top:.5em;">White<br>r 0 | g 0 | b 0<br>Used for highlights on edges.</td> 163</tr> 164 165<tr> 166<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png" alt="Color palette, light gradient" style="margin:.5em 0 0 0;" /></td> 167<td class="image-caption-c" style="padding-top:.5em;">Light gradient<br><em>1: </em>r 0 | g 0 | b 0<br><em>2: </em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td> 168</tr> 169 170<tr> 171<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png" alt="Color palette, medium gradien" style="margin:.5em 0 0 0;" /></td> 172<td class="image-caption-c" style="padding-top:.5em;">Medium gradient<br><em>1: </em>r 190 | g 190 | b 190<br><em>2: </em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td> 173</tr> 174 175<tr> 176<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png" alt="Color palette, dark gradient" style="margin:.5em 0 0 0;" /></td> 177<td class="image-caption-c" style="padding-top:.5em;">Dark gradient<br><em>1: </em>r 100 | g 100 | b 100<br><em>2: </em>r 25 | g 25 | b 25<br>Used on details and parts in the shade of the icon.</td> 178</tr> 179 180<tr> 181<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> 182<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 255 | g 255 | b 255<br>Used as base color in shadows.</td> 183</tr> 184 185</table> 186 187</td> 188 189<td style="border:0;width:350px"> 190 191<h4 id="launchersteps">Step by step</h4> 192 193<ol> 194 <li>Create the basic shapes with a tool like Adobe Illustrator, using the 195angles described in <a href="#launcherstructure">Launcher icon: structure</a>. 196The shapes and effects must fit within a 250x250 pixel artboard.</li> 197 <li>Add depth to shapes by extruding them and create the rounded corners as 198described for the launcher icon structure.</li> 199 <li>Add details and colors. Gradients should be treated as if there is a light 200source placed slightly to the left in front of the icon.</li> 201 <li>Create the shadows with the correct angle and blur effect.</li> 202 <li>Import the icon into a tool like Adobe Photoshop and scale to fit an image 203size of 48x48 px on a transparent background.</li> 204 <li>Export the icon at 48x48 as a PNG file with transparency enabled.</li> 205</ol> 206 207</td> 208</tr> 209</table> 210 211<h2 id="menustructure">Menu icon</h2> 212 213<p>Menu icons are graphical elements placed in the pop-up menu shown to users 214when they press the Menu button. They are drawn in a flat-front perspective. 215Elements in a menu icon must not be visualized in 3D or perspective.</p> 216 217<h4>Structure</h4> 218 219<ul> 220<li>In order to maintain consistency, all menu icons must use the same 221primary palette and the same effects. For more information, see the 222menu icon <a href="#menupalette">color palette</a>. </li> 223 224<li>Menu icons should include rounded corners, but only when logically 225appropriate. For example, in Figure 3 the logical place for rounded corners is 226the roof and not the rest of the building.</span></li> 227 228<li>All dimensions specified on this page are based on a 48x48 pixel artboard 229size with a 6 pixel safeframe.</li> 230 231<li>The menu icon effect (the outer glow) described in <a 232href="#menulight">Light, effects, and shadows</a> can overlap the 6px safeframe, 233but only when necessary. The base shape must always stay inside the 234safeframe.</li> 235 236<li><strong>Final art must be exported as a transparent PNG file.</strong></li> 237 238<li>Templates for creating menu icons in Adobe Photoshop are available in the 239Icon Templates Pack.</li> 240</ul> 241 242<table class="image-caption"> 243<tr> 244<td class="image-caption-i" style="padding-right:0"> 245 <img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu 246icon structure." /> 247</td> 248<td class="image-caption-c"> 249 <div class="caption grad-rule-top"> 250 <p><strong>Figure 4. </strong>Safeframe and corner-rounding for menu 251icons. Icon size is 48x48.</p> 252 </div> 253</td> 254</tr> 255</table> 256 257 258<h4 id="menulight">Light, effects, and shadows</h4> 259 260<p>Menu icons are flat and pictured face on. A slight deboss and some other 261effects, which are shown below, are used to create depth.</p> 262 263<table class="image-caption"> 264<tr> 265<td class="image-caption-i"> 266 <img src="{@docRoot}images/icon_design/menu_light.png" alt="A view of light, effects, and shadows for launcher icons."/> 267</td> 268<td class="image-caption-c"> 269 <div class="caption grad-rule-top"> 270 <p><strong>Figure 5. </strong>Light, effects, and shadows for launcher icons.</p> 271 <div class="image-caption-nested"> 272 <table style="margin-top:0;"> 273 <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> 274 <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr> 275 <tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr> 276 <tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> 277 </table> 278 </div> 279 </div> 280</td> 281</tr> 282</table> 283 284<table style="margin:0px;padding:0px;"> 285<tr> 286<td style="border:0;width:350px;"> 287 288<h4 id="menupalette">Color palette</h4> 289 290<table style="margin:0px;padding:0px;"> 291<tr> 292<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td> 293<td class="image-caption-c" style="padding-top:.5em;">White<br>r 0 | g 0 | b 0<br>Used for outer glow and bevel highlight.</td> 294</tr> 295 296<tr> 297<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, medium gradient" style="margin:.5em 0 0 0;" /></td> 298<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td> 299</tr> 300 301<tr> 302<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> 303<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 255 | g 255 | b 255<br>Used for inner shadow and bevel shadow.</td> 304</tr> 305 306</table> 307 308</td> 309 310<td style="border:0;width:350px"> 311 312<h4 id="menusteps">Step by step</h4> 313 314<ol> 315<li>Create the basic shapes using a tool like Adobe Illustrator.</li> 316<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image 317of 48x48 px on a transparent background. Mind the safeframe.</li> 318<li>Add the effects seen as described in Figure 5.</li> 319<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li> 320</ol> 321 322</td> 323</tr> 324</table> 325 326 327<h2 id="statusbarstructure">Status bar icon</h2> 328 329<p>Status bar icons are used to represent notifications from your application in 330the status bar. Graphically, they are very similar to menu icons, but are 331smaller and higher in contrast.</p> 332 333<h4>Structure</h4> 334 335<ul> 336<li>Rounded corners must always be applied to the base shape and to the details 337of a status bar icon shown Figure 7.</li> 338 339<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2 340pixel safeframe.</li> 341 342<li>Status bar icons can overlap the safeframe to the left and right when 343necessary, but must not overlap the safeframe at the top and bottom.</li> 344 345<li><strong>Final art must be exported as a transparent PNG file.</strong></li> 346 347<li>Templates for creating status bar icons using Adobe Photoshop are available 348in the Icon Templates Pack.</li> 349</ul> 350 351<table class="image-caption"> 352<tr> 353<td class="image-caption-i" style="padding-right:0"> 354 <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of 355status bar icon structure." /> 356</td> 357<td class="image-caption-c"> 358 <div class="caption grad-rule-top"> 359 <p><strong>Figure 6. </strong>Safeframe and corner-rounding for status bar 360icons. Icon size is 25x25.</p> 361 </div> 362</td> 363</tr> 364</table> 365 366 367<h4 id="statusbarlight">Light, effects, and shadows</h4> 368 369<p>Status bar icons are slightly debossed, high in contrast, and pictured 370face-on to enhance clarity at small sizes.</p> 371 372<table class="image-caption"> 373<tr> 374<td class="image-caption-i"> 375 <img src="{@docRoot}images/icon_design/statusbar_light.png" alt="A view of 376light, effects, and shadows for launcher icons."/> 377</td> 378<td class="image-caption-c"> 379 <div class="caption grad-rule-top"> 380 <p><strong>Figure 7. </strong>Light, effects, and shadows for launcher icons.</p> 381 <div class="image-caption-nested"> 382 <table style="margin-top:0;"> 383 <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> 384 <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr> 385 <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr> 386 <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr> 387 </table> 388 </div> 389 </div> 390</td> 391</tr> 392</table> 393 394<table style="margin:0px;padding:0px;"> 395<tr> 396<td style="border:0;width:350px;"> 397 398<h4 id="menupalette">Color palette</h4> 399 400<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p> 401 402<table style="margin:0px;padding:0px;"> 403<tr> 404<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td> 405<td class="image-caption-c" style="padding-top:.5em;">White<br>r 0 | g 0 | b 0<br>Used for details within the icons and bevel highlight.</td> 406</tr> 407 408<tr> 409<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png" alt="Color palette, grey gradient" style="margin:.5em 0 0 0;" /></td> 410<td class="image-caption-c" style="padding-top:.5em;">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td> 411</tr> 412 413<tr> 414<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td> 415<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td> 416</tr> 417 418<tr> 419<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> 420<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 255 | g 255 | b 255<br>Used for bevel shadow.</td> 421</tr> 422 423</table> 424 425</td> 426 427<td style="border:0;width:350px"> 428 429<h4 id="menusteps">Step by step</h4> 430 431<ol> 432<li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px 433image on a transparent background. Mind the safeframe, and keep the upper and 434lower 2 pixels free.</li> 435<li>Add rounded corners as specified in Figure 6.</li> 436<li>Add light, effects, and shadows as specified in Figure 7.</li> 437<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li> 438</ol> 439 440</td> 441</tr> 442</table> 443 444 445<h2 id="tabstructure">Tab icon</h2> 446 447<p>Tab icons are graphical elements used to represent individual tabs in a 448multi-tab interface. Each tab icon has two states: unselected and selected.</p> 449 450<h4>Structure</h4> 451 452<ul> 453<li>Unselected tab icons have the same fill gradient and effects as menu icons, 454but with no outer glow.</li> 455 456<li>Selected tab icons look just like unselected tab icons, but with a fainter 457inner shadow, and have the same front part gradient as dialog icons.</li> 458 459<li>Tab icons have a 1 px safeframe which should only be overlapped for the edge 460of the anti-alias of a round shape.</li> 461 462<li>All dimensions specified on this page are based on a 32x32 px artboard size. 463Keep 1 px of padding around the bounding box inside the Photoshop template.</li> 464 465<li><strong>Final art must be exported as a 32x32 px transparent PNG 466file.</strong></li> 467 468<li>Templates for creating tab icons in Adobe Photoshop are available in the 469Icon Templates Pack.</li> 470</ul> 471 472<table class="image-caption"> 473<tr> 474<td class="image-caption-i" style="padding-right:0"> 475 <img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of 476unselected tab icon structure." /> 477</td> 478<td class="image-caption-c"> 479 <div class="caption grad-rule-top"> 480 <p><strong>Figure 8. </strong>Safeframe and fill gradient for unselected tab 481icons. Icon size is 32x32.</p> 482 </div> 483</td> 484</tr> 485<tr> 486<td class="image-caption-i" style="padding-right:0"> 487 <img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of 488selected tab icon structure." /> 489</td> 490<td class="image-caption-c"> 491 <div class="caption grad-rule-top"> 492 <p><strong>Figure 9. </strong>Safeframe and fill gradient for tab icons in 493selected state. Icon size is 32x32.</p> 494 </div> 495</td> 496</tr> 497</table> 498 499<h3 id="unselectedtabdetails">Unselected tab icon</h3> 500 501<h4 id="unselectedtablight">Light, effects, and shadows</h4> 502 503<p>Unselected tab icons look just like the selected tab icons, but with a 504fainter inner shadow, and the same front part gradient as the dialog icons.</p> 505 506<table class="image-caption"> 507<tr> 508<td class="image-caption-i"> 509 <img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view 510of light, effects, and shadows for unselected tab icons."/> 511</td> 512<td class="image-caption-c"> 513 <div class="caption grad-rule-top"> 514 <p><strong>Figure 10. </strong>Light, effects, and shadows for unselected 515tab icons.</p> 516 <div class="image-caption-nested"> 517 <table style="margin-top:0;"> 518 <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr> 519 <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 10 % opacity | angle 90° distance 2px | size 2px</td></tr> 520 <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> 521 </table> 522 </div> 523 </div> 524</td> 525</tr> 526</table> 527 528 529<table style="margin:0px;padding:0px;"> 530<tr> 531<td style="border:0;width:350px;"> 532 533<h4 id="menusteps">Step by step</h4> 534 535<ol> 536<li>Create the basic shapes using a tool like Adobe Illustrator.</li> 537<li>Import the shape to a tool like Adobe Photoshop and scale to fit an image of 53832x32 px on a transparent background.</li> 539<li>Add the effects seen in Figure 10 for the unselected state filter.</li> 540<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> 541</ol> 542 543</td> 544</tr> 545</table> 546 547<h3 id="selectedtabdetails">Selected tab icon</h3> 548 549<p>The selected tab icons have the same fill gradient and effects as the menu 550icon, but with no outer glow.</p> 551 552<table class="image-caption"> 553<tr> 554<td class="image-caption-i"> 555 <img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of 556light, effects, and shadows for selected tab icons."/> 557</td> 558<td class="image-caption-c"> 559 <div class="caption grad-rule-top"> 560 <p><strong>Figure 11. </strong>Light, effects, and shadows for selected tab 561icons.</p> 562 <div class="image-caption-nested"> 563 <table style="margin-top:0;"> 564 <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr> 565 <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr> 566 <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> 567 </table> 568 </div> 569 </div> 570</td> 571</tr> 572</table> 573 574<table style="margin:0px;padding:0px;"> 575<tr> 576<td style="border:0;width:350px;"> 577 578<h4 id="menupalette">Color palette</h4> 579 580<table style="margin:0px;padding:0px;"> 581<tr> 582<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td> 583<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td> 584</tr> 585 586</table> 587 588</td> 589 590<td style="border:0;width:350px"> 591 592<h4 id="menusteps">Step by step</h4> 593 594<ol> 595<li>Create the basic shape using a tool like Adobe Illustrator.</li> 596<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 597px artboard with a transparent background. </li> 598<li>Add the effects seen in Figure 11 for the selected state filter.</li> 599<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> 600</ol> 601 602</td> 603</tr> 604</table> 605 606 607<h2 id="dialogstructure">Dialog icon</h2> 608 609<p>Dialog icons are shown in pop-up dialog boxes that prompt the user for 610interaction. They use a light gradient and inner 611shadow in order to stand out against a dark background.</p> 612 613<h4>Structure</h4> 614 615<ul> 616<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the 617safeframe, but the anti-alias of a round shape can overlap the safeframe. <span 618class="body-copy"></li> 619 620<li>All dimensions specified on this page are based on a 32x32 pixel artboard size 621in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the 622Photoshop template.</li> 623 624<li><strong>Final art must be exported as a transparent PNG file.</strong></li> 625 626<li>Templates for creating dialog icons in Adobe Photoshop are available in the 627Icon Templates Pack.</li> 628</ul> 629 630<table class="image-caption"> 631<tr> 632<td class="image-caption-i" style="padding-right:0"> 633 <img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog 634icon structure." /> 635</td> 636<td class="image-caption-c"> 637 <div class="caption grad-rule-top"> 638 <p><strong>Figure 12. </strong>Safeframe and fill gradient for dialog icons. 639Icon size is 32x32.</p> 640 </div> 641</td> 642</tr> 643</table> 644 645 646<h4 id="dialoglight">Light, effects, and shadows</h4> 647 648<p>Dialog icons are flat and pictured face-on. In order to stand out against a 649dark background, they are built up using a light gradient and inner shadow.</p> 650 651<table class="image-caption"> 652<tr> 653<td class="image-caption-i"> 654 <img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light, 655effects, and shadows for dialog icons."/> 656</td> 657<td class="image-caption-c"> 658 <div class="caption grad-rule-top"> 659 <p><strong>Figure 13. </strong>Light, effects, and shadows for dialog 660icons.</p> 661 <div class="image-caption-nested"> 662 <table style="margin-top:0;"> 663 <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr> 664 <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr> 665 </table> 666 </div> 667 </div> 668</td> 669</tr> 670</table> 671 672 673<table style="margin:0px;padding:0px;"> 674<tr> 675<td style="border:0;width:350px;"> 676 677<h4 id="menusteps">Step by step</h4> 678 679<ol> 680<li>Create the basic shapes using a tool like Adobe Illustrator.</li> 681<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image 682of 32x32 px on a transparent background. </li> 683<li>Add the effects seen in Figure 13 for the proper filter.</li> 684<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> 685</ol> 686 687</td> 688</tr> 689</table> 690 691 692<h2 id="listviewstructure">List view icon</h2> 693 694<p>List view icons look a lot like dialog icons, but they use an inner shadow 695effect where the light source is above the object. They are also designed to be 696used only in a list view. Examples include the Android Market application home 697screen and the driving directions screen in the Maps application.</p> 698 699<h4>Structure</h4> 700 701<ul> 702<li>A list view icon normally has a 1 px safeframe, but it is OK to use the 703safeframe area for the edge of the anti-alias of a round shape. </li> 704 705<li>All dimensions specified are based on a 32x32 pixel artboard size in 706Photoshop. Keep 1 pixel of padding around the bounding box inside the template. 707 </li> 708 709<li><strong>Final art must be exported as a transparent PNG file.</strong></li> 710 711<li>Templates for creating list view icons in Adobe Photoshop are available in 712the Icon Templates Pack. </li> 713</ul> 714 715<table class="image-caption"> 716<tr> 717<td class="image-caption-i" style="padding-right:0"> 718 <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list 719view icon structure." /> 720</td> 721<td class="image-caption-c"> 722 <div class="caption grad-rule-top"> 723 <p><strong>Figure 14. </strong>Safeframe and fill gradient for list view 724icons. Icon size is 32x32.</p> 725 </div> 726</td> 727</tr> 728</table> 729 730<h4 id="listviewlight">Light, effects, and shadows</h4> 731 732<p>List view icons are flat and pictured face-on with an inner shadow. Built up 733by a light gradient and inner shadow, they stand out well on a dark 734background.</p> 735 736<table class="image-caption"> 737<tr> 738<td class="image-caption-i"> 739 <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view 740of light, effects, and shadows for list view icons."/> 741</td> 742<td class="image-caption-c"> 743 <div class="caption grad-rule-top"> 744 <p><strong>Figure 15. </strong>Light, effects, and shadows for list view 745icons.</p> 746 <div class="image-caption-nested"> 747 <table style="margin-top:0;"> 748 <tr><td style="padding-right:1em"><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr> 749 <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr> 750 <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr> 751 </table> 752 </div> 753 </div> 754</td> 755</tr> 756</table> 757 758<table style="margin:0px;padding:0px;"> 759<tr> 760<td style="border:0;width:350px;"> 761 762<h4 id="menusteps">Step by step</h4> 763 764<ol> 765<li>Add the effects seen in Figure 15 for the proper filter.</li> 766<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> 767<li>Create the basic shapes using a tool like Adobe Illustrator.</li> 768<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image 769of 32x32 px on a transparent background. </li> 770</ol> 771 772</td> 773</tr> 774</table> 775 776 777<h2 id="dodonts">General guidelines</h2> 778 779<p>Below are some "do and don't" guidelines to consider when creating icons for 780your application. By following the guidelines, you can ensure that your icons 781will work well with other parts of the Android platform UI and will meet the 782expectations of your application's users. </p> 783 784<table style="margin:0px;padding:0px;"> 785<tr> 786<td style="border:0;width:350px;"> 787 788<h4>Do...</h4> 789 790<ul> 791<li>Use a normal perspective. The depth of an object should be realistic.</li> 792<li>Keep it simple! By overdoing an icon, it loses it purpose and 793readability.</li> 794<li>Use colors only when necessary. Mind that the base of a launcher icon should 795be grey and feel solid. </li> 796<li>Use the correct angles for the specific icon types.</li> 797</ul> 798</td> 799<td style="border:0;width:350px;"> 800 801<h4>Don’t...</h4> 802 803<ul> 804<li>Use open elements like text alone as icons. Instead place those elements on 805a base shape.</li> 806<li>Use colors for your status bar notifications. Those are reserved for 807specific phone-only functions.</li> 808</ul> 809</td> 810</tr> 811<tr> 812<td colspan="2" style="border:0;"> 813<img src="{@docRoot}images/icon_design/do_dont.png" alt="Side-by-side examples 814of good/bad icon design."/> 815</td> 816</table> 817 818<h2 id="templatespack">Using the Android Icon Templates Pack</h2> 819 820<p>The Android Icon Templates Pack is a collection of template designs, filters, 821and settings that make it easier for you to create icons that conform to the 822general specifications given in this document. We recommend downloading the 823template pack archive before you get started with your icon design.</p> 824 825<p>The icon templates are provided in Adobe Photoshop and Adobe Illustrator file 826formats, which preserves the layers and design treatments we used when creating the 827standard icons for the Android platform. You can load the template files into any 828compatible image-editing program, although your ability to work directly with the 829layers and treatments may vary based on the program you are using.</p> 830 831<p>You can obtain the Icon Templates Pack archive using the link below: </p> 832 833<p style="margin-left:2em"><a 834href="{@docRoot}shareables/icon_templates-v1.0.zip">Download the Icon Templates 835Pack »</a> 836 837 838<h2 id="iconappendix">Icon appendix</p> 839 840<h3 id="launcherapx">Standard launcher icons</h3> 841 842<p>Shown below are examples of launcher icons used by Android applications. The 843icons are provided for your reference only — please do not reuse these 844icons in your applications.</code>. 845 846<table class="image-caption"> 847<tr> 848 849<td class="image-caption-i image-list"> 850 <img src="{@docRoot}images/icon_design/ic_launcher_alarmclock.png" alt="Android asset" /> 851 <div class="caption">Alarm Clock</div></td> 852 853 854<td class="image-caption-i image-list"> 855 <img src="{@docRoot}images/icon_design/ic_launcher_browser.png" alt="Android asset" /> 856 <div class="caption">Browser</div></td> 857 858 859<td class="image-caption-i image-list"> 860 <img src="{@docRoot}images/icon_design/ic_launcher_calculator.png" alt="Android asset" /> 861 <div class="caption">Calculator</div></td> 862 863 864<td class="image-caption-i image-list"> 865 <img src="{@docRoot}images/icon_design/ic_launcher_calendar.png" alt="Android asset" /> 866 <div class="caption">Calendar</div></td> 867 868 869<td class="image-caption-i image-list"> 870 <img src="{@docRoot}images/icon_design/ic_launcher_video_camera.png" alt="Android asset" /> 871 <div class="caption">Camcorder</div></td> 872 873 874<td class="image-caption-i image-list"> 875 <img src="{@docRoot}images/icon_design/ic_launcher_camera.png" alt="Android asset" /> 876 <div class="caption">Camera</div></td> 877 878 879<td class="image-caption-i image-list"> 880 <img src="{@docRoot}images/icon_design/ic_launcher_contacts.png" alt="Android asset" /> 881 <div class="caption">Contacts</div></td> 882 883</tr> 884<tr> 885 886<td class="image-caption-i image-list"> 887 <img src="{@docRoot}images/icon_design/ic_launcher_phone_dialer.png" alt="Android asset" /> 888 <div class="caption">Dialer</div></td> 889 890 891<td class="image-caption-i image-list"> 892 <img src="{@docRoot}images/icon_design/ic_launcher_email_generic.png" alt="Android asset" /> 893 <div class="caption">Email</div></td> 894 895 896<td class="image-caption-i image-list"> 897 <img src="{@docRoot}images/icon_design/ic_launcher_gallery.png" alt="Android asset" /> 898 <div class="caption">Gallery</div></td> 899 900 901<td class="image-caption-i image-list"> 902 <img src="{@docRoot}images/icon_design/ic_launcher_generic_application.png" alt="Android asset" /> 903 <div class="caption">Generic application</div></td> 904 905 906<td class="image-caption-i image-list"> 907 <img src="{@docRoot}images/icon_design/ic_launcher_email.png" alt="Android asset" /> 908 <div class="caption">Gmail</div></td> 909 910 911<td class="image-caption-i image-list"> 912 <img src="{@docRoot}images/icon_design/ic_launcher_google_talk.png" alt="Android asset" /> 913 <div class="caption">Google Talk</div></td> 914 915 916<td class="image-caption-i image-list"> 917 <img src="{@docRoot}images/icon_design/ic_launcher_IM.png" alt="Android asset" /> 918 <div class="caption">IM</div></td> 919 920</tr> 921<tr> 922 923<td class="image-caption-i image-list"> 924 <img src="{@docRoot}images/icon_design/ic_launcher_maps.png" alt="Android asset" /> 925 <div class="caption">Maps</div></td> 926 927 928<td class="image-caption-i image-list"> 929 <img src="{@docRoot}images/icon_design/ic_launcher_marketplace.png" alt="Android asset" /> 930 <div class="caption">Market </div></td> 931 932 933<td class="image-caption-i image-list"> 934 <img src="{@docRoot}images/icon_design/ic_launcher_sms_mms.png" alt="Android asset" /> 935 <div class="caption">Messaging </div></td> 936 937 938<td class="image-caption-i image-list"> 939 <img src="{@docRoot}images/icon_design/ic_launcher_musicplayer_2.png" alt="Android asset" /> 940 <div class="caption">Music</div></td> 941 942 943<td class="image-caption-i image-list"> 944 <img src="{@docRoot}images/icon_design/ic_launcher_settings.png" alt="Android asset" /> 945 <div class="caption">Settings</div></td> 946 947 948<td class="image-caption-i image-list"> 949 <img src="{@docRoot}images/icon_design/ic_launcher_voicedial.png" alt="Android asset" /> 950 <div class="caption">Voice Dialer</div></td> 951 952 953<td class="image-caption-i image-list"> 954 <img src="{@docRoot}images/icon_design/ic_launcher_voicesearch.png" alt="Android asset" /> 955 <div class="caption">Voice Search</div></td> 956 957</tr> 958<tr> 959 960<td class="image-caption-i image-list"> 961 <img src="{@docRoot}images/icon_design/ic_launcher_youtube.png" alt="Android asset" /> 962 <div class="caption">YouTube</div></td> 963</tr> 964</table> 965 966<h3 id="menuapx">Standard menu icons</h3> 967 968<p>Shown below are standard menu icons that are included in the Android platform 969(as of Android 1.5). You can reference any of these icon resources from your 970application as needed, but make sure that the action you assign to the icon is 971consistent with that listed. Note that this is not a complete list of icons and 972that the actual appearance of standard icons may change across platform 973versions.</p> 974 975<p>To reference one of the icons from your code, use 976<code>android.R.drawable.<icon_resource_identifier></code>. For example, 977you can call a menu item's {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) setIcon()} 978method and pass the resource name:</p> 979 980<p style="margin-left:2em"><code>.setIcon(android.R.drawable.ic_menu_more);</code>. 981 982<p>You could reference the same icon from a layout file using 983<code>android:icon="@android:drawable/ic_menu_more"></code>.</p> 984 985<p>To determine the resource ID for an icon listed below, hover over the icon or 986simply look at image filenames, which use the format 987"<icon_resource_identifier>.png".</p> 988 989<table class="image-caption"> 990<tr> 991 992<td class="image-caption-i image-list"> 993 <img src="{@docRoot}images/icon_design/ic_menu_add.png" title="ic_menu_add" alt="Android asset" /> 994 <div class="caption">Add</div></td> 995 996 997<td class="image-caption-i image-list"> 998 <img src="{@docRoot}images/icon_design/ic_menu_call.png" title="ic_menu_call" alt="Android asset" /> 999 <div class="caption">Call</div></td> 1000 1001 1002<td class="image-caption-i image-list"> 1003 <img src="{@docRoot}images/icon_design/ic_menu_camera.png" title="ic_menu_camera" alt="Android asset" /> 1004 <div class="caption">Camera</div></td> 1005 1006 1007<td class="image-caption-i image-list"> 1008 <img src="{@docRoot}images/icon_design/ic_menu_close_clear_cancel.png" title="ic_menu_close_clear_cancel" alt="Android asset" /> 1009 <div class="caption">Clear / Close / Cancel / Discard </div></td> 1010 1011 1012<td class="image-caption-i image-list"> 1013 <img src="{@docRoot}images/icon_design/ic_menu_compass.png" title="ic_menu_compass" alt="Android asset" /> 1014 <div class="caption">Compass</div></td> 1015 1016 1017<td class="image-caption-i image-list"> 1018 <img src="{@docRoot}images/icon_design/ic_menu_delete.png" title="ic_menu_delete" alt="Android asset" /> 1019 <div class="caption">Delete</div></td> 1020 1021 1022<td class="image-caption-i image-list"> 1023 <img src="{@docRoot}images/icon_design/ic_menu_directions.png" title="ic_menu_directions" alt="Android asset" /> 1024 <div class="caption">Directions</div></td> 1025 1026</tr> 1027<tr> 1028 1029<td class="image-caption-i image-list"> 1030 <img src="{@docRoot}images/icon_design/ic_menu_edit.png" title="ic_menu_edit" alt="Android asset" /> 1031 <div class="caption">Edit</div></td> 1032 1033 1034<td class="image-caption-i image-list"> 1035 <img src="{@docRoot}images/icon_design/ic_menu_gallery.png" title="ic_menu_gallery" alt="Android asset" /> 1036 <div class="caption">Gallery</div></td> 1037 1038 1039<td class="image-caption-i image-list"> 1040 <img src="{@docRoot}images/icon_design/ic_menu_help.png" title="ic_menu_help" alt="Android asset" /> 1041 <div class="caption">Help</div></td> 1042 1043 1044<td class="image-caption-i image-list"> 1045 <img src="{@docRoot}images/icon_design/ic_menu_info_details.png" title="ic_menu_info_details" alt="Android asset" /> 1046 <div class="caption">Info / details</div></td> 1047 1048 1049<td class="image-caption-i image-list"> 1050 <img src="{@docRoot}images/icon_design/ic_menu_mapmode.png" title="ic_menu_mapmode" alt="Android asset" /> 1051 <div class="caption">Map mode</div></td> 1052 1053 1054<td class="image-caption-i image-list"> 1055 <img src="{@docRoot}images/icon_design/ic_menu_mylocation.png" title="ic_menu_mylocation" alt="Android asset" /> 1056 <div class="caption">My Location</div></td> 1057 1058 1059<td class="image-caption-i image-list"> 1060 <img src="{@docRoot}images/icon_design/ic_menu_more.png" title="ic_menu_more" alt="Android asset" /> 1061 <div class="caption">More</div></td> 1062 1063</tr> 1064<tr> 1065 1066<td class="image-caption-i image-list"> 1067 <img src="{@docRoot}images/icon_design/ic_menu_preferences.png" title="ic_menu_preferences" alt="Android asset" /> 1068 <div class="caption">Preferences</div></td> 1069 1070 1071<td class="image-caption-i image-list"> 1072 <img src="{@docRoot}images/icon_design/ic_menu_rotate.png" title="ic_menu_rotate" alt="Android asset" /> 1073 <div class="caption">Rotate</div></td> 1074 1075 1076<td class="image-caption-i image-list"> 1077 <img src="{@docRoot}images/icon_design/ic_menu_save.png" title="ic_menu_save" alt="Android asset" /> 1078 <div class="caption">Save</div></td> 1079 1080 1081<td class="image-caption-i image-list"> 1082 <img src="{@docRoot}images/icon_design/ic_menu_send.png" title="ic_menu_send" alt="Android asset" /> 1083 <div class="caption">Send</div></td> 1084 1085 1086<td class="image-caption-i image-list"> 1087 <img src="{@docRoot}images/icon_design/ic_menu_search.png" title="ic_menu_search" alt="Android asset" /> 1088 <div class="caption">Search</div></td> 1089 1090 1091<td class="image-caption-i image-list"> 1092 <img src="{@docRoot}images/icon_design/ic_menu_share.png" title="ic_menu_share" alt="Android asset" /> 1093 <div class="caption">Share</div></td> 1094 1095 1096<td class="image-caption-i image-list"> 1097 <img src="{@docRoot}images/icon_design/ic_menu_upload.png" title="ic_menu_upload" alt="Android asset" /> 1098 <div class="caption">Upload</div></td> 1099 1100</tr> 1101<tr> 1102 1103<td class="image-caption-i image-list"> 1104 <img src="{@docRoot}images/icon_design/ic_menu_view.png" title="ic_menu_view" alt="Android asset" /> 1105 <div class="caption">View</div></td> 1106 1107 1108<td class="image-caption-i image-list"> 1109 <img src="{@docRoot}images/icon_design/ic_menu_zoom.png" title="ic_menu_zoom" alt="Android asset" /> 1110 <div class="caption">Zoom</div></td> 1111 1112</tr> 1113</table> 1114 1115 1116<h3 id="statusbarapx">Standard status bar icons</h3> 1117 1118<p>Shown below are standard status bar icons included in the Android platform 1119(as of Android 1.5). You can reference any of these icon resources from your 1120application as needed, but make sure that the meaning of the icon is consistent 1121with the standard meaning listed. Note that this is not a complete list of icons 1122and that the actual appearance of standard icons may change across platform 1123versions.</p> 1124 1125<p>To reference one of the icons from your code, use 1126<code>android.R.drawable.<icon_resource_identifier></code>. For example, 1127you can construct a simple notification that references one of the icons like 1128this: </p> 1129 1130<p style="margin-left:2em"><code>new Notification(R.drawable.stat_notify_calendar, 1131"sample text", System.currentTimeMillis());</code></p> 1132 1133<p>To determine the resource ID for an icon listed below, hover over the icon 1134or simply look at the image filename, which use the format 1135"<icon_resource_identifier>.png".</p> 1136 1137 1138<table class="image-caption"> 1139<tr> 1140 1141<td class="image-caption-i image-list"> 1142 <img src="{@docRoot}images/icon_design/stat_sys_data_bluetooth.png" title="stat_sys_data_bluetooth" alt="Android asset" /> 1143 <div class="caption">Bluetooth</div></td> 1144 1145 1146<td class="image-caption-i image-list"> 1147 <img src="{@docRoot}images/icon_design/stat_notify_email_generic.png" title="stat_notify_email_generic" alt="Android asset" /> 1148 <div class="caption">Email</div></td> 1149 1150 1151<td class="image-caption-i image-list"> 1152 <img src="{@docRoot}images/icon_design/stat_notify_chat.png" title="stat_notify_chat" alt="Android asset" /> 1153 <div class="caption">IM</div></td> 1154 1155 1156<td class="image-caption-i image-list"> 1157 <img src="{@docRoot}images/icon_design/stat_notify_voicemail.png" title="stat_notify_voicemail" alt="Android asset" /> 1158 <div class="caption">Voicemail</div></td> 1159 1160 1161<td class="image-caption-i image-list"> 1162 <img src="{@docRoot}images/icon_design/stat_sys_warning.png" title="stat_sys_warning" alt="Android asset" /> 1163 <div class="caption">Warning</div></td> 1164 1165 1166<td class="image-caption-i image-list"> 1167 <img src="{@docRoot}images/icon_design/stat_sys_phone_call.png" title="stat_sys_phone_call" alt="Android asset" /> 1168 <div class="caption">Call</div></td> 1169 1170 1171<td class="image-caption-i image-list"> 1172 <img src="{@docRoot}images/icon_design/stat_sys_phone_call_forward.png" title="stat_sys_phone_call_forward" alt="Android asset" /> 1173 <div class="caption">Call forward</div></td> 1174 1175</tr> 1176<tr> 1177 1178<td class="image-caption-i image-list"> 1179 <img src="{@docRoot}images/icon_design/stat_sys_phone_call_on_hold.png" title="stat_sys_phone_call_on_hold" alt="Android asset" /> 1180 <div class="caption">Call on hold</div></td> 1181 1182 1183<td class="image-caption-i image-list"> 1184 <img src="{@docRoot}images/icon_design/stat_notify_missed_call.png" title="stat_notify_missed_call" alt="Android asset" /> 1185 <div class="caption">Missed call</div></td> 1186 1187</tr> 1188</table> 1189 1190 1191