Icon buttons are useful where interface space may be limited. If an icon represents the action well, users can sometimes recognize them quicker than reading text. Using icon buttons can also help when space constraints prevent the use of long labels.
Icon buttons come in two different types of buttons to use: solid and outlined. This contrasts with buttons which support three different visual variants (solid, outlined, and "flat"). Icon buttons do not have a flat style because flat icon buttons would have no visual affordance to differentiate them from a regular icon.
Solid icon buttons look heavy on purpose. They direct the user’s attention to the primary action the application is suggesting that the user take.
Outlined icon buttons provide a lightweight visual style. They are used to indicate a secondary action that compliments a primary action or to reduce visual noise when there are many actions of equal importance on the page.
Clarity recommends using an icon that best describes the action that the user will be doing.
Do
Use icons that clearly represent the call-to-action.
Don't
Use unfamiliar icons. Users may avoid clicking on unknown or abstract icon buttons.
Consistent button styles make it easier for a user to recognize areas to take action across an application.
Clarity icon buttons have a border radius of 3px.
Clarity offers two icon button sizes: a default width and height of 1.8rem (36px) and a compact width and height of 1.2rem (24px).
Do
Using default-sized icon buttons is often best. The larger size makes them easier to recognize and to.
Don't
Using compact icon buttons should be avoided in most cases. They are difficult to see and distinguish what the icon represents. They also create smaller click targets which may cause accessibility issues.
A primary color provides consistency across an application. It trains the user to look for that color when trying to find an action. Clarity defaults to blue. This “action blue” can be found across all types of buttons, tabs, and other action-related components.
Icon buttons have a built-in loading and disabled state.
Use the button's loading state when you need to communicate that the application is working on a call-to-action a user has iniated by clicking on the button. Use the success state when a call-to-action has completed successfully.A button may remain in the success state if a call-to-action is only intended to be performed once.
Unlike regular buttons, icon buttons only support two loading states: loading and success.
Icon buttons may be disabled to indicate to a user that the call-to-action is unavailable. It should be clear to the user why a button is disabled, however, and users should be directed how enable the call-to-action if that is possible.
Clarity recommends adding the title="" and aria-label="" attributes to icon buttons. This adds additional context for users who are unfamiliar with what call-to-action the icon inside the button represents. Hovering over the icon button for a moment will show a tooltip that has the title text. The text should reflect the call-to-action.
Note also that Clarity recommends all icons have an aria-label="" attribute as well.