Mobile Iconography

Each icon clearly communicates the task it solves for. When applied consistently, icons enable our customers to quickly complete a task (examples: delete an item, attach a file). Icons should never be used as decoration, and should always correspond to an action.

iOS

When to Use

Use icons when you need them for:  Navigation, Actions, and Status.

  • Navigation icons are used within the left navigation drawer.
  • Primary action icons should represent the most important or frequently used actions in the screen. They appear in the application chrome (navigation bars, action bars, tool bars, global create menu and forms) and are directly relevant to the user’s core tasks.
  • Secondary action icons call attention to less important actions in the screen and appear in-page, in tables, activity feed or filter drop downs.
  • Status indication icons indicate transaction, feed, and person status. (e.g. the ‘Overdue’ status icon in the activity feed)

Appearance & Behavior

Mobile icons are currently in progress. Please check with Erica or Dorelle for the latest updates.

Navigation icons

  • Navigation icons are grey and blue in default state, and white on pressed
  • Size: 24×24 px (Double size in retina)

(Navigation icon set is currently in progress)

Primary action icons

  • Primary action icons have the tint color of #365ebf with 40% transparency on pressed
  • Size: 24×24 px (Double size in retina)
icn_primary

Secondary action icons

  • Secondary action icons have the tint color of #8fa9c4 with 40% transparency on pressed
  • Size: 24×24 px (Double size in retina)
icn_secondary

Android

When to Use

Use icons when you need them for:  Navigation, Actions, and Status.

  • Navigation icons: we are currently not using icons in the left navigation drawer for Android.
  • Primary action icons should represent the most important or frequently used actions in the screen. They appear in the application chrome (navigation bars, action bars, tool bars, global create menu and forms) and are directly relevant to the user’s core tasks.
  • Status indication icons indicate transaction, feed, and person status. (e.g. the ‘Overdue’ status icon in the activity feed)

Appearance & Behavior

Primary action icons

  • Primary action icons are white and mostly appear in action bar
  • On pressed, the icon’s background color changes to be blue (#0098cd)
  • Size: 24×24 dp
icn_1x_android2
© Intuit 2016 | Terms of use