React Components

# Icon

_**Icon** is a visual context used to represent a command, navigation, status or common action._

## Overview

---

**Icon** is a visual symbol which provides visual context thanks to its clarity and consistency.

It is displayed as solid, in a single color.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Icon</td></tr><tr><th scope="row">Also known as</th><td>Symbol</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=26-20213" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/icon" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-icon--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

**Icons** enhance the usability and bring clarity to users by reducing the cognitive load.

**Icons** can be used in standalone Button and can be usually associated with some sort of action.

**Icons** can be used as navigational elements as well.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Ensure sufficient contrast between the Icon color and its background for accessibility compliance |
| - Center-align Icon vertically when placed next to text to maintain visual balance |
| - Use the same color for the Icon and the adjacent text when they are paired for a unified appearance |
| - Use Icon to support meaning, such as reinforcing an action or clarifying status |
| - Ensure consistent sizing and spacing across the interface for visual harmony |

| ❌ Don't |
| --- |
| - Don't use the same Icon for different meanings. It can confuse users and reduce semantic clarity |
| - Don't use similar shades for both the Icon and background, this can reduce visibility |
| - Don't baseline-align Icon when next to text, it disrupts alignment and flow |
| - Don't use different colors for the Icon and the adjacent text when they represent the same concept |
| - Don't rely on Icon without supporting text for critical actions or information |

## Placement

---

**Icons** draw attention to important information or action, so it has to be thoughtfully inserted in a page.

They can also help with the understanding of specific elements by providing a visual example.

They also can be used in other components where it is adapted for a specific purpose.

## Behavior

---

**Icons** can stand alone or be included in a button or other components depending on the usage.

## Navigation

---

The **Icon** component is non-interactive and does not receive keyboard focus when used alone. It is purely decorative unless included in an interactive component (e.g., a button, a link, or a breadcrumb).

When used within an interactive component, refer to that component's documentation for keyboard navigation details.

## Accessibility

---

Proper attributes should be used to ensure that **Icons** are either perceivable by assistive technologies or correctly hidden when decorative.

### Hiding decorative Icon

By default, every **Icon** has a `role="presentation"` that hides it from screen readers.

### Providing meaningful information

If the **Icon** conveys essential information, it must be accompanied by an accessible label using [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) and [role="img"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role) .

```jsx
<Icon
  aria-label="home"
  name="home"
  role="img"
/>
```

Screen readers will announce the label, ensuring users understand the **Icon**'s meaning.

If the **Icon** is inside an interactive element, prefer using [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) on the element itself rather than on the **Icon**. See  examples.