@squidlab/phosphor-solid

Phosphor Icons for SolidJS.

1,500+ icons across six weights — thin, light, regular, bold, fill, and duotone — each as a standalone SolidJS component. Icons are sourced from @phosphor-icons/core.

Features

• Native TypeScript — ships raw .tsx sources, fully typed out of the box
• SSR-compatible — components work in both server and client contexts
• Tree-shakeable — unused icons are eliminated at build time by any modern bundler (Vite, Rollup, esbuild, …)
• Zero runtime dependencies — only solid-js as a peer dependency

Installation

npm install @squidlab/phosphor-solid
# or
pnpm add @squidlab/phosphor-solid
# or
yarn add @squidlab/phosphor-solid
# or
bun add @squidlab/phosphor-solid

Quick start

import { HouseIcon } from "@squidlab/phosphor-solid/house";

function App() {
  return <HouseIcon weight="bold" class="w-6 h-6 text-white" />;
}

Every component accepts the props listed below plus any standard SVG attribute. fill="currentColor" is set by default, so the icon inherits the parent's text color.

Props

| Prop | Type | Default | Description | | ---------- | ------------------ | ---------------- | ---------------------------------------------------- | | weight | IconWeight | "regular" | Icon stroke weight | | size | string \| number | — | Sets both width and height | | color | string | "currentColor" | Fill color | | mirrored | boolean | false | Flip the icon horizontally | | alt | string | — | Accessible text rendered as <title> inside the SVG | | … | SVGAttributes | — | Any standard SVG attr |

type IconWeight = "thin" | "light" | "regular" | "bold" | "fill" | "duotone";

Context

Use IconProvider to set default props for all descendant icons, avoiding repetition:

import { IconProvider } from "@squidlab/phosphor-solid";
import { HouseIcon } from "@squidlab/phosphor-solid/house";
import { GearIcon } from "@squidlab/phosphor-solid/gear";

function App() {
  return (
    <IconProvider color="white" size={32} weight="bold">
      <HouseIcon />
      <GearIcon />
    </IconProvider>
  );
}

Props passed directly to an icon take precedence over context values.

| Prop | Type | Default | | ---------- | ------------------ | ---------------- | | color | string | "currentColor" | | size | string \| number | — | | weight | IconWeight | "regular" | | mirrored | boolean | false |

Import styles

Individual imports (recommended)

Each icon is exposed as its own entry point for the best possible tree-shaking:

import { IconProvider } from "@squidlab/phosphor-solid";
import { ArrowRightIcon } from "@squidlab/phosphor-solid/arrow-right";
import { GithubLogoIcon } from "@squidlab/phosphor-solid/github-logo";

Barrel import

Import all icons at once via the /icons subpath. This will include every icon in your bundle, so use it only when you genuinely need the full set:

import {
  ArrowRightIcon,
  GithubLogoIcon,
  HouseIcon,
} from "@squidlab/phosphor-solid/icons";

Namespace import

Import the entire icon set under a single namespace:

import * as Icons from "@squidlab/phosphor-solid/icons";

<Icons.ArrowRightIcon />;

Bundler notes

The package exports TypeScript sources directly. Your bundler must be configured to compile .tsx files from node_modules. SolidJS starters (e.g. degit solidjs/templates/ts) already do this via vite-plugin-solid.

Version mapping

| @squidlab/phosphor-solid | @phosphor-icons/core | | -------------------------- | ---------------------- | | 1.0.0 | 2.1.1 |

License

MIT — icons from Phosphor Icons.