Phosphor icons

Matcha UI chart components use Phosphor for header icons. For the rest of your app, install phosphor-react and import icons as React components. This documentation site uses Phosphor for UI affordances.

Install

npm install phosphor-react

Usage with Matcha UI

import { House, MagnifyingGlass } from "phosphor-react";
import { Button } from "matcha-ui";

export function Example() {
  return (
    <Button variant="outline" className="gap-2">
      <House size={18} weight="bold" />
      Dashboard
    </Button>
  );
}

Back to docs

Common icons

Use the size and weight props (for example "bold" or "duotone") to match your product chrome.

House

Bell

User

Settings

Analytics