The Action icon is going to help users identify an action quickly, by using an icon symbolising the action.


When referring to an action in a header, list, toast, etc, an action icon is placed to illustrate the action that is being performed.

The action icon should always be placed on the left side of the related text.

Create user pane header
Delete file toast



Action icons shall be provided in 14x14px PNG and in a scalable vector file for all larger sizes than 14×14. They shall also be recognizable at 14px @1x


Icons are shown as a small circle. 


Icons shall be filled with a 50% transparency black or white color, depending on the background.

Related pages

The pane header allows users to quickly understand the purpose of each pane and their relationship to each other.
A toast is a self-dismissing bar used to give users non-critical info about action status within an app or another app: record created, fil...