# Icon

Icons help communicate meaning, actions, status, or feedback.

**Theme: healthcare only**

Icons are a key part of the user interface. They are language-independent and can help users efficiently navigate and perform desired tasks. They can describe an action better than words alone; communicating concepts faster and in less space than text, reducing cognitive load.

They require a careful balance when applied. When used thoughtfully, icons help users understand your interface quickly and easily. When icons are overdone, they crowd the interface and add unnecessary complexity and confuse users instead of guiding them.

## Product Icons

Product icons not only serve a function in our products, but are also a visual expression of our brand. Each has visual distinction to ensure customers can easily tell them apart. Our product icons differ from system icons, which symbolize common actions. Our product icons include more flourish than other icon uses.

## Guidance

- <b>Use icons sparingly</b> - Only use if they add value/meaning for the user. Too many icons = users
  stop paying attention.
- <b>Use the approved icon for similar actions/purpose</b> - Consistency across the entire site is key
  for user recognition and trust.
- <b>Include a text label with most icons</b> - Users need text to overcome ambiguity.
- <b>
    Icons can be teal, navy, or black (following approved M.gov DS color swatches) unless stated in
    the use case notes below.
  </b>

### Guidelines

#### Content

- Describe what the user still needs to do in a mandatory field that has been left incomplete or unanswered, or answered incorrectly.
- Repeat what the form label is asking the user to do, but with slightly more detail.
- Use the fewest words possible (i.e., don't use "please").
- Use sentence case.
- End with a period.

## Accessibility

### General accessibility

- The `<SvgIcon>` component has built-in accessibility features including:
  - a built-in `title` attribute. For any specific exported icon, the `title` attribute is defaulted, but can be overwritten.
  - `focusable="false"` which prevents the icon from being focusable.
  - `role="img"` which tells assistive technologies that the icon's purpose is as an image
  - optional `description` attribute which can be used for a more detailed explanation of the icon's contents. Meant to be used to provide more detail than just the `title`.
  - an available`ariaHidden` attribute which can be used if the icon's context is described elsewhere. For example, if the icon is part of a button with text, the text may provide the text description instead of the icon component.
- Make sure that the icon has a minimum contrast ratio of 3:1 against its background.
- If icons accompany a text link, place the icon inside the link to prevent screen readers from announcing the link twice.

### Accessibility Testing

- Check that color is not the only method used to convey icon information. When an icon is paired with text, the meaning should be conveyed through the text, not color alone.
- Icons should meet color contrast requirements: when you view the icon on a page and use ANDI or a color contrast analyzer to look at the hex colors, contrast between the icon and background is at least 3:1.
- When you use a screen reader or view the page, the icon’s meaning and the way it is announced are the same across all pages.

#### Screen reader testing

Icons provide a text alternative for screen readers when needed.

- When you use a screen reader and navigate to a non-decorative icon, you should hear an appropriate description of the icon.
- If the icon is purely decorative, you should not hear a description.

#### Keyboard navigation tests

If `focusable="true"`:
- When you use a keyboard to tab into an interactive icon, you should see an indicator around the icon.