Sanity Icon

Renders an icon from the Sanity icon set as a reference to an SVG symbol. Hidden from assistive tech by default, since an icon almost always decorates text that already names it. Pass `aria-hidden={false}` with a `role` and a label for the rare icon that carries meaning on its own.

import { SanityIcon } from "@sanity/sanity-id/components/sanity-icon"

Props

Also accepts every prop of ComponentProps<"svg">.

SanityIcon props
Prop	Type	Description
`icon` (required)	`IconSymbol`	Icon to render

Required.

Usage

1import { SanityIcon } from "@sanity/sanity-id/components/sanity-icon"
2
3export default () => {
4        return (
5          <div className="flex gap-24 items-center">
6            <SanityIcon icon="component" className="size-icon-lg" />
7            <SanityIcon icon="component" className="size-icon-md" />
8            <SanityIcon icon="component" className="size-icon-sm" />
9          </div>
10        )
11      }

Spinner icons apply a spinning animation

1import { SanityIcon } from "@sanity/sanity-id/components/sanity-icon"
2
3export default () => {
4        return (
5          <div className="flex gap-24 items-center">
6            <SanityIcon icon="spinner" className="size-icon-lg" />
7            <SanityIcon icon="spinner" className="size-icon-md" />
8            <SanityIcon icon="spinner" className="size-icon-sm" />
9          </div>
10        )
11      }