Skip to Main Content

Icon

Icons are visual symbols for communicating additional meaning, status, and available actions.

Developer Documentation

See the code and developer guidelines for this component.

Usage

Icons can be used to provide meaning and bring visual interest to elements of a page. They can also be used to indicate available actions and to clarify status or give feedback.

Guidelines

  • Icons should only be sized to 16px, 24px, or 32px.
  • Icons should not be used in place of artwork or illustrations.
  • If used as a clickable interaction with a text label, use first-person pronouns. For example: Use "Download My Approval Letter," instead of "Download Your Approval Letter."

Accessibility

Icons are a great way to provide additional meaning for clients with cognitive and visual disabilities. They should be accompanied by text whenever possible.