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/elm ▲ Phosphor icons for Elm
- @phosphor-icons/figma ▲ Phosphor icons Figma plugin
- @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
- @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
- @phosphor-icons/penpot ▲ Phosphor icons Penpot plugin
- @phosphor-icons/react ▲ Phosphor icon component library for React
- @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
- @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
- @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
- @phosphor-icons/unplugin ▲ A multi-framework bundler plugin for generating Phosphor sprite sheets
- @phosphor-icons/vue ▲ Phosphor icon component library for Vue
- @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
- @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
- adamglin0/compose-phosphor-icons ▲ Phosphor icons for Compose Multiplatform
- brettkolodny/phosphor-lustre ▲ Phosphor icons for Lustre
- cjohansen/phosphor-clj ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
- codeat3/blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
- dreamRs/phosphor-r ▲ Phosphor icon wrapper for R documents and applications
- duongdev/phosphor-react-native ▲ Phosphor icon component library for React Native
- haruaki07/phosphor-svelte ▲ Phosphor icons for Svelte apps
- IgnaceMaes/ember-phosphor-icons ▲ Phosphor icons for Ember apps
- lucagoslar/phosphor-css ▲ CSS wrapper for Phosphor SVG icons
- maful/ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
- meadowsys/phosphor-svgs ▲ Phosphor icons as Rust string constants
- mwood/tamagui-phosphor-icons ▲ Phosphor icons for Tamagui
- oyedejioyewole/nuxt-phosphor-icons ▲ Phosphor icons integration for Nuxt
- pepaslabs/phosphor-uikit ▲ Xcode asset catalog generator for Swift/UIKit
- raycast/phosphor-icons ▲ Phosphor icons Raycast extension
- reatlat/eleventy-plugin-phosphoricons ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
- robruiz/wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
- sachaw/solid-phosphor ▲ Phosphor icons for SolidJS
- SeanMcP/phosphor-astro ▲ Phosphor icons as Astro components
- SorenHolstHansen/phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
- vnphanquang/phosphor-icons-tailwindcss ▲ TailwindCSS plugin for Phosphor icons
- wireui/phosphoricons ▲ Phosphor icons for Laravel
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
