Action Icon
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.
Component Variants
Design Principles
- 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
Related Components
Display Icon