Icon
Tooltip
Default
Hover
Pressed
Disabled
1. When to use
Icon buttons should be used to perform specific actions such as "edit" or "close". They should not be used to navigate the user from one page to another. ²
2. Use with caution
The meaning of icons can be misinterpreted. Only use icon buttons for well-known actions that are regularly used and easy to memorize.¹ For lesser-known actions, use our standard buttons with text labels that describe the action.
3. Tooltip Label
The button label is displayed in a tooltip on hover. The button labels should use verbs to describe the exact action that will be taken. Avoid using labels that are vague or generic. ²
The tooltip should describe the action that occurs when the user selects the icon button. Do not simply use the name of the icon as the tooltip--this is not usually descriptive and helpful enough.
In most cases, you should follow the same principles as you would for text button labels: use a verb phrase that includes the action and a noun. See Buttons.
For common or generic buttons, it can be appropriate to just use a noun that identifies what will open when the user selects the button. For example, Settings for the gear icon, or Options for the : button.
Related Components
Additional Reading
Designing the Perfect Button https://uxmag.com/articles/designing-the-perfect-button
Button Design — UI component series https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7