Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
To add Phosphor web components to your app via CDN, you can include the following in the <head> of the document:
<script
type="module"
src="https://unpkg.com/@phosphor-icons/webcomponents@2.1"
></script>To use within ES modules, install the package and import once near the root of your app:
pnpm add @phosphor-icons/webcomponents
#^ Or whatever package manager you useThen import either just the icons you need, or the entire library (this can be quite large):
import "@phosphor-icons/webcomponents/PhHorse";
import "@phosphor-icons/webcomponents/PhHeart";
import "@phosphor-icons/webcomponents/PhCube";
// OR IF YOU NEED ALL ICONS:
import "@phosphor-icons/webcomponents";Add the custom elements to the document, using the ph- prefixed name of the icon as the custom element name:
<body>
<ph-horse></ph-horse>
<ph-heart color="crimson" weight="fill"></ph-heart>
<ph-cube></ph-cube>
</body>Icon components can be styled with the following attributes:
- color?:
string– Icon stroke/fill color. Can be any CSS color string, includinghex,rgb,rgba,hsl,hsla, named colors, or the specialcurrentColorvariable. - size?:
number | string– Icon height & width. This can be a number (defaults to pixels), or a string with units inpx,%,em,rem,pt,cm,mm,in. - weight?:
"thin" | "light" | "regular" | "bold" | "fill" | "duotone"– Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars withweight="regular"to denote an empty star, andweight="fill"to denote a filled star. - mirrored?:
boolean– Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
- @phosphor-icons/homepage ▲ Phosphor homepage and general info
- @phosphor-icons/core ▲ Phosphor icon assets and catalog
- @phosphor-icons/react ▲ Phosphor icon component library for React
- @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
- @phosphor-icons/vue ▲ Phosphor icon component library for Vue
- @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
- @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-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
- @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
- 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 ▲ Phosphor icons for Laravel
- phosphor-css ▲ CSS wrapper for Phosphor SVG icons
- ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
- eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
- phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
- wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
- ember-phosphor-icons ▲ Phosphor icons for Ember apps
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
