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網址入口試用。