ReferenceIcons

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

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`
Neutral	`@videojs/react/icons/neutral`	The neutral skins, such as `NeutralVideoSkin`
Compat	`@videojs/react/icons/compat`	The compat skins, such as `CompatVideoSkin`

Available icons

Default	Neutral	Compat	Export
airplay-enter, default set	airplay-enter, neutral set	airplay-enter, compat set	`AirPlayEnterIcon`
airplay-exit, default set	airplay-exit, neutral set	airplay-exit, compat set	`AirPlayExitIcon`
captions-off, default set	captions-off, neutral set	captions-off, compat set	`CaptionsOffIcon`
captions-on, default set	captions-on, neutral set	captions-on, compat set	`CaptionsOnIcon`
cast-enter, default set	cast-enter, neutral set	cast-enter, compat set	`CastEnterIcon`
cast-exit, default set	cast-exit, neutral set	cast-exit, compat set	`CastExitIcon`
check, default set	check, neutral set	check, compat set	`CheckIcon`
chevron, default set	chevron, neutral set	chevron, compat set	`ChevronIcon`
fullscreen-enter, default set	fullscreen-enter, neutral set	fullscreen-enter, compat set	`FullscreenEnterIcon`
fullscreen-exit, default set	fullscreen-exit, neutral set	fullscreen-exit, compat set	`FullscreenExitIcon`
gear, default set	gear, neutral set	gear, compat set	`GearIcon`
pause, default set	pause, neutral set	pause, compat set	`PauseIcon`
pip-enter, default set	pip-enter, neutral set	pip-enter, compat set	`PipEnterIcon`
pip-exit, default set	pip-exit, neutral set	pip-exit, compat set	`PipExitIcon`
play, default set	play, neutral set	play, compat set	`PlayIcon`
quality, default set	quality, neutral set	quality, compat set	`QualityIcon`
restart, default set	restart, neutral set	restart, compat set	`RestartIcon`
seek, default set	seek, neutral set	seek, compat set	`SeekIcon`
speech, default set	speech, neutral set	speech, compat set	`SpeechIcon`
speed, default set	speed, neutral set	speed, compat set	`SpeedIcon`
spinner, default set	spinner, neutral set	spinner, compat set	`SpinnerIcon`
switches, default set	switches, neutral set	switches, compat set	`SwitchesIcon`
volume-high, default set	volume-high, neutral set	volume-high, compat set	`VolumeHighIcon`
volume-low, default set	volume-low, neutral set	volume-low, compat set	`VolumeLowIcon`
volume-off, default set	volume-off, neutral set	volume-off, compat set	`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`

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.

.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, provide one automatically.