---
title: "Sanity Icon"
description: "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."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/sanity-icon"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/sanity-icon.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# 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.

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

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `icon` | `IconSymbol` | yes | — | Icon to render |

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

## Usage

### Example 1

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

export default () => {
	return (
		<div className="flex gap-24 items-center">
			<SanityIcon icon="component" className="size-icon-lg" />
			<SanityIcon icon="component" className="size-icon-md" />
			<SanityIcon icon="component" className="size-icon-sm" />
		</div>
	)
}
```

### Spinner icons apply a spinning animation

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

export default () => {
	return (
		<div className="flex gap-24 items-center">
			<SanityIcon icon="spinner" className="size-icon-lg" />
			<SanityIcon icon="spinner" className="size-icon-md" />
			<SanityIcon icon="spinner" className="size-icon-sm" />
		</div>
	)
}
```