Phosphor

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.

React

• Powerful – Phosphor's intuitive but powerful API can style the color, size, and weight 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"));