Phosphor Icons
Phosphor is a flexible icon family for interfaces, diagrams, presentations β whatever, really.
- 1,248 icons and counting
- 6 weights: Thin, Light, Regular, Bold, Fill, and Duotone
- Designed at 16 x 16px to read well small and scale up big
- Raw stroke information retained to fine-tune the style
More ways to use at phosphoricons.com.
For developers
Phosphor is available for web, React, Vue, Flutter, Elm, and other frameworks and platforms.
Vanilla Web
- Simple to use β We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document
<head>
, and drop in icons with an<i/>
tag and the appropriate class:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>
<body>
<i class="ph-smiley"></i>
<i class="ph-fill ph-heart" style="color: hotpink"></i>
<i class="ph-thin ph-cube"></i>
</body>
</html>
Check out the full documentation on the @phosphor-icons/web repo page.
React
- Powerful β Phosphor's intuitive but powerful API can style the
color
,size
, andweight
of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the @phosphor-icons/react repo page.
import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "@phosphor-icons/react";
const App = () => {
return (
<div>
<Smiley />
<Heart size={32} color="hotpink" weight="fill" />
<Horse weight="duotone" />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- Lightweight β Supports tree-shaking, so your bundle only includes code for the icons you use.
- Flexible β Icon Components are a transparent wrapper around SVG elements, so feel free to add your own inline
style
objects,onClick
handler functions, and a multitude of other props you're used to using on SVGs.
Vue
- Parity β As with React, you can manipulate the
color
,size
, andweight
of an icon with a few keystrokes, or provide default styles to all icons via theprovide/inject
API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the @phosphor-icons/vue repo page.
<template>
<div>
<ph-horse />
<ph-heart :size="32" color="hotpink" weight="fill" />
<ph-cube />
</div>
</template>
<script>
import { PhHorse, PhHeart, PhCube } from "phosphor-vue";
export default {
name: "App",
components: {
PhHorse,
PhHeart,
PhCube,
},
};
</script>
Note: Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with
Ph
, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
Our Related Projects
- @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/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
Community Projects
- 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
If you've made a port of Phosphor and you want to see it here, just open a PR here!
License
MIT Β© Phosphor Icons