Heroicons官網(wǎng)

Heroicons 是由 Tailwind CSS 團(tuán)隊(duì)開發(fā)的一套精美且免費(fèi)的開源 SVG 圖標(biāo)庫，旨在為網(wǎng)站和應(yīng)用提供簡潔、易用且美觀的圖標(biāo)資源。

網(wǎng)站服務(wù)：圖標(biāo)素材，Heroicons，素材資源，圖標(biāo)素材，Heroicons。

Heroicons是什么

Heroicons 是由 ?Tailwind CSS 團(tuán)隊(duì)打造的開源 SVG 圖標(biāo)庫，專注于為開發(fā)者與設(shè)計(jì)師提供簡潔、優(yōu)雅且高度可定制的圖標(biāo)資源。其圖標(biāo)以手繪風(fēng)格為特色，涵蓋線框（Outline）、實(shí)心（Solid）和迷你（Mini）三種設(shè)計(jì)風(fēng)格，每種風(fēng)格包含 ?292 個(gè)精心設(shè)計(jì)的圖標(biāo)，總數(shù)超過 ?876 個(gè)。所有圖標(biāo)均以 SVG 格式提供，支持無限縮放且適配多種應(yīng)用場景，如網(wǎng)頁導(dǎo)航、移動(dòng)端界面、表單交互等。

Heroicons的功能特點(diǎn)

1. 多風(fēng)格與多場景適配
Heroicons 提供 ?Outline、Solid、Mini 三種風(fēng)格，滿足不同設(shè)計(jì)需求：

• ?Outline：線條簡潔，適合輕量級(jí)界面；
• ?Solid：實(shí)心填充，強(qiáng)調(diào)視覺焦點(diǎn)；
• ?Mini：緊湊設(shè)計(jì)，適配小尺寸屏幕。

2. 開發(fā)與設(shè)計(jì)友好

• ?SVG 原生支持：直接嵌入 HTML 或通過 CSS 自定義顏色、大小；
• ?主流框架集成：提供 ?React 與 Vue 組件，支持 npm 安裝（如?@heroicons/react）；
• ?設(shè)計(jì)資源：開放 Figma 和 Sketch 源文件，便于二次創(chuàng)作。

3. 高效搜索與管理
官網(wǎng)提供 ?按分類瀏覽?（如“箭頭”“社交”“設(shè)備”）和 ?關(guān)鍵詞搜索，支持一鍵復(fù)制 SVG 代碼或下載圖標(biāo)文件，大幅提升工作效率。

4. 開源與免費(fèi)商用
遵循 ?MIT 許可協(xié)議，允許個(gè)人和商業(yè)項(xiàng)目免費(fèi)使用，無需署名或付費(fèi)訂閱。

如何使用Heroicons？

1. 直接使用 SVG 代碼

訪問 Heroicons 官網(wǎng)，通過分類或搜索找到目標(biāo)圖標(biāo)，點(diǎn)擊“復(fù)制 SVG”粘貼至 HTML 中，并通過 CSS 調(diào)整屬性：

<svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
  <!-- 復(fù)制的 SVG 路徑 -->
</svg>

2. 集成到 React/Vue 項(xiàng)目

通過 npm 安裝對(duì)應(yīng)包：

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

在組件中按需引入圖標(biāo)：

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

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

3. 設(shè)計(jì)工具適配

下載 Figma 或 Sketch 文件后，可直接拖拽圖標(biāo)至設(shè)計(jì)稿，調(diào)整顏色、描邊等參數(shù)，保持與開發(fā)環(huán)境的一致性。

Heroicons官網(wǎng)入口網(wǎng)址

https://heroicons.com/

OpenI小編發(fā)現(xiàn)Heroicons網(wǎng)站非常受用戶歡迎，請(qǐng)?jiān)L問Heroicons網(wǎng)址入口試用。