{"id":27942856,"url":"https://github.com/vidstack/icons","last_synced_at":"2025-05-07T11:58:31.802Z","repository":{"id":172362156,"uuid":"614838012","full_name":"vidstack/icons","owner":"vidstack","description":"Beautifully hand-crafted collection of media icons.","archived":false,"fork":false,"pushed_at":"2024-04-14T10:59:30.000Z","size":169,"stargazers_count":20,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T11:58:24.976Z","etag":null,"topics":["audio","icons","javascript","media","player","svg","typescript","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vidstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-03-16T12:28:38.000Z","updated_at":"2025-01-06T15:41:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"8b111948-debe-4b30-aa4b-504f10faad06","html_url":"https://github.com/vidstack/icons","commit_stats":null,"previous_names":["vidstack/media-icons","vidstack/icons"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vidstack","download_url":"https://codeload.github.com/vidstack/icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873977,"owners_count":21817711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","icons","javascript","media","player","svg","typescript","video"],"created_at":"2025-05-07T11:58:31.096Z","updated_at":"2025-05-07T11:58:31.778Z","avatar_url":"https://github.com/vidstack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Media Icons\n\n[![package-badge]][package]\n[![discord-badge]][discord]\n\nMedia Icons is an open-source and beautifully hand-crafted collection of icons, designed by the\n[Vidstack][vidstack] team specifically for building audio and video players. Our icons are bold,\nclean, and consistent. All of the icons are free for both personal and commercial use.\n\n\u003cimg src=\"./assets/media-icons.png\" alt=\"Media Icons Overview\" /\u003e\n\n## Usage\n\nThe icons can be used in any of the following ways:\n\n- [Vidstack Player](#vidstack-player)\n- [Web Component](#web-component)\n- [JS Frameworks](#js-frameworks)\n- [Copy SVG](#copy-svg)\n- [Raw SVG](#raw-svg)\n- [Raw SVG Paths](#raw-svg-paths)\n- [Figma](#figma)\n\n## Vidstack Player\n\nIf you're using [Vidstack Player][github-player], you can use the library as follows with HTML or\nReact.\n\n### HTML\n\nInstall the package:\n\n```bash\nnpm i media-icons@next\n```\n\nRegister the `\u003cmedia-icon\u003e` element:\n\n```ts\nimport \"vidstack/icons\";\n```\n\nUse the element (icons are lazy loaded):\n\n```html\n\u003cmedia-icon type=\"play\"\u003e\u003c/media-icon\u003e\n```\n\n👉 The complete list of icons can be found in our [media icons catalog][catalog].\n\n### React\n\nInstall the package:\n\n```bash\nnpm i media-icons@next\n```\n\nImport icons like so:\n\n```ts\nimport {\n  PauseIcon,\n  PlayIcon,\n  // ...\n} from \"@vidstack/react/icons\";\n```\n\n👉 The complete list of icons can be found in our [media icons catalog][catalog].\n\n## Web Component\n\nYou can use the `\u003cmedia-icon\u003e` element to lazy load icons via [NPM](#npm) or [CDN](#cdn).\n\n### NPM\n\nInstall the package:\n\n```ts\nnpm i media-icons@next\n```\n\nRegister the `\u003cmedia-icon\u003e` element:\n\n```ts\nimport \"media-icons/element\";\n```\n\nUse the element (icons are lazy loaded):\n\n```html\n\u003cmedia-icon type=\"play\"\u003e\u003c/media-icon\u003e\n```\n\n👉 The complete list of icons can be found in our [media icons catalog][catalog].\n\n### CDN\n\nAdd the following script to the `\u003chead\u003e` of your site:\n\n```html\n\u003cscript src=\"https://cdn.vidstack.io/icons\" type=\"module\"\u003e\u003c/script\u003e\n```\n\nUse the element (icons are lazy loaded):\n\n```html\n\u003cmedia-icon type=\"play\"\u003e\u003c/media-icon\u003e\n```\n\n👉 The complete list of icons can be found in our [media icons catalog][catalog].\n\n## JS Frameworks\n\nWe recommend using [unplugin-icons](https://github.com/antfu/unplugin-icons) as it has many\nbundler (Vite/Rollup/Webpack), framework (React/Vue/Preact/Solid/Svelte) and customization\noptions.\n\nFirst, install the package:\n\n```bash\nnpm i media-icons@next\n```\n\nNext, you'll need to configure the plugin like so:\n\n```js\nimport { FileSystemIconLoader } from \"unplugin-icons/loaders\";\n\nIcons({\n  customCollections: {\n    media: FileSystemIconLoader(\"./node_modules/media-icons/raw\"),\n  },\n});\n```\n\nFinally, you can import the icons like so:\n\n```js\n// Replace {name} with the icon name.\nimport ... from '~icons/media/{name}';\n// Examples\nimport PauseIcon from '~icons/media/pause';\nimport PlayIcon from '~icons/media/play';\n```\n\n👉 The complete list of icons can be found in our [media icons catalog][catalog].\n\n## Copy SVG\n\nHead over to the [media icons catalog][catalog] on the Vidstack website, search for an icon, copy\nthe raw SVG, and finally paste it in your project.\n\n## Raw SVG\n\nThe raw SVG files can be imported from this package like so:\n\n```js\n// Replace {name} with the icon name.\nimport ... from 'media-icons/raw/{name}.svg';\n// Examples\nimport PauseIcon from 'media-icons/raw/pause.svg';\nimport PlayIcon from 'media-icons/raw/play.svg';\n```\n\n## Raw SVG Paths\n\nThe raw SVG paths can be imported from this package like so:\n\n```js\n// camelCase variant of the icon name\nimport { pausePaths, playPaths, ... } from 'media-icons';\n```\n\n```js\n// All SVG paths (server-side)\nimport { paths } from \"media-icons\";\n\npaths.play; // string\npaths.pause;\n// ...\n```\n\n```js\n// Dynamically loaded SVG paths (client-side)\nimport { lazyPaths } from \"media-icons\";\n\nlazyPaths.play(); // Promise\u003cstring\u003e\nlazyPaths.pause();\n// ...\n```\n\nIt's expected that the SVG paths are inserted into an `\u003csvg\u003e` element as `innerHTML` with the\nfollowing setup:\n\n```html\n\u003csvg\n  width=\"32\"\n  height=\"32\"\n  viewBox=\"0 0 32 32\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  aria-hidden=\"true\"\n\u003e\u003c/svg\u003e\n```\n\n## Figma\n\nOur media icons are available on Figma! You can get a copy from the [Vidstack community page][figma].\n\n## 📝 License\n\nMedia Icons is [MIT licensed](./LICENSE).\n\n[vidstack]: https://vidstack.io\n[github-player]: https://github.com/vidstack/player\n[catalog]: https://vidstack.io/media-icons\n[package]: https://www.npmjs.com/package/media-icons\n[package-badge]: https://img.shields.io/npm/v/media-icons/next\n[discord]: https://discord.com/invite/7RGU7wvsu9\n[figma]: https://www.figma.com/@vidstack\n[discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2\u0026label=%20\u0026logo=discord\u0026logoColor=white\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidstack%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvidstack%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidstack%2Ficons/lists"}