Last Updated on Sep 29, 2022
Action Icons are clickable icons that allow the user to take an action or open a menu of actions.
- Action icons are used whenever an icon has any kind of interaction. If an icon is only for decoration, a display icon should be used.
- Most action icons should be gray-900 in light mode and gray-200 in dark mode. Color can be added to action icons, but should be done judiciously. In some cases, like an info icon, blurple-500 can be used. This is acceptable, but should be minimized to keep designs clean.
- In rare cases, other colors like red-500 can be used for a trash icon, for example. It shouldn’t be used inside tables, but can be available to denote a destructive action without a dialog. More commonly, the default icon color would be used with a dialog to confirm the deletion.
- Action icon can be used to toggle between 2 states. Similar to toggle buttons, the icon should stay the same in both on and off states. Visually, the icon should switch from outlined, for the off-state, to filled, for the on-state. The best example of this is the favorite icon.
Do's and Don'ts
Limit the number of action icons next to each other at three or four.
Add color very sparingly to action icons. See our color guide for more information.
Don’t add backgrounds to action icons.
Don’t change the icon because of a change in selection or state. Icons should be static.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts