This repository hosts the raw SVGs and catalog data – including tags, categories, and release versions – of all icons in the Phosphor Icons family. It serves as the basis for our fuzzy-search on our website and other tools, and as a dev dependency in the build process in some of our framework-specific libraries. You may find this package is useful to you in implementing a port of Phosphor to your preferred framework, or as a source of truth for our current SVG assets.
yarn add @phosphor-icons/core
This package exposes all icons as SVG assets, grouped by weight, under the /assets
directory (i.e. /assets/<weight>/<kebab-name>-<weight>.svg
). These files can be used as needed for custom implementations or ports. Your framework and build tooling may require custom type declarations to recognize and transform "*.svg"
files into modules.
Note for Vite users: As of Vite 4.0.4 (current at the time of writing), a bug in one of its dependencies prevents wildcard exports from being resolved. This will be fixed in Vite 4.1.
import ghostDuotone from "@phosphor-icons/core/duotone/ghost-duotone.svg";
Using SVGR (includes create-react-app
projects):
import { ReactComponent as GhostDuotone } from "@phosphor-icons/core/duotone/ghost-duotone.svg";
This package exposes a named export icons
, which is an array of IconEntry
objects represententing each icon, its name in both kebab-case
and PascalCase
, the catergories and tags associated with it, as well as the version it was published in and the most recent version it was updated in:
interface IconEntry {
name: string; // "cloud-lightning"
pascal_name: string; // "CloudLightning"
categories: IconCategory[]; // ["weather"]
tags: string[]; // ["*updated*", "meteorology", "cloudy", "overcast", "stormy", "thunderstorm"]
published_in: number; // 1.0
updated_in: number; // 1.4
}
- @phosphor-icons/homepage ▲ Phosphor homepage and general info
- @phosphor-icons/vue ▲ Phosphor icon component library for Vue
- @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
- @phosphor-icons/elm ▲ Phosphor icons for Elm
- @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
- @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
- @phosphor-icons/figma ▲ Phosphor icons Figma plugin
- @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
- phosphor-react-native ▲ Phosphor icon component library for React Native
- phosphor-svelte ▲ Phosphor icons for Svelte apps
- phosphor-r ▲ Phosphor icon wrapper for R documents and applications
- blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
- wireui/phosphoricons ▲ Powered Phosphor icons for Laravel / Blade / Livewire
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons