1page.title=Iconography 2page.tags="icons" 3@jd:body 4 5<img src="{@docRoot}design/media/iconography_overview.png"> 6 7<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, 8intuitive representation of an action, a status, or an app.</p> 9 10 11 12<h2 id="launcher">Launcher</h2> 13 14<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the 15user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on 16any type of background.</p> 17 18<div class="layout-content-row"> 19 <div class="layout-content-col span-4"> 20 21 <img src="{@docRoot}design/media/iconography_launcher_size.png"> 22 23 </div> 24 <div class="layout-content-col span-4"> 25 26 <img src="{@docRoot}design/media/iconography_launcher_focal.png"> 27 28 </div> 29 <div class="layout-content-col span-4"> 30 31 <img src="{@docRoot}design/media/iconography_launcher_style.png"> 32 33 </div> 34</div> 35 36<div class="layout-content-row"> 37 <div class="layout-content-col span-4"> 38 39 <h4>Sizes & scale</h4> 40 41 <ul> 42 <li class="no-bullet with-icon tablet"> 43 <p>Launcher icons on a mobile device must be <strong>48x48 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 44 <li class="no-bullet with-icon web"> 45 <p>Launcher icons for display on Google Play must be <strong>512x512 pixels</strong>.</p></li> 46 </ul> 47 48 </div> 49 <div class="layout-content-col span-4"> 50 51 <h4>Proportions</h4> 52 53 <ul> 54 <li class="no-bullet with-icon tablet"> 55 <p>Full asset, <strong>48x48 dp</strong></p> 56 </li> 57 </ul> 58 59 </div> 60 <div class="layout-content-col span-4"> 61 62<h4>Style</h4> 63<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed 64from above, so that users perceive some depth.</p> 65 66 </div> 67</div> 68 69 70<div class="layout-content-row"> 71 <div class="layout-content-col span-4"> 72 73 </div> 74 <div class="layout-content-col span-7"> 75 76 <img src="{@docRoot}design/media/iconography_launcher_example.png"> 77 78 </div> 79 <!-- 2 free columns --> 80</div> 81 82<div class="layout-content-row"> 83 <div class="layout-content-col span-12"> 84 85 <img src="{@docRoot}design/media/iconography_launcher_example2.png"> 86 87 <div class="vspace size-2"> </div> 88 89 </div> 90 <!-- 1 free columns --> 91</div> 92 93 94<h2 id="action-bar">Action Bar</h2> 95 96<p> 97 98Action bar icons are graphic buttons that represent the most important actions people can take 99within your app. Each one should employ a simple metaphor representing a single concept that most 100people can grasp at a glance. 101 102</p> 103<p> 104 105Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The 106download link below provides a package with icons that are scaled for various screen densities and 107are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled 108icons that you can modify to match your theme, in addition to Adobe® Illustrator® source 109files for further customization. 110 111</p> 112<p> 113<a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);" 114 href="{@docRoot}downloads/design/Android_Design_Icons_20120814.zip">Download the Action Bar Icon Pack</a> 115</p> 116 117<div class="layout-content-row"> 118 <div class="layout-content-col span-4"> 119 120 <img src="{@docRoot}design/media/iconography_actionbar_size.png"> 121 122 </div> 123 <div class="layout-content-col span-4"> 124 125 <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> 126 127 </div> 128 <div class="layout-content-col span-4"> 129 130 <img src="{@docRoot}design/media/iconography_actionbar_style.png"> 131 132 </div> 133</div> 134 135<div class="layout-content-row"> 136 <div class="layout-content-col span-4"> 137 138 <h4>Sizes & scale</h4> 139 140 <ul> 141 <li class="no-bullet with-icon tablet"> 142 <p>Action bar icons for phones should be <strong>32x32 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 143 </ul> 144 145 </div> 146 <div class="layout-content-col span-4"> 147 148 <h4>Focal area & proportions</h4> 149 150 <ul> 151 <li class="no-bullet with-icon tablet"> 152 <p>Full asset, <strong>32x32 dp</strong></p> 153 <p>Optical square, <strong>24x24 dp</strong></p> 154 </li> 155 </ul> 156 157 </div> 158 <div class="layout-content-col span-4"> 159 160<h4>Style</h4> 161<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, 162rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative 163spaces should be a minimum of 2 dp.</p> 164 165 </div> 166</div> 167 168 169<div class="layout-content-row"> 170 <div class="layout-content-col span-3"> 171 172<h4>Colors</h4> 173<p>Colors: <strong>#333333</strong><br /> 174Enabled: <strong>60%</strong> opacity<br /> 175Disabled: <strong>30%</strong> opacity</p> 176<div class="vspace size-1"> </div> 177 178<p>Colors: <strong>#FFFFFF</strong><br /> 179Enabled: <strong>80%</strong> opacity<br /> 180Disabled: <strong>30%</strong> opacity</p> 181 182 </div> 183 <div class="layout-content-col span-9"> 184 185 <img src="{@docRoot}design/media/iconography_actionbar_colors.png"> 186 187 </div> 188</div> 189 190 191<h2 id="small-contextual">Small / Contextual Icons</h2> 192 193<p>Within the body of your app, use small icons to surface actions and/or provide status for specific 194items. For example, in the Gmail app, each message has a star icon that marks the message as 195important.</p> 196 197 198<div class="layout-content-row"> 199 <div class="layout-content-col span-4"> 200 201 <img src="{@docRoot}design/media/iconography_small_size.png"> 202 203 </div> 204 <div class="layout-content-col span-4"> 205 206 <img src="{@docRoot}design/media/iconography_small_focal.png"> 207 208 </div> 209 <div class="layout-content-col span-4"> 210 211 <img src="{@docRoot}design/media/iconography_small_style.png"> 212 213 </div> 214</div> 215 216<div class="layout-content-row"> 217 <div class="layout-content-col span-4"> 218 219 <h4>Sizes & scale</h4> 220 221 <ul> 222 <li class="no-bullet with-icon tablet"> 223 <p>Small icons should be <strong>16x16 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 224 </ul> 225 226 </div> 227 <div class="layout-content-col span-4"> 228 229 <h4>Focal area & proportions</h4> 230 231 <ul> 232 <li class="no-bullet with-icon tablet"> 233 <p>Full asset, <strong>16x16 dp</strong></p> 234 <p>Optical square, <strong>12x12 dp</strong></p> 235 </li> 236 </ul> 237 238 </div> 239 <div class="layout-content-col span-4"> 240 241<h4>Style</h4> 242<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual 243metaphor so that a user can easily recognize and understand its purpose.</p> 244 245 </div> 246</div> 247 248 249<div class="layout-content-row"> 250 <div class="layout-content-col span-4"> 251 252 <img src="{@docRoot}design/media/iconography_small_colors.png"> 253 254 <div class="vspace size-2"> </div> 255 256<h4>Colors</h4> 257<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon 258to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with 259the background.</p> 260 261 </div> 262 <div class="layout-content-col span-7"> 263 264 <img src="{@docRoot}design/media/iconography_small_example.png"> 265 266 </div> 267 <!-- 2 free columns --> 268</div> 269 270 271<h2 id="notification">Notification Icons</h2> 272 273<p>If your app generates notifications, provide an icon that the system can display in the status bar 274whenever a new notification is available.</p> 275 276 277<div class="layout-content-row"> 278 <div class="layout-content-col span-4"> 279 280 <img src="{@docRoot}design/media/iconography_notification_size.png"> 281 282 </div> 283 <div class="layout-content-col span-4"> 284 285 <img src="{@docRoot}design/media/iconography_notification_focal.png"> 286 287 </div> 288 <div class="layout-content-col span-4"> 289 290 <img src="{@docRoot}design/media/iconography_notification_style.png"> 291 292 </div> 293</div> 294 295<div class="layout-content-row"> 296 <div class="layout-content-col span-4"> 297 298 <h4>Sizes & scale</h4> 299 300 <ul> 301 <li class="no-bullet with-icon tablet"> 302 <p>Notification icons must be <strong>24x24 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 303 </ul> 304 305 </div> 306 <div class="layout-content-col span-4"> 307 308 <h4>Focal area & proportions</h4> 309 310 <ul> 311 <li class="no-bullet with-icon tablet"> 312 <p>Full asset, <strong>24x24 dp</strong></p> 313 <p>Optical square, <strong>22x22 dp</strong></p> 314 </li> 315 </ul> 316 317 </div> 318 <div class="layout-content-col span-4"> 319 320<h4>Style</h4> 321<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> 322 323 </div> 324</div> 325 326 327<div class="layout-content-row"> 328 <div class="layout-content-col span-4"> 329 330<h4>Colors</h4> 331<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> 332 333 </div> 334 <div class="layout-content-col span-7"> 335 336 <img src="{@docRoot}design/media/iconography_notification_example.png"> 337 338 </div> 339 <!-- 2 free columns --> 340</div> 341
