# Icons

The SVG icon sets used by the packaged skins, as React components, SVG strings, and the media-icon element

The icons the packaged skins render. Skin source added with the [Shadcn registry](https://videojs.org/docs/guides/installation/shadcn?framework=react) imports its icons from these modules, and your own controls can use them too.

Each icon is a React component that renders an inline `<svg>`.

## Import

```tsx
import { PlayIcon } from "@videojs/react/icons";
```

## Icon sets

Three sets ship with the same icon names and different designs.

| Set | Module | Used by |
| --- | --- | --- |
| Default | `@videojs/react/icons` | The default skins, such as [`VideoSkin`](https://videojs.org/docs/framework/react/reference/components/video-skin) |
| Neutral | `@videojs/react/icons/neutral` | The neutral skins, such as [`NeutralVideoSkin`](https://videojs.org/docs/framework/react/reference/components/video-neutral-skin) |
| Compat | `@videojs/react/icons/compat` | The compat skins, such as [`CompatVideoSkin`](https://videojs.org/docs/framework/react/reference/components/video-compat-skin) |

## Available icons

| Export |
| --- |
| `AirPlayEnterIcon` |
| `AirPlayExitIcon` |
| `CaptionsOffIcon` |
| `CaptionsOnIcon` |
| `CastEnterIcon` |
| `CastExitIcon` |
| `CheckIcon` |
| `ChevronIcon` |
| `FullscreenEnterIcon` |
| `FullscreenExitIcon` |
| `GearIcon` |
| `PauseIcon` |
| `PipEnterIcon` |
| `PipExitIcon` |
| `PlayIcon` |
| `QualityIcon` |
| `RestartIcon` |
| `SeekIcon` |
| `SpeechIcon` |
| `SpeedIcon` |
| `SpinnerIcon` |
| `SwitchesIcon` |
| `VolumeHighIcon` |
| `VolumeLowIcon` |
| `VolumeOffIcon` |

## Props

Icons accept `IconProps`, the standard SVG element props (`SVGProps<SVGSVGElement>`), and forward their ref to the `<svg>`. Props you pass override the defaults:

| Attribute | Default |
| --- | --- |
| `width`, `height` | `18` |
| `viewBox` | `0 0 18 18` |
| `fill` | `currentColor` |
| `aria-hidden` | `true` |

```tsx
import { PlayButton } from "@videojs/react";
import { PauseIcon, PlayIcon } from "@videojs/react/icons";

<PlayButton
  render={(props, state) => (
    <button {...props}>
      {state.paused ? <PlayIcon className="icon" /> : <PauseIcon className="icon" />}
    </button>
  )}
/>
```

## Styling

Icons use `fill="currentColor"`, so they take the text color of their parent. They are drawn on an 18×18 grid and render most sharply at 18px or a whole multiple, such as 36px.

```css
.icon {
  width: 36px;
  height: 36px;
  color: white;
}
```

## Accessibility

Every icon renders with `aria-hidden="true"`. Give the surrounding control its accessible name. Built-in buttons, such as the [play button](https://videojs.org/docs/framework/react/reference/components/play-button), provide one automatically.

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt