design/style/iconography.jd

page.title=Iconography
page.tags="icons"
@jd:body

<img src="{@docRoot}design/media/iconography_overview.png">


<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick,
intuitive representation of an action, a status, or an app.</p>

<p>When you design icons for your app, it's important to keep in mind that your
app may be installed on a variety of devices that offer a range of
pixel densities, as mentioned in
<a href="{@docRoot}design/style/devices-displays.html">Devices
and Displays</a>. But you can make your icons look great on all devices
by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of
the device screen and loads the appropriate density-specific assets for your app. </p>

<p>Because you will deliver each icon in multiple sizes to support different densities,
the design guidelines below
refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym>
units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p>

<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />

<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8
scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and
xxx-high respectively). For example, consider that the size for a launcher icon is specified to be
48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the
high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high
density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p>

<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens,
but you normally don't need to create custom assets at this size because Android
effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>


<h2 id="launcher">Launcher</h2>

<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the
user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
any type of background.</p>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_launcher_size.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_launcher_focal.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_launcher_style.png">

  </div>
</div>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <h4>Sizes &amp; scale</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <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>
      <li class="no-bullet with-icon web">
        <p>Launcher icons for display on Google Play must be <strong>512x512 pixels</strong>.</p></li>
    </ul>

  </div>
  <div class="layout-content-col span-4">

    <h4>Proportions</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <p>Full asset, <strong>48x48 dp</strong></p>
      </li>
    </ul>

  </div>
  <div class="layout-content-col span-4">

<h4>Style</h4>
<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed
from above, so that users perceive some depth.</p>

  </div>
</div>


<div class="layout-content-row">
  <div class="layout-content-col span-4">
    &nbsp;
  </div>
  <div class="layout-content-col span-7">

    <img src="{@docRoot}design/media/iconography_launcher_example.png">

  </div>
  <!-- 2 free columns -->
</div>

<div class="layout-content-row">
  <div class="layout-content-col span-12">

    <img src="{@docRoot}design/media/iconography_launcher_example2.png">

    <div class="vspace size-2">&nbsp;</div>

  </div>
  <!-- 1 free columns -->
</div>


<h2 id="action-bar">Action Bar</h2>

<p>

Action bar icons are graphic buttons that represent the most important actions people can take
within your app. Each one should employ a simple metaphor representing a single concept that most
people can grasp at a glance.

</p>
<p>

Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The
download link below provides a package with icons that are scaled for various screen densities and
are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled
icons that you can modify to match your theme, in addition to Adobe&reg; Illustrator&reg; source
files for further customization.

</p>
<p>
<a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);"
   href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a>
</p>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_actionbar_size.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_actionbar_focal.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_actionbar_style.png">

  </div>
</div>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <h4>Sizes &amp; scale</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <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>
    </ul>

  </div>
  <div class="layout-content-col span-4">

    <h4>Focal area &amp; proportions</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <p>Full asset, <strong>32x32 dp</strong></p>
        <p>Optical square, <strong>24x24 dp</strong></p>
      </li>
    </ul>

  </div>
  <div class="layout-content-col span-4">

<h4>Style</h4>
<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin,
rotate it 45&deg; left or right to fill the focal space. The thickness of the strokes and negative
spaces should be a minimum of 2 dp.</p>

  </div>
</div>


<div class="layout-content-row">
  <div class="layout-content-col span-3">

<h4>Colors</h4>
<p>Colors: <strong>#333333</strong><br />
Enabled: <strong>60%</strong> opacity<br />
Disabled: <strong>30%</strong> opacity</p>
<div class="vspace size-1">&nbsp;</div>

<p>Colors: <strong>#FFFFFF</strong><br />
Enabled: <strong>80%</strong> opacity<br />
Disabled: <strong>30%</strong> opacity</p>

  </div>
  <div class="layout-content-col span-9">

    <img src="{@docRoot}design/media/iconography_actionbar_colors.png">

  </div>
</div>


<h2 id="small-contextual">Small / Contextual Icons</h2>

<p>Within the body of your app, use small icons to surface actions and/or provide status for specific
items. For example, in the Gmail app, each message has a star icon that marks the message as
important.</p>


<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_small_size.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_small_focal.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_small_style.png">

  </div>
</div>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <h4>Sizes &amp; scale</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <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>
    </ul>

  </div>
  <div class="layout-content-col span-4">

    <h4>Focal area &amp; proportions</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <p>Full asset, <strong>16x16 dp</strong></p>
        <p>Optical square, <strong>12x12 dp</strong></p>
      </li>
    </ul>

  </div>
  <div class="layout-content-col span-4">

<h4>Style</h4>
<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual
metaphor so that a user can easily recognize and understand its purpose.</p>

  </div>
</div>


<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_small_colors.png">

    <div class="vspace size-2">&nbsp;</div>

<h4>Colors</h4>
<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon
to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with
the background.</p>

  </div>
  <div class="layout-content-col span-7">

    <img src="{@docRoot}design/media/iconography_small_example.png">

  </div>
  <!-- 2 free columns -->
</div>


<h2 id="notification">Notification Icons</h2>

<p>If your app generates notifications, provide an icon that the system can display in the status bar
whenever a new notification is available.</p>


<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_notification_size.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_notification_focal.png">

  </div>
  <div class="layout-content-col span-4">

    <img src="{@docRoot}design/media/iconography_notification_style.png">

  </div>
</div>

<div class="layout-content-row">
  <div class="layout-content-col span-4">

    <h4>Sizes &amp; scale</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <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>
    </ul>

  </div>
  <div class="layout-content-col span-4">

    <h4>Focal area &amp; proportions</h4>

    <ul>
      <li class="no-bullet with-icon tablet">
        <p>Full asset, <strong>24x24 dp</strong></p>
        <p>Optical square, <strong>22x22 dp</strong></p>
      </li>
    </ul>

  </div>
  <div class="layout-content-col span-4">

<h4>Style</h4>
<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p>

  </div>
</div>


<div class="layout-content-row">
  <div class="layout-content-col span-4">

<h4>Colors</h4>
<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p>

  </div>
  <div class="layout-content-col span-7">

    <img src="{@docRoot}design/media/iconography_notification_example.png">

  </div>
  <!-- 2 free columns -->
</div>


<h2 id="DesignTips">Design Tips</h2>

<p>Here are some tips you might find useful as you create icons or other
drawable assets for your application. These tips assume you are using
Adobe&reg; Photoshop&reg; or a similar raster and vector image-editing program.</p>


<h3>Use vector shapes where possible</h3>

<p>Many image-editing programs such as Adobe&reg; Photoshop&reg; allow you to use a
combination of vector shapes and raster layers and effects. When possible,
use vector shapes so that if the need arises, assets can be scaled up without
loss of detail and edge crispness.</p>

<p>Using vectors also makes it easy to align edges and corners to pixel
boundaries at smaller resolutions.</li>


<h3>Start with large artboards</h3>

<p>Because you will need to create assets for different screen densities,
it is best to start your icon
designs on large artboards with dimensions that are multiples of the target icon
sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide,
depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you
initially draw launcher icons on an 864x864 artboard, it will be easier and
cleaner to adjust the icons when you scale the artboard down to the target
sizes for final asset creation.</p>


<h3>When scaling, redraw bitmap layers as needed</h3>

<p>If you scaled an image up from a bitmap layer, rather than from a vector
layer, those layers will need to be redrawn manually to appear crisp at higher
densities. For example if a 60x60 circle was painted as a bitmap for
mdpi it will need to be repainted as a 90x90 circle for hdpi.</p>


<h3>Use common naming conventions for icon assets</h3>

<p>Try to name files so that related assets will group together inside a
directory when they are sorted alphabetically. In particular, it helps to use a
common prefix for each icon type. For example:</p>

<table>
<tr>
<th>Asset Type</th>
<th>Prefix</th>
<th>Example</th>
</tr>
<tr>
<td>Icons</td>
<td><code>ic_</code></td>
<td><code>ic_star.png</code></td>
</tr>
<tr>
<td>Launcher icons</td>
<td><code>ic_launcher</code></td>
<td><code>ic_launcher_calendar.png</code></td>
</tr>
<tr>
<td>Menu icons and Action Bar icons</td>
<td><code>ic_menu</code></td>
<td><code>ic_menu_archive.png</code></td>
</tr>
<tr>
<td>Status bar icons</td>
<td><code>ic_stat_notify</code></td>
<td><code>ic_stat_notify_msg.png</code></td>
</tr>
<tr>
<td>Tab icons</td>
<td><code>ic_tab</code></td>
<td><code>ic_tab_recent.png</code></td>
</tr>
<tr>
<td>Dialog icons</td>
<td><code>ic_dialog</code></td>
<td><code>ic_dialog_info.png</code></td>
</tr>
</table>

<p>Note that you are not required to use a shared prefix of any
type&mdash;doing so is for your convenience only.</p>


<h3>Set up a working space that organizes files by density</h3>

<p>Supporting multiple screen densities means you must create multiple versions
of the same icon. To help keep the multiple copies of files safe and easier to
find, we recommend creating a directory structure in your working space that
organizes asset files based on the target density. For example:</p>

<pre>
art/...
    mdpi/...
        _pre_production/...
            <em>working_file</em>.psd
        <em>finished_asset</em>.png
    hdpi/...
        _pre_production/...
            <em>working_file</em>.psd
        <em>finished_asset</em>.png
    xhdpi/...
        _pre_production/...
            <em>working_file</em>.psd
        <em>finished_asset</em>.png</pre>
    xxhdpi/...
        _pre_production/...
            <em>working_file</em>.psd
        <em>finished_asset</em>.png</pre>

<p>Because the structure in your working space is similar to that of the application, you
can quickly determine which assets should be copied to each
resources directory. Separating assets by density also helps you detect any
variances in filenames across densities, which is important because
corresponding assets for different densities must share the same filename.</p>

<p>For comparison, here's the resources directory structure of a typical
application: </p>

<pre>res/...
    drawable-ldpi/...
        <em>finished_asset</em>.png
    drawable-mdpi/...
        <em>finished_asset</em>.png
    drawable-hdpi/...
        <em>finished_asset</em>.png
    drawable-xhdpi/...
        <em>finished_asset</em>.png
</pre>

<p>For more information about how to save resources in the application project,
see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>.
</p>


<h3>Remove unnecessary metadata from final assets</h3>

<p>Although the Android SDK tools will automatically compress PNGs when packaging
application resources into the application binary, a good practice is to remove
unnecessary headers and metadata from your PNG assets. Tools such as <a
href="http://optipng.sourceforge.net/">OptiPNG</a> or <a
href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this
metadata is removed and that your image asset file sizes are optimized.</p>