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 available as an SVG string and by name through the <media-icon> element.

Import

import "@videojs/html/icons/element";

Or import SVG strings:

import { playIcon } from "@videojs/html/icons";

Icon sets

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

Set	`family`	SVG strings	Used by
Default	`default`	`@videojs/html/icons` or `@videojs/html/icons/default`	The default skins, such as `<video-skin>`
Neutral	`neutral`	`@videojs/html/icons/neutral`	The neutral skins, such as `<video-neutral-skin>`
Compat	`compat`	`@videojs/html/icons/compat`	The compat skins, such as `<video-compat-skin>`

Available icons

Default	Neutral	Compat	Name	Export
airplay-enter, default set	airplay-enter, neutral set	airplay-enter, compat set	`airplay-enter`	`airPlayEnterIcon`
airplay-exit, default set	airplay-exit, neutral set	airplay-exit, compat set	`airplay-exit`	`airPlayExitIcon`
captions-off, default set	captions-off, neutral set	captions-off, compat set	`captions-off`	`captionsOffIcon`
captions-on, default set	captions-on, neutral set	captions-on, compat set	`captions-on`	`captionsOnIcon`
cast-enter, default set	cast-enter, neutral set	cast-enter, compat set	`cast-enter`	`castEnterIcon`
cast-exit, default set	cast-exit, neutral set	cast-exit, compat set	`cast-exit`	`castExitIcon`
check, default set	check, neutral set	check, compat set	`check`	`checkIcon`
chevron, default set	chevron, neutral set	chevron, compat set	`chevron`	`chevronIcon`
fullscreen-enter, default set	fullscreen-enter, neutral set	fullscreen-enter, compat set	`fullscreen-enter`	`fullscreenEnterIcon`
fullscreen-exit, default set	fullscreen-exit, neutral set	fullscreen-exit, compat set	`fullscreen-exit`	`fullscreenExitIcon`
gear, default set	gear, neutral set	gear, compat set	`gear`	`gearIcon`
pause, default set	pause, neutral set	pause, compat set	`pause`	`pauseIcon`
pip-enter, default set	pip-enter, neutral set	pip-enter, compat set	`pip-enter`	`pipEnterIcon`
pip-exit, default set	pip-exit, neutral set	pip-exit, compat set	`pip-exit`	`pipExitIcon`
play, default set	play, neutral set	play, compat set	`play`	`playIcon`
quality, default set	quality, neutral set	quality, compat set	`quality`	`qualityIcon`
restart, default set	restart, neutral set	restart, compat set	`restart`	`restartIcon`
seek, default set	seek, neutral set	seek, compat set	`seek`	`seekIcon`
speech, default set	speech, neutral set	speech, compat set	`speech`	`speechIcon`
speed, default set	speed, neutral set	speed, compat set	`speed`	`speedIcon`
spinner, default set	spinner, neutral set	spinner, compat set	`spinner`	`spinnerIcon`
switches, default set	switches, neutral set	switches, compat set	`switches`	`switchesIcon`
volume-high, default set	volume-high, neutral set	volume-high, compat set	`volume-high`	`volumeHighIcon`
volume-low, default set	volume-low, neutral set	volume-low, compat set	`volume-low`	`volumeLowIcon`
volume-off, default set	volume-off, neutral set	volume-off, compat set	`volume-off`	`volumeOffIcon`

Element

<media-icon> renders a registered icon as its child <svg>, in the light DOM. It renders nothing when the name is not registered in the family.

Attribute	Default	Description
`name`	—	Icon name from the available icons, such as `play`
`family`	`default`	Icon set to read from, such as `neutral`

<media-play-button>
  <media-icon class="play-icon" name="play"></media-icon>
  <media-icon class="pause-icon" name="pause" family="neutral"></media-icon>
</media-play-button>

Each module below defines <media-icon> if it is not already defined:

Module	Registers
`@videojs/html/icons/element`	Every set, loading each one the first time a `<media-icon>` asks for its family
`@videojs/html/icons/element/default`	The default set, up front
`@videojs/html/icons/element/neutral`	The neutral set, up front
`@videojs/html/icons/element/compat`	The compat set, up front

SVG strings

Each icon export from @videojs/html/icons, @videojs/html/icons/default, @videojs/html/icons/neutral, and @videojs/html/icons/compat is the icon’s SVG markup as a string; @videojs/html/icons also exports registerIcons. Importing them does not define <media-icon>.

import { playIcon } from "@videojs/html/icons";

button.innerHTML = playIcon;

`registerIcons`

registerIcons(family, icons) registers SVG strings under icon names for <media-icon> and defines the element if needed. Only the icons you import ship, which is how skin source from the Shadcn registry registers its icons. Registering into an existing family adds to it, and <media-icon> elements already in the page update.

import { pauseIcon, playIcon, registerIcons } from "@videojs/html/icons";

registerIcons("default", { play: playIcon, pause: pauseIcon });
registerIcons("brand", { play: '<svg viewBox="0 0 18 18">…</svg>' });

<media-icon name="play"></media-icon>
<media-icon name="play" family="brand"></media-icon>

Once a family has registered icons, <media-icon> renders only those for it, even when @videojs/html/icons/element is also imported. registerIcons throws when a different element is already defined as media-icon and does not support registration.

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.

media-icon svg {
  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.