Heroicons 手工打造 SVG 免費圖示集,收錄兩種樣式 230 個常見圖案

Heroicons 手工打造 SVG 免費圖示集,收錄兩種樣式 230 個常見圖案

Heroicons 是一套漂亮的手工製作 SVG 免費向量圖示集,也是 Tailwind CSS 框架開發者製作釋出的圖示圖案,收錄超過 230 個常見圖示,依照樣式分為僅有外框(Outline)和填滿實色效果(Solid)。前者主要使用於主要導覽列和營銷區塊,設計為 24×24 大小,後者適合按鈕或表單元件使用,設計為 20×20 尺寸。

這套圖示集風格細膩,而且圖形易於識別,收錄的圖示數量恰到好處,開啟網站後可直接預覽或輸入關鍵字搜尋,將游標移動到圖示上方會顯示快速複製 SVG、JSX 原始碼按鈕,除了有基本 SVG 格式外也能透過 React 和 Vue 框架載入。

Heroicons 使用 MIT 授權方式釋出,除了在 GitHub 開放原始碼亦有 Figma 檔案可下載。

Heroicons
https://heroicons.com/

使用教學

STEP 1

開啟 Heroicons 網站就會看到兩種樣式的圖示:Outline、Solid,前者大小為 24×24,後者尺寸就稍小一些,僅有 20×20,不過兩者推薦的使用情境略有不同,使用者還是可以依照自己需求選擇合適的樣式。

Heroicons

Heroicons

STEP 2

透過上方的搜尋欄位、輸入關鍵字後會顯示所有相關的圖示圖案。

Heroicons

STEP 3

將游標移動到圖示上方就可以複製 SVG 或複製 JSX 程式碼,如果要預覽 SVG 圖案,可以試試之前推薦的「SVG Viewer 線上檢視、最佳化 SVG 圖形,亦可轉檔 PNG 或 React 格式」線上工具,除了具有檢視 SVG 圖案的功能,也能快速轉為 PNG 圖片格式。

Heroicons

值得一試的三個理由:

  1. Heroicons 是 Tailwind CSS 框架開發者製作釋出的圖示集
  2. 收錄超過 230 個圖案,有 Solid 和 Outline 兩種不同的樣式風格
  3. 快速複製 SVG 或 JSX 原始碼,亦有 Figma 檔案可供下載
分享到...