v10/packages/icons

@videojs/icons

SVG icon library for Video.js. Ships optimized icons as React components and HTML strings, organized into icon sets.

Icon Sets

Icons are grouped into visual sets. Each set contains the same icon names with different designs.

Set	Description
default	Standard icon set used by the default skin
minimal	Simplified icon set used by the minimal skin

Available Icons

Icon	React Export	HTML Export
fullscreen-enter	FullscreenEnterIcon	fullscreenEnterIcon
fullscreen-exit	FullscreenExitIcon	fullscreenExitIcon
pause	PauseIcon	pauseIcon
pip-enter	PipEnterIcon	pipEnterIcon
pip-exit	PipExitIcon	pipExitIcon
play	PlayIcon	playIcon
restart	RestartIcon	restartIcon
seek	SeekIcon	seekIcon
spinner	SpinnerIcon	spinnerIcon
volume-high	VolumeHighIcon	volumeHighIcon
volume-low	VolumeLowIcon	volumeLowIcon
volume-off	VolumeOffIcon	volumeOffIcon

Usage

React

Import icons as React components. They accept standard SVG props and support ref forwarding.

import { PlayIcon, PauseIcon } from '@videojs/react/icons';

function Controls() {
  return (
    <button>
      <PlayIcon className="icon" aria-hidden="true" />
    </button>
  );
}

Import from a specific icon set:

import { PlayIcon } from '@videojs/react/icons/minimal';

HTML

Import icons as SVG strings for use in plain HTML or web components.

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

button.innerHTML = playIcon;

Import from a specific icon set:

import { playIcon } from '@videojs/html/icons/minimal';

Register the <media-icon> custom element separately when you want HTML skins to render icons lazily:

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

Import a specific element icon set when eager family registration is preferred:

import '@videojs/html/icons/element/minimal';

Styling

All icons use fill="currentColor", so they inherit the text color of their parent element. Size and color can be controlled with CSS:

.icon {
  width: 18px;
  height: 18px;
  color: white;
}

Icons are designed on an 18×18 grid. Rendering at 18px (or exact multiples like 36px) produces the crispest result. Other sizes may introduce sub-pixel rendering artifacts.

Adding Icons

1. Add an SVG file to src/assets/<set>/ (e.g., src/assets/default/my-icon.svg).
2. Run pnpm -F @videojs/icons build.
3. The build script optimizes the SVG with SVGO and generates React components and HTML string exports.

The build automatically:

• Removes hardcoded fill, stroke, clip-rule, and fill-rule attributes.
• Adds fill="currentColor" for dynamic styling.
• Preserves the viewBox attribute.
• Generates .js, .d.ts, and .tsx files for each icon.

Adding an Icon Set

Create a new directory under src/assets/ (e.g., src/assets/custom/), add SVG files, and rebuild. The set is automatically available via:

import { PlayIcon } from '@videojs/react/icons/custom';
import { playIcon } from '@videojs/html/icons/custom';

Development

Running pnpm -F @videojs/icons dev starts the build in watch mode. Any changes to .svg files under src/assets/ trigger an automatic rebuild, including new icons and new icon sets — no restart required.

Scripts

pnpm -F @videojs/icons build        # Build all icon sets
pnpm -F @videojs/icons dev          # Build and watch for changes
pnpm -F @videojs/icons clean        # Remove build output