media-icons
Advanced tools
Media Icons is an open-source and beautifully hand-crafted collection of icons, designed by the 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.
The icons can be used in any of the following ways:
If you're using Vidstack Player, you can use the library as follows with HTML or React.
Install the package:
npm i media-icons@next
Register the <media-icon> element:
import "vidstack/icons";
Use the element (icons are lazy loaded):
<media-icon type="play"></media-icon>
👉 The complete list of icons can be found in our media icons catalog.
Install the package:
npm i media-icons@next
Import icons like so:
import {
PauseIcon,
PlayIcon,
// ...
} from "@vidstack/react/icons";
👉 The complete list of icons can be found in our media icons catalog.
You can use the <media-icon> element to lazy load icons via NPM or CDN.
Install the package:
npm i media-icons@next
Register the <media-icon> element:
import "media-icons/element";
Use the element (icons are lazy loaded):
<media-icon type="play"></media-icon>
👉 The complete list of icons can be found in our media icons catalog.
Add the following script to the <head> of your site:
<script src="cdn.vidstack.io/icons" type="module"></script>
Use the element (icons are lazy loaded):
<media-icon type="play"></media-icon>
👉 The complete list of icons can be found in our media icons catalog.
We recommend using unplugin-icons as it has many bundler (Vite/Rollup/Webpack), framework (React/Vue/Preact/Solid/Svelte) and customization options.
First, install the package:
npm i media-icons@next
Next, you'll need to configure the plugin like so:
import { FileSystemIconLoader } from "unplugin-icons/loaders";
Icons({
customCollections: {
media: FileSystemIconLoader("./node_modules/media-icons/raw"),
},
});
Finally, you can import the icons like so:
// 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.
Head over to the media icons catalog on the Vidstack website, search for an icon, copy the raw SVG, and finally paste it in your project.
The raw SVG files can be imported from this package like so:
// 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';
The raw SVG paths can be imported from this package like so:
// camelCase variant of the icon name
import { pausePaths, playPaths, ... } from 'media-icons';
// All SVG paths (server-side)
import { paths } from "media-icons";
paths.play; // string
paths.pause;
// ...
// Dynamically loaded SVG paths (client-side)
import { lazyPaths } from "media-icons";
lazyPaths.play(); // Promise<string>
lazyPaths.pause();
// ...
It's expected that the SVG paths are inserted into an <svg> element as innerHTML with the
following setup:
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
></svg>
Our media icons are available on Figma! You can get a copy from the Vidstack community page.
Media Icons is MIT licensed.
FAQs
Open-source and beautifully hand-crafted collection of media icons.
The npm package media-icons receives a total of 6,883 weekly downloads. As such, media-icons popularity was classified as popular.
We found that media-icons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.