P
Phosphor Icons
LibraryOne icon family for interfaces, in six weights, drawn on a grid so small sizes stay clear. Changing the look is a single weight prop.
MIT · phosphoricons.com · github.com/phosphor-icons/homepage · @phosphor-icons/react 2.1.10 · Web / React / Vue / Flutter / Elm
thin
light
regular
bold
fill
duotone
Install and use
Terminal
npm i @phosphor-icons/react
App.tsx
import { HeartIcon, CubeIcon } from "@phosphor-icons/react";
<HeartIcon weight="fill" size={20} />
<CubeIcon weight="duotone" />Why this, and when not
Why Six weights in one family, so a tone change does not mean a new library. Tree-shaking keeps only the icons you import.
Skip it Use LobeHub Icons for AI brand marks such as OpenAI or Anthropic. If the project already uses Lucide from shadcn/ui and does not need weights, leave it.
Watch out Importing the barrel in development can make some bundlers compile every icon module and slow startup. Import icons by path, as the README describes.
One line for the agent
AGENTS.md Prompt
- 图标统一使用 @phosphor-icons/react，默认 weight="regular"，选中态用 "fill" - 不要混用其他图标库；按路径单独导入图标