Icon Buttons

Guidelines

1. When to Use

   • As “Quick Links” at the top of the page that represent common actions a user might take (e.g., contact, pay, apply, register).
   • When you want to call out multiple things on a page in a visual way.
   • When you want to provide more information, this component allows you to provide a short description under the icon.

2. What to Avoid

   • Using icons that are ambiguous, uncommon, or not widely recognized.
   • Using icon-only buttons.
   • Relying on the icon alone to convey meaning.
   • Using the same icon for different tasks (e.g. a clipboard icon for apply now, and the same clipboard icon for get more information).

3. Accessibility Tips

   • Always provide a descriptive label.
   • Ensure consistent iconography and placement so users can predict button behavior.