Source: https://www.radix-ui.com/primitives/docs/utilities/accessible-icon

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Utilities

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

Anatomy

---

Import the component.

import { AccessibleIcon } from "radix-ui";

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

API Reference

---

Root

Contains the icon to make accessible.

| Prop | Type | Default | | --- | --- | --- | | label*<br><br>Prop description | string | No default value |

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 .

PreviousTooltip

NextDirection Provider

Edit this page on GitHub.