Heroicons是一套高質量的開源圖標庫，由 Tailwind CSS 團隊和 Refactoring UI 團隊分別維護不同版本，

Heroicons適用于網頁和應用程序開發。所有圖標均基于MIT許可證，允許任何人免費下載和使用，用于個人和商業項目。

Heroicons特點

• 高質量SVG圖標：Heroicons提供清晰、一致的圖標設計，適合UI開發，支持Web和應用設計。

• 兩種風格：包括Outline（輪廓線）和Solid（填充）風格，滿足不同設計需求。

• 應用廣泛：圖標覆蓋了常見的UI元素和業務場景，適用于導航、操作、狀態指示等。

• 易于集成：支持直接在HTML中使用SVG代碼，以及通過npm安裝后在React、Vue等現代前端框架中作為組件使用。

• 版本更新：隨著版本迭代，圖標數量持續增加，例如有版本包含超過1200個圖標。

Heroicons使用方法

1.安裝：

• 對于前端項目，可以通過npm或Yarn安裝Heroicons的React或Vue庫。

npm install @heroicons/react

# 或者使用Yarn

yarn add @heroicons/react

2.引入圖標：

• 在代碼中，你可以直接導入并使用圖標，例如：

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. 直接使用SVG：

• 也可以從Heroicons網站直接復制SVG代碼到HTML中使用。

4. Figma集成：

• 設計師可以利用Figma插件或直接下載SVG文件進行設計工作。

Heroicons不僅提供了多種樣式的圖標，還支持多種尺寸的圖標選擇，適應不同的設計需求。用戶可以根據項目的具體要求，選擇24x24、20x20等不同尺寸的圖標。此外，Heroicons的圖標設計風格簡潔現代，適合各種類型的應用程序和網站，尤其是與Tailwind CSS結合使用時，能夠實現更好的視覺效果和用戶體驗。

Heroicons的圖標庫還在不斷更新，開發者可以關注其GitHub頁面，獲取最新的圖標和功能更新。

Github：https://github.com/tailwindlabs/heroicons