> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Accessible Icon

Makes icons accessible by adding a label.

## Features

- Quickly make any icon accessible by wrapping it and providing a meaningful label.

- No visual difference, but announced correctly by screen readers.

## Anatomy

Import the component.

```jsx
import { AccessibleIcon } from "@radix-solid/primitives";

import { Cross2Icon } from "@radix-solid/icons";

export default () => <AccessibleIcon.Root label="Close">{target => target(Cross2Icon, {})}</AccessibleIcon.Root>;
```

## API Reference

### Root

Contains the icon to make accessible.

| Prop                                                                                                                                                     | Type     | Default |
| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `label*`The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to `alt` text for `img`tags. | `string` | —       |

## Accessibility

Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon may in fact mean **"close"** or **"delete"**. This component lets you give meaning to icons used throughout your app.

This is built with [Visually Hidden](../utilities/visually-hidden).