Accessible Icon

Makes decorative icons accessible by providing a visually hidden label.

@sigil-ui/componentsReact

Wraps an icon element with a visually hidden label so screen readers announce meaningful text instead of skipping the icon.

Installation

npx @sigil-ui/cli add accessible-icon

import { AccessibleIcon } from "@sigil-ui/components";

<AccessibleIcon label="Search">
  <SearchIcon />
</AccessibleIcon>

import { Heart } from "lucide-react";

<AccessibleIcon label="Favorite">
  <Heart size={16} />
</AccessibleIcon>

<button>
  <AccessibleIcon label="Close dialog">
    <XIcon size={16} />
  </AccessibleIcon>
</button>

Prop	Type	Default	Description
`label`	`string`	—	Accessible label announced by screen readers
`children`	`ReactNode`	—	Icon element to wrap