https://github.com/vidstack/icons
Beautifully hand-crafted collection of media icons.
https://github.com/vidstack/icons
audio icons javascript media player svg typescript video
Last synced: 9 months ago
JSON representation
Beautifully hand-crafted collection of media icons.
- Host: GitHub
- URL: https://github.com/vidstack/icons
- Owner: vidstack
- License: mit
- Created: 2023-03-16T12:28:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T10:59:30.000Z (almost 2 years ago)
- Last Synced: 2025-05-07T11:58:24.976Z (9 months ago)
- Topics: audio, icons, javascript, media, player, svg, typescript, video
- Language: JavaScript
- Size: 165 KB
- Stars: 20
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Media Icons
[![package-badge]][package]
[![discord-badge]][discord]
Media Icons is an open-source and beautifully hand-crafted collection of icons, designed by the
[Vidstack][vidstack] team specifically for building audio and video players. Our icons are bold,
clean, and consistent. All of the icons are free for both personal and commercial use.
## Usage
The icons can be used in any of the following ways:
- [Vidstack Player](#vidstack-player)
- [Web Component](#web-component)
- [JS Frameworks](#js-frameworks)
- [Copy SVG](#copy-svg)
- [Raw SVG](#raw-svg)
- [Raw SVG Paths](#raw-svg-paths)
- [Figma](#figma)
## Vidstack Player
If you're using [Vidstack Player][github-player], you can use the library as follows with HTML or
React.
### HTML
Install the package:
```bash
npm i media-icons@next
```
Register the `` element:
```ts
import "vidstack/icons";
```
Use the element (icons are lazy loaded):
```html
```
👉 The complete list of icons can be found in our [media icons catalog][catalog].
### React
Install the package:
```bash
npm i media-icons@next
```
Import icons like so:
```ts
import {
PauseIcon,
PlayIcon,
// ...
} from "@vidstack/react/icons";
```
👉 The complete list of icons can be found in our [media icons catalog][catalog].
## Web Component
You can use the `` element to lazy load icons via [NPM](#npm) or [CDN](#cdn).
### NPM
Install the package:
```ts
npm i media-icons@next
```
Register the `` element:
```ts
import "media-icons/element";
```
Use the element (icons are lazy loaded):
```html
```
👉 The complete list of icons can be found in our [media icons catalog][catalog].
### CDN
Add the following script to the `` of your site:
```html
```
Use the element (icons are lazy loaded):
```html
```
👉 The complete list of icons can be found in our [media icons catalog][catalog].
## JS Frameworks
We recommend using [unplugin-icons](https://github.com/antfu/unplugin-icons) as it has many
bundler (Vite/Rollup/Webpack), framework (React/Vue/Preact/Solid/Svelte) and customization
options.
First, install the package:
```bash
npm i media-icons@next
```
Next, you'll need to configure the plugin like so:
```js
import { FileSystemIconLoader } from "unplugin-icons/loaders";
Icons({
customCollections: {
media: FileSystemIconLoader("./node_modules/media-icons/raw"),
},
});
```
Finally, you can import the icons like so:
```js
// Replace {name} with the icon name.
import ... from '~icons/media/{name}';
// Examples
import PauseIcon from '~icons/media/pause';
import PlayIcon from '~icons/media/play';
```
👉 The complete list of icons can be found in our [media icons catalog][catalog].
## Copy SVG
Head over to the [media icons catalog][catalog] on the Vidstack website, search for an icon, copy
the raw SVG, and finally paste it in your project.
## Raw SVG
The raw SVG files can be imported from this package like so:
```js
// Replace {name} with the icon name.
import ... from 'media-icons/raw/{name}.svg';
// Examples
import PauseIcon from 'media-icons/raw/pause.svg';
import PlayIcon from 'media-icons/raw/play.svg';
```
## Raw SVG Paths
The raw SVG paths can be imported from this package like so:
```js
// camelCase variant of the icon name
import { pausePaths, playPaths, ... } from 'media-icons';
```
```js
// All SVG paths (server-side)
import { paths } from "media-icons";
paths.play; // string
paths.pause;
// ...
```
```js
// Dynamically loaded SVG paths (client-side)
import { lazyPaths } from "media-icons";
lazyPaths.play(); // Promise
lazyPaths.pause();
// ...
```
It's expected that the SVG paths are inserted into an `` element as `innerHTML` with the
following setup:
```html
```
## Figma
Our media icons are available on Figma! You can get a copy from the [Vidstack community page][figma].
## 📝 License
Media Icons is [MIT licensed](./LICENSE).
[vidstack]: https://vidstack.io
[github-player]: https://github.com/vidstack/player
[catalog]: https://vidstack.io/media-icons
[package]: https://www.npmjs.com/package/media-icons
[package-badge]: https://img.shields.io/npm/v/media-icons/next
[discord]: https://discord.com/invite/7RGU7wvsu9
[figma]: https://www.figma.com/@vidstack
[discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2&label=%20&logo=discord&logoColor=white