Skip to content

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

Four 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
Scaffold @videojs/react/icons/scaffold The scaffold skins, such as ScaffoldVideoSkin

Available icons

DefaultNeutralCompatScaffoldExport
airplay-enter, default setairplay-enter, neutral setairplay-enter, compat setairplay-enter, scaffold setAirPlayEnterIcon
airplay-exit, default setairplay-exit, neutral setairplay-exit, compat setairplay-exit, scaffold setAirPlayExitIcon
captions-off, default setcaptions-off, neutral setcaptions-off, compat setcaptions-off, scaffold setCaptionsOffIcon
captions-on, default setcaptions-on, neutral setcaptions-on, compat setcaptions-on, scaffold setCaptionsOnIcon
cast-enter, default setcast-enter, neutral setcast-enter, compat setcast-enter, scaffold setCastEnterIcon
cast-exit, default setcast-exit, neutral setcast-exit, compat setcast-exit, scaffold setCastExitIcon
check, default setcheck, neutral setcheck, compat setcheck, scaffold setCheckIcon
chevron, default setchevron, neutral setchevron, compat setchevron, scaffold setChevronIcon
fullscreen-enter, default setfullscreen-enter, neutral setfullscreen-enter, compat setfullscreen-enter, scaffold setFullscreenEnterIcon
fullscreen-exit, default setfullscreen-exit, neutral setfullscreen-exit, compat setfullscreen-exit, scaffold setFullscreenExitIcon
gear, default setgear, neutral setgear, compat setgear, scaffold setGearIcon
pause, default setpause, neutral setpause, compat setpause, scaffold setPauseIcon
pip-enter, default setpip-enter, neutral setpip-enter, compat setpip-enter, scaffold setPipEnterIcon
pip-exit, default setpip-exit, neutral setpip-exit, compat setpip-exit, scaffold setPipExitIcon
play, default setplay, neutral setplay, compat setplay, scaffold setPlayIcon
quality, default setquality, neutral setquality, compat setquality, scaffold setQualityIcon
restart, default setrestart, neutral setrestart, compat setrestart, scaffold setRestartIcon
seek, default setseek, neutral setseek, compat setseek, scaffold setSeekIcon
speech, default setspeech, neutral setspeech, compat setspeech, scaffold setSpeechIcon
speed, default setspeed, neutral setspeed, compat setspeed, scaffold setSpeedIcon
spinner, default setspinner, neutral setspinner, compat setspinner, scaffold setSpinnerIcon
switches, default setswitches, neutral setswitches, compat setswitches, scaffold setSwitchesIcon
volume-high, default setvolume-high, neutral setvolume-high, compat setvolume-high, scaffold setVolumeHighIcon
volume-low, default setvolume-low, neutral setvolume-low, compat setvolume-low, scaffold setVolumeLowIcon
volume-off, default setvolume-off, neutral setvolume-off, compat setvolume-off, scaffold setVolumeOffIcon

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.