开发工具精选项目

Iconify

统一访问 200 多个开源图标集和 30 万多个 SVG 图标的生态系统，支持组件、CSS、API、设计插件与自托管。

GitHub 访问官网

主要语言TypeScript

开源许可MIT（图标集许可各异）

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

Iconify 通过统一的图标命名和 JSON 数据格式连接大量开源图标集。开发者可以使用 React、Vue、Svelte、Web Component、Tailwind CSS、UnoCSS 或构建插件按需加载图标，也可以完全离线打包或运行自己的 API。

Iconify 不是单一风格的图标库，而是一套统一图标数据、搜索、渲染和分发方式的生态系统。它收录 200 多个开源图标集、合计 30 万多个图标，并用 `prefix:name` 标识符统一访问，例如 `mdi:home`。项目提供框架组件、Iconify Icon Web Component、Tailwind 与 UnoCSS 集成、公共或自托管 API、离线 JSON 数据、图标清理工具以及 Figma、Penpot、Sketch 插件。Iconify 框架代码采用 MIT 许可证，但收录的每个图标集保留自己的 MIT、Apache-2.0、CC BY 等许可证；采用图标时必须核对具体集合，而不能把全部图标视为 MIT。

图标规模300,000+

图标集合200+

统一标识prefix:name

FEATURES

主要特点

Iconify 从图标发现、数据标准化到前端渲染与设计工具导入，覆盖完整的图标工作流。

30 万+ SVG 图标

官方公共 API 汇集 200 多个开源图标集，覆盖界面符号、品牌、旗帜、Emoji、开发工具和行业图形。

统一命名格式

使用 `prefix:name` 区分图标集与图标，例如 `mdi:home`、`tabler:search`，不同来源共享一致调用方式。

自动清理与优化

图标集进入 Iconify 前会经过验证、命名清理和 SVG 优化，并通过自动流程持续跟踪上游更新。

按需公共 API

组件只请求页面实际使用的图标数据，不需要为了几个图标下载包含数千个图标的完整集合。

Iconify Icon Web Component

使用 `<iconify-icon>` 在原生 HTML 和现代框架中渲染图标，Shadow DOM 能减少样式冲突并简化 SSR Hydration。

框架原生组件

提供 React、Vue、Svelte 等组件，支持 Icon 名称或本地图标数据，并可控制大小、颜色、旋转和翻转。

Tailwind CSS 集成

分别提供 Tailwind CSS v3 与 v4 插件，将图标生成 Mask 或 Background CSS，并按扫描到的动态类名生成所需图标。

UnoCSS 与 Unplugin Icons

UnoCSS preset-icons 可生成图标 CSS，Unplugin Icons 则能为 React、Vue、Svelte、Solid、Astro 和 Qwik 按需生成组件。

在线与离线两种模式

既可从公共 API 动态获取，也可安装拆分图标包、`@iconify-json/{prefix}` 或完整 `@iconify/json` 数据进行离线构建。

公共与自定义 API Provider

组件支持额外 API Provider，团队可同时使用公共图标和私有图标服务，而不必改变组件调用模式。

可自托管 API

Iconify API 软件开放源码，可通过 Node.js、NPM 或 Docker 部署，控制图标集合、可用性、隐私与缓存策略。

自定义图标集

Iconify Tools 能导入 SVG 文件夹，清理、验证、优化并导出为统一 IconifyJSON，复用同一套组件和插件。

搜索与图标选择器能力

公共 API 提供集合列表、搜索和图标数据查询，可用于 CMS、页面构建器或内部 Icon Picker。

设计工具插件

Figma、Penpot、Sketch 等插件让设计人员从相同图标来源搜索和导入，减少设计稿与代码资产不一致。

单色与多彩图标

单色图标通常通过 `currentColor` 或 Mask 继承文字颜色，多彩图标则保留 SVG 内置色板并以背景图方式呈现。

USE CASES

适用场景

它适合需要跨图标集搜索、跨框架复用、按需加载或自建图标平台的团队。

跨图标集搜索与原型

在一个入口比较 Material Design、Tabler、Phosphor、Carbon、品牌与 Emoji 图标，快速验证信息架构。

多框架产品线

React、Vue、Svelte 和原生 Web 项目可共享 `prefix:name` 命名与自定义集合，减少平台间资产映射。

页面构建器和 CMS

利用搜索 API 和统一数据格式构建图标选择器，让内容编辑者从大规模图标库中按需选择。

Tailwind 与 UnoCSS 项目

将图标写成可扫描类名，在构建阶段只生成实际使用的 CSS，保持与 Utility CSS 一致的开发体验。

私有品牌图标体系

把内部 SVG 清理为自定义 IconifyJSON，再通过自托管 API、Unplugin Icons 或本地包统一分发。

严格离线或内网应用

使用拆分数据包或自托管服务，避免浏览器访问公共 API，适合内网、桌面应用和受控网络环境。

设计与开发协同

设计插件和代码组件使用相同集合与图标名称，方便团队在设计稿、组件库和实现之间建立可追踪映射。

品牌、旗帜与多彩图标

当单一线性 UI 图标库覆盖不足时，可以按许可选用 Simple Icons、Emoji 或其他多色集合。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Iconify 擅长的地方

单一命名方式即可访问 200 多个图标集和 30 万多个图标
不绑定单一框架，组件、Web Component、CSS 和 API 路径齐全
支持在线按需加载、构建期生成、离线打包和自托管
自动清理、验证和同步上游图标集，减少手工维护
Tailwind、UnoCSS 和 Unplugin Icons 集成适合现代构建工具
可加入自定义图标集，不必为品牌图标另建渲染层
公共 API 支持搜索，适合构建图标选择器和低代码产品
设计工具插件有助于统一设计稿与前端资产
单色与多彩图标都能使用，覆盖范围比单一线性图标库更广
核心框架采用 MIT，API 与数据工具均可审计和自托管

需要注意

采用前应考虑的问题

图标许可证必须逐集合核对

Iconify 框架是 MIT，但图标可能使用 MIT、Apache-2.0、CC BY 或其他条款。需要保留来源、署名和许可证记录。

公共 API 会形成运行时依赖

字符串图标名通常在浏览器挂载后请求 Iconify API；网络失败、地区访问、广告拦截或服务波动都可能导致图标延迟或缺失。

首屏可能出现延迟或布局变化

异步注册 Web Component 或拉取图标数据需要时间。应预留 1em 尺寸，关键首屏图标可改用离线数据或构建期生成。

React 动态组件不是完整 SSR

`@iconify/react` 使用字符串图标名时通常在挂载后渲染。Next.js 等 SSR 项目应使用客户端边界、传入本地图标数据或评估 Web Component。

远程请求涉及隐私和 CSP

访问公共 API 会暴露访客 IP、请求时间与图标名称，并需要允许对应 connect-src。隐私敏感项目应离线打包或自托管。

选择太多容易破坏一致性

不同集合的网格、线宽、圆角和视觉重量差异明显。产品 UI 应固定主集合，并为例外图标建立评审规则。

动态拼接类名可能不被扫描

Tailwind 或 UnoCSS 无法可靠发现运行时拼接的图标类名。应使用完整静态类名、Safelist 或显式集合配置。

不要一次加载全部图标数据

`@iconify/json` 适合工具和服务端处理，但对普通前端构建过大。优先使用拆分集合包或只导入实际图标。

图标不能替代可访问名称

纯图标按钮必须提供 aria-label；装饰图标应 aria-hidden，不能假设屏幕阅读器会从图标名称推断用途。

单色与多彩图标着色方式不同

只有单色图标能可靠继承 `currentColor`。Emoji 或品牌图标通常包含固定色板，设置 color 不会改变内部颜色。

Shadow DOM 降低内部样式控制

Web Component 隔离样式和 Hydration 很方便，但也让修改 SVG 内部 Path、Stroke 或复杂动画变得更困难。

外部 SVG 数据应视为内容输入

自定义图标和第三方集合应经过 Iconify Tools 清理与可信来源审核，不要把任意用户提交的 SVG 直接注入页面。

自托管需要运维与更新

自行部署 API 可以控制隐私与可用性，但需要负责同步图标、缓存、CDN、监控、容量和故障切换。

品牌图标还涉及商标规则

开源许可不等于获得品牌商标授权。使用公司 Logo、支付标志和产品品牌时还需遵守其品牌指南。

QUICK START

快速开始

下面分别展示 React 在线按需加载、离线打包、Web Component、Tailwind CSS v4 和公共 API 的典型用法。

1安装 React 组件

bash

npm install @iconify/react

2在客户端组件中按名称加载

tsx

"use client";

import { Icon } from "@iconify/react";

export function Actions() {
  return (
    <div className="flex items-center gap-3">
      <Icon
        icon="mdi:home"
        aria-hidden="true"
        className="text-xl text-sky-600"
      />
      <button type="button" aria-label="打开设置">
        <Icon icon="tabler:settings" aria-hidden="true" />
      </button>
    </div>
  );
}

3离线打包一个图标

bash

npm install @iconify/react @iconify-icons/mdi

4使用本地图标数据避免运行时请求

tsx

import { Icon } from "@iconify/react/offline";
import homeIcon from "@iconify-icons/mdi/home";

export function HomeIcon() {
  return (
    <Icon
      icon={homeIcon}
      aria-hidden="true"
      width="1.25em"
      height="1.25em"
    />
  );
}

5使用 Web Component

bash

npm install iconify-icon

6注册并渲染 Web Component

html

<script type="module">
  import "iconify-icon";
</script>

<iconify-icon
  icon="mdi:home"
  aria-hidden="true"
></iconify-icon>

7在 Tailwind CSS v4 中启用 Iconify

bash

npm install -D @iconify/tailwind4 @iconify-json/mdi-light

8配置 Tailwind v4 插件

css

@import "tailwindcss";
@plugin "@iconify/tailwind4";

9使用静态完整类名

html

<button type="button" aria-label="返回首页">
  <span
    class="icon-[mdi-light--home] text-2xl text-sky-600"
    aria-hidden="true"
  ></span>
</button>

10直接查询公共 API

bash

curl "https://api.iconify.design/mdi.json?icons=home,account"
curl "https://api.iconify.design/search?query=calendar&limit=16"

11执行发布前检查

bash

npm run lint
npm run typecheck
npm run build

# 断网测试图标、检查首屏布局、CSP、许可记录和无障碍名称

下一步：正式项目应先固定一到两个主图标集，并决定在线 API、构建期生成或离线打包策略；不要在同一界面随意混合不同线宽、网格和视觉语言。

ALTERNATIVES

类似项目

这些项目提供更聚焦的单一图标体系，可与 Iconify 的多集合聚合模式进行比较。

React

用于构建 Web 和原生用户界面的组件化 JavaScript 库。

查看项目

Vue.js

渐进式 JavaScript 框架，易学易用且拥有优秀的性能表现。

查看项目

Svelte

将组件编译为精简 JavaScript 的现代 Web UI 框架。

查看项目

Tailwind CSS

以实用类为核心的 CSS 框架，快速构建定制化界面。

查看项目

UnoCSS

高度可定制、即时按需生成样式的原子 CSS 引擎。

查看项目

shadcn/ui

把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。

查看项目

Lucide

由社区维护的统一线性 SVG 图标库，提供 1,600 多个图标、Tree Shaking 和多框架组件包。

查看项目

Heroicons

由 Tailwind CSS 团队手工设计的 MIT SVG 图标集，提供四种光学尺寸及 React、Vue 官方组件。

查看项目

Phosphor Icons

具有多种粗细与填充风格的灵活图标家族，提供主流框架组件与设计资源。

访问官网

COMPARISON

Iconify vs Lucide

Iconify 与 Lucide 都能为现代前端提供 SVG 图标和多框架集成，但解决的问题不同。Iconify 是聚合、标准化和分发数百个图标集的平台；Lucide 是一套由社区共同维护、视觉语言一致的独立线性图标库。

比较维度	Iconify	Lucide
核心定位	多图标集聚合、数据格式、API 与工具生态	单一风格的社区 SVG 图标库
图标规模	300,000+，来自 200+ 集合	1,600+，集中维护
视觉一致性	取决于选择的集合，跨集合差异明显	统一网格、线宽和线性风格
品牌与多彩图标	可使用品牌、Emoji、旗帜和多色集合	聚焦通用 UI 线性图标，不收录品牌 Logo
默认交付	公共 API 按需加载，也支持本地数据和构建插件	安装框架包并通过 Tree Shaking 导入具体组件
跨框架	组件、Web Component、CSS、API 与生成插件	React、Vue、Svelte、Solid、Angular、Astro 等官方包
SSR 策略	动态组件需客户端加载；Web Component 或离线数据可改善	静态导入组件通常可直接随服务端 HTML 输出 SVG
搜索与选择器	统一搜索 200+ 集合，并提供公共 Search API	在 Lucide 自身目录搜索统一集合
自定义图标	IconifyJSON、Tools、自定义 Provider 和自托管 API	可修改 SVG/组件，但不提供同规模聚合 API
许可	框架 MIT；每个图标集许可不同	主体 ISC，部分 Feather 衍生图标保留 MIT
更适合	需要海量选择、品牌图标、跨来源搜索或图标平台	希望产品 UI 保持一致线性语言和简单静态导入

如何选择

如果产品主要需要通用界面图标，并重视视觉一致、静态导入与简单许可治理，优先选择 Lucide；如果还需要品牌、Emoji、旗帜、多个设计体系、图标搜索 API 或自建选择器，Iconify 的覆盖面更强。常见做法是以 Lucide 或另一个单一集合作为主 UI 图标库，只在确有缺口时通过 Iconify 引入受控例外。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 29 日

核验版本@iconify/react 6.0.2；公共图标数据持续更新

内容维护Docs100 编辑整理

项目维护状态活跃维护

本页依据 Iconify 官方文档、React 组件、Iconify Icon Web Component、Tailwind CSS v4 插件、公共 API、图标数据说明和官方源码仓库整理。核验时 iconify/iconify 仓库最近可见提交日期为 2026 年 7 月 5 日。Iconify 框架许可证不覆盖所有图标，采用前必须查看具体图标集元数据。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动：2026 年 7 月 5 日

官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 5 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。

查看官方仓库

官方来源8 项

Iconify DocumentationIconify

Iconify for ReactIconify

Iconify Icon Web ComponentIconify

Iconify for Tailwind CSS 4Iconify

Iconify APIIconify

Iconify Icon SetsIconify

Iconify GitHub 仓库Iconify · GitHub

Iconify LicenseIconify · GitHub