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.

Installation

Install the component from your command line.

npm install @radix-ui/react-accessible-icon

npm install @radix-ui/react-accessible-icon

Anatomy

Import the component.

import * as AccessibleIcon from '@radix-ui/react-accessible-icon';

export default () => <AccessibleIcon.Root />;

import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
export default () => <AccessibleIcon.Root />;

Basic example

Use the accessible icon primitive.

import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
import { CrossCircledIcon } from '@modulz/radix-icons';

export default () => (
  <AccessibleIcon.Root label="Close">
    <CrossCircledIcon />
  </AccessibleIcon.Root>
);

import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
import { CrossCircledIcon } from '@modulz/radix-icons';
export default () => (
  <AccessibleIcon.Root label="Close">
    <CrossCircledIcon />
  </AccessibleIcon.Root>
);

API Reference

Root

Contains the icon to make accessible.

Prop	Type	Default	Required
`label`	`string`

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.

Installation

Anatomy

Basic example

API Reference

Root

Accessibility