Heroicons

Heroicons官网

Heroicons 是由 Tailwind CSS 团队开发的一套精美且免费的开源 SVG 图标库，旨在为网站和应用提供简洁、易用且美观的图标资源。

网站服务：图标素材，Heroicons，素材资源，图标素材，Heroicons。

Heroicons是什么

Heroicons 是由 ​Tailwind CSS 团队打造的开源 SVG 图标库，专注于为开发者与设计师提供简洁、优雅且高度可定制的图标资源。其图标以手绘风格为特色，涵盖线框（Outline）、实心（Solid）和迷你（Mini）三种设计风格，每种风格包含 ​292 个精心设计的图标，总数超过 ​876 个。所有图标均以 SVG 格式提供，支持无限缩放且适配多种应用场景，如网页导航、移动端界面、表单交互等。

Heroicons的功能特点

1. 多风格与多场景适配
Heroicons 提供 ​Outline、Solid、Mini 三种风格，满足不同设计需求：

• ​Outline：线条简洁，适合轻量级界面；
• ​Solid：实心填充，强调视觉焦点；
• ​Mini：紧凑设计，适配小尺寸屏幕。

2. 开发与设计友好

• ​SVG 原生支持：直接嵌入 HTML 或通过 CSS 自定义颜色、大小；
• ​主流框架集成：提供 ​React 与 Vue 组件，支持 npm 安装（如 @heroicons/react）；
• ​设计资源：开放 Figma 和 Sketch 源文件，便于二次创作。

3. 高效搜索与管理
官网提供 ​按分类浏览​（如“箭头”“社交”“设备”）和 ​关键词搜索，支持一键复制 SVG 代码或下载图标文件，大幅提升工作效率。

4. 开源与免费商用
遵循 ​MIT 许可协议，允许个人和商业项目免费使用，无需署名或付费订阅。

如何使用Heroicons？

1. 直接使用 SVG 代码

访问 Heroicons 官网，通过分类或搜索找到目标图标，点击“复制 SVG”粘贴至 HTML 中，并通过 CSS 调整属性：

<svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
  <!-- 复制的 SVG 路径 -->
</svg>

2. 集成到 React/Vue 项目

通过 npm 安装对应包：

npm install @heroicons/react  # React
npm install @heroicons/vue    # Vue

在组件中按需引入图标：

// React 示例
import { BeakerIcon } from "@heroicons/react/24/outline";

function App() {
  return <BeakerIcon className="h-8 w-8 text-red-500" />;
}

3. 设计工具适配

下载 Figma 或 Sketch 文件后，可直接拖拽图标至设计稿，调整颜色、描边等参数，保持与开发环境的一致性。

Heroicons官网入口网址

https://heroicons.com/

OpenI小编发现Heroicons网站非常受用户欢迎，请访问Heroicons网址入口试用。