Home

Awesome

<img src="/meta/phosphor-mark-tight-black.png" width="96" align="right" />

Phosphor Icons

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

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

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
  </head>
  <body>
    <i class="ph 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

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"));

Vue

<template>
  <div>
    <PhHorse />
    <PhHeart :size="32" color="hotpink" weight="fill" />
    <PhCube />
  </div>
</template>

<script>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/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

Community Projects

If you've made a port of Phosphor and you want to see it here, just open a PR here!

License

MIT © Phosphor Icons