Lead:  Asaf Ben-Oved 

Description

Used for toolbars and displays where words won’t comfortably fit alongside icons.

May also be used as a menu button.

See example:

Usage & Behaviour

General guidelines

Structure

When used with a label, the icon will be positioned left to the label (depends on language direction)

Content

For icons with text see guidelines of Buttons#Labels

Internal logic

Toggle icon buttons are used for both action and states reference.

When no label presented, show a tooltip.

States

State	Icon Button	Icon Button + label	Icon Menu Button
Regular
Hover
Active
Disabled
Focused
Focused + Hover
Focused + Active
Focused + Disabled

Interaction

Clicking on the button will either initiate an action or set the button to an active state (in toggle icon buttons)

• If the button is in Active state, clicking again will return to the previous state

Toggle icon buttons 

• clicking on the icon will toggle between its actions

• Can have 2 distinct (or opposite) actions
  For example, a lock icon when clicked upon

  

  Turns to an “unlock” icon

  

• Tooltips for icon toggle buttons will present the next available action.

  • For example, the tooltip for lock would be "Unlock".

    

Best practices

Use:

• When the icon’s meaning is unambiguous.

• Consider pairing with a Tooltip to describe the Icon’s underlying action

Don’t use:

• Just icons when there is enough space to add labels

Separate groups of icons by a vertical separator “|”

Design

Zeplin link
Icon	Icon with label	Icon Menu

Code

<<a box containing the code - discuss with Femi>>