Phosphor Icons

Phosphor Icons 是一套设计精美、灵活性极高的开源图标库，通过独特的「可变图标（Variable Icon）」技术，让同一套 SVG 图标可以在 Fill（填充）、Regular（常规）、Thin、Light、Bold、Duotone（双色）等多种样式之间自由切换，而无需替换图标文件。Phosphor 最初于 2020 年发布，凭借其出众的视觉品质与极高的灵活性，迅速成为 GitHub 上最受欢迎的图标项目之一，目前累计获得 3 万+ Stars。

与 Lucide 等传统线性图标库不同，Phosphor 的核心理念是「一套图标，多种表达」。开发者或设计师可以根据界面层级与视觉权重，在同一图标的不同粗细样式间切换，确保图标在不同使用场景下都能保持协调的视觉节奏。Phosphor 支持 React、Vue、Svelte、Vanilla JS、Flutter 等主流框架，并提供 SVG 纯文件下载与 Figma 插件，真正打通了设计到开发的全流程。

主要功能

功能一：可变图标技术（Variable Icons）

Phosphor 的最大亮点在于可变图标设计。同一图标通过 SVG 内部的路径变量（如 stroke-width）控制，可以实时切换从 Thin（1px）到 Bold（5px）的线宽，以及在填充与线性之间切换。部分图标还支持 Duotone 模式，即用两种颜色分别渲染图标的内外区域，创造出独特的层次感。这种灵活性使得一套图标素材可以同时满足轻量级界面与重点强调场景的需求。

功能二：七种图标样式

Phosphor 提供七种独立的图标样式，每种均包含超过 1,000 个图标：Thin（极细线，1px）、Light（细线，1.5px）、Regular（常规，2px，默认）、Medium（中等，2.5px）、Bold（粗体，3px）、Fill（填充）、Duotone（双色）。所有样式共享同一套网格规范（24×24），可以无缝混用而无需担心视觉不一致。

功能三：全框架适配包

Phosphor 为主流前端框架提供了独立的 NPM 包：@phosphor-icons/react、@phosphor-icons/vue、@phosphor-icons/svelte、@phosphor-icons/flutter。每个包均支持按需导入（Tree-shaking），并提供完整的 TypeScript 类型提示与 VS Code IntelliSense 支持。在 React 中可通过 weight 属性切换图标样式，Vue 中支持 prop 传入，Flutter 中则通过 PhosphorIcons.bold() 等静态方法调用。

功能四：图标工具网站

phosphoricons.com 官网提供了功能完整的图标浏览器，支持按分类浏览、关键词搜索、样式实时切换预览。开发者可以选中图标后直接复制 SVG 代码或组件导入语句，也可以上传自己的 SVG 文件并应用 Phosphor 的样式系统进行批量处理。网站还提供了图标集打包下载、颜色自定义、尺寸预设等实用功能。

功能五：Figma 插件与设计集成

Phosphor 官方提供 Figma 插件，设计师可以直接在 Figma 内搜索和使用所有 Phosphor 图标，并实时切换不同样式。插件支持批量插入、自动布局对齐、样式同步等功能。社区还提供了 Framer、Webflow、Sketch 等平台的相关集成方案。

核心特点与优势

适用场景

Phosphor Icons 适合以下场景：多视觉权重界面（需要同一图标在正文、侧栏、导航等不同位置呈现不同粗细）；品牌化图标设计（Duotone 模式适合品牌色定制）；Tailwind CSS / Chakra UI 项目（配合动态样式系统）；移动端 App 图标（Fill 样式在 App 中视觉重量更合适）；设计系统构建（可变特性让图标在系统中更具适应性）。

Phosphor Icons 以其独特的可变图标理念，在众多开源图标库中独树一帜。如果你需要一套既美观又灵活的图标资源，特别是希望在同一产品中实现图标样式的层次变化，Phosphor 是目前最好的选择之一。