Unicons Solid – 7000+ icons 免費線上圖標庫，3 種風格與 Apache 2.0 開源授權免費下載

Q: 如何在 Vue 或 React 專案中使用 Unicons？

Unicons 提供獨立的 npm 套件，透過 npm install 安裝對應的 Vue 或 React 版本即可。安裝後直接 import 元件就能使用，不需要手動處理 SVG 檔案或 CSS 連結。詳細安裝方式可參考 Unicons 的 GitHub 說明文件。

Facebook Line Messenger Telegram

Unicons 是 Iconscout 旗下的開源圖標庫，收錄超過 7000 個向量圖標，其中 1215 個 Line 樣式採 Apache 2.0 授權，完全免費可商用，支援 SVG、Web Font、Vue 與 React 整合。

TL;DR — Unicons 由 Iconscout 維護，是目前免費圖標庫中整合選項最齊全的選擇之一。Line 樣式全數開源（Apache 2.0），支援 SVG 下載、Web Font 引入、Vue/React 元件三種使用方式。Solid 與 Monochrome 部分圖標免費，商用前需留意授權差異。適合前端開發者、UI 設計師與 WordPress 站長快速取得一致的圖標資源。

工具名稱：Unicons by Iconscout
官方網址：https://iconscout.com/unicons
開源授權：Apache 2.0（Line 樣式）
截至 2026 年 5 月，收錄圖標數量超過 7000 個

Unicons 是什麼：定位與核心特色

Unicons 是商業設計平台 Iconscout 推出的圖標庫，與一般社群維護的開源專案不同，它背後有持續的商業資源投入，更新頻率和圖標品質都維持在一定水準。截至 2026 年 5 月，官方頁面顯示收錄超過 7000 個圖標，涵蓋 SVG、3D 與動態（Lottie）三種格式。

其中最受開發者關注的是 Line 樣式的 1215 個向量圖標，這部分全數採用 Apache 2.0 開源授權，代表你可以自由使用、修改、商用，不必標註來源。這個授權寬鬆度在免費圖標庫裡屬於前段班，跟 CSS.GG 的 GPL、iconmonstr 的 CC0 相比，Apache 2.0 在專利保護條款上更完整。

Unicons 不是什麼：它不是品牌圖標庫（那是 Simple Icons 的定位），不是插圖素材庫，也不提供像 Icons8 動畫圖標那樣的動態素材。它的核心價值是提供一致的 UI 圖標，讓你在整個專案裡維持統一的視覺風格。

三種風格與授權差異：這點沒搞清楚會踩坑

Unicons 將圖標分為三種風格，每種的授權條款不同，這是最容易忽略的關鍵差異。

風格	視覺特徵	免費數量	授權	商用限制
Line	描邊風格，線條乾淨	1215 個（全數免費）	Apache 2.0	無限制，不需標註
Solid	填色風格，視覺重量強	部分免費	Iconscout Digital License	需確認個別圖標條款
Monochrome	單色實心，扁平化風格	部分免費	Iconscout Digital License	需確認個別圖標條款

說白一點：如果你要找完全免費、商用零顧慮的圖標，直接鎖定 Line 樣式。Solid 和 Monochrome 雖然也有免費圖標，但授權條款不同，下載前務必花兩分鐘確認。尤其是接案的設計師，客戶網站的商用授權出了問題，責任會算在你頭上。

Unicons 的核心優勢在於「同一組圖標名稱，三種風格通用」。選定一個 home 圖標後，切換 Line/Solid/Monochrome 不用重新找圖，風格轉換是無縫的。這在做設計系統或元件庫時特別方便，可以讓使用者自行切換風格而不影響語意。

三種使用方式：從下載到整合

方式一：直接下載 SVG 檔案

最直覺的做法。進入 Unicons 官網，找到你要的圖標，點選 SVG 下載。適合設計師在 Figma 或 Illustrator 裡進行後續編輯，也適合想把 SVG 直接 inline 嵌入 HTML 的開發者。

下載前可以直接在網頁上調整顏色，Unicons 提供了調色盤功能讓你先指定好圖標顏色。不過 SVG 本身是文字格式，之後用 CSS 的 fill 屬性改色也很簡單，這個功能算是錦上添花。SVG 格式的優勢在於可以自由調整大小而不失真，這對響應式設計來說是基本需求。

方式二：透過 Web Font 引入

如果你不想管理一堆 SVG 檔案，可以用 Web Font 方式引入。在 HTML 的 <head> 裡加上 CSS 連結：

<!-- Line 樣式 -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.0/css/line.css">

<!-- Solid 樣式 -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.0/css/solid.css">

載入後就能用 class 方式在任何元素上顯示圖標，跟使用 IcoMoon 或 Font Awesome 的邏輯一樣。這個方式方便管理，但會多載入一個 CSS 檔案和對應的字型檔。如果你的網站已經很注重載入速度，就要評估這個額外的 HTTP 請求是否值得。

方式三：Vue 或 React 元件

現代前端框架開發者最方便的選項。Unicons 提供了 Vue 和 React 的元件包裝，可以直接用 <UilIcon /> 把圖標當成元件來用，不用處理 SVG 路徑或 class 名稱。這跟使用 Heroicons.dev 的 React 元件非常類似，上手門檻低。

Vue 搭配 Monochrome 樣式還支援透過 JS bundle 引入：

<script src="https://unicons.iconscout.com/release/v3.0.0/script/monochrome/bundle.js"></script>

對於使用前端框架開發介面的團隊來說，Unicons 提供的 Font、Vue、React 三種格式算是相當齊全。

同類型圖標庫比較：Unicons 的優劣勢

把 Unicons 跟幾個常用的開源圖標庫放在一起比較，優劣勢會更清楚。

圖標庫	免費數量	授權	Vue/React 支援	特色
Unicons Line	1215+	Apache 2.0	有	三種風格通用，商業平台維護
Remix Icon	2149+	Apache 2.0	有	數量多，分類細
Tabler Icons	558+	MIT	有	品質穩定，適合後台介面
Ionicons	1200+	MIT	有	跨平台，Ionic 生態系
Heroicons	176+	MIT	有	Tailwind 官方推薦，極簡
Feather Icons	200+	MIT	社群維護	輕量簡潔
iconmonstr	4496+	CC0	無	數量多，完全無限制

Unicons 的劣勢在於 Solid 和 Monochrome 的免費圖標數量有限，大部分需要訂閱 Iconscout 的進階方案（每月 $14.99 美元，年繳）。如果你的需求是「大量免費圖標，商用無顧慮」，Unicons 的 Line 樣式可以滿足基本需求，但要覆蓋所有場景，建議搭配其他資源。

我經常混用 FindIcons 搜尋特定圖標，用 Icons8 的動畫圖標補足動態場景，再用 LineIcons 的 2000+ 線形圖標擴充覆蓋面。Iconshock 提供超過 200 萬圖標的終身方案，適合預算充足且需要大量素材的團隊。

WordPress 網站使用 Unicons 的實務建議

很多 WordPress 站長會用圖標來裝飾導航列選單、頁面區塊或社群分享按鈕。用 Web Font 方式引入 Unicons 是最簡單的做法，在佈景主題的 functions.php 或透過快取外掛加上 CSS 連結就行。

但有個效能考量。Web Font 會額外載入 CSS 檔案和對應字型檔，如果你的網站已經裝了很多快取外掛和第三方腳本，再多加一個字型請求可能會影響網站速度測試的分數。這種情況下，直接用 inline SVG 反而更輕量。

另一個做法是把 SVG 圖標上傳到媒體庫，在區塊編輯器裡用圖片區塊插入。這個方式最不需要寫程式碼，但缺點是不好統一管理顏色和大小。如果你用的是進階的 WordPress 佈景主題，通常會內建圖標選擇器，可以直接貼 SVG code。

不管用哪種方式，記得搭配 ShortPixel 或其他圖片壓縮工具。SVG 雖然是向量格式，但複雜的路徑資料量也不小，尤其是多個圖標組合在一起的時候。

配色與客製化：讓圖標融入設計系統

圖標的視覺一致性不只是風格統一，顏色也必須配合整體設計。Unicons 的線上調色盤讓你在下載前指定顏色，但只對 SVG 下載有效。Web Font 方式的顏色要透過 CSS 控制。

建議的做法是先定義好 CSS 變數，把品牌色、中性色、強調色都設好，圖標顏色就跟著變數走。日後改版只要改變數值，所有圖標顏色就會一起更新。如果還沒有配色方案，可以先用 Coolors 產生一組調色盤，再用 Alwane 分析參考網站的配色，很快就能建立一致的色彩系統。

SVG 格式的圖標在客製化上有先天優勎。你可以用 CSS 改顏色、用 transform 改大小、用 CSS 動畫做旋轉或跳動效果。這些在 LOADING.IO 產生的載入動畫中也能看到類似做法，差別在於 Unicons 的圖標是靜態的，動畫效果需要自己加上去。

誰適合用 Unicons，誰不適合

適合的人：

前端開發者，需要 Web Font + Vue/React 元件的開源圖標庫，Unicons Line 樣式完全夠用，授權也沒有爭議
UI 設計師，想在 Figma 裡快速找到一致的圖標，Unicons 有對應的 Figma 外掛（2025 年 5 月更新至 v2.6.3）
WordPress 站長，需要少量一致的 UI 圖標來裝飾導航或按鈕區域

不適合的人：

需要大量不同風格圖標且預算為零的人，Solid 和 Monochrome 的免費圖標數量有限
需要品牌 Logo 圖標的人，應該改用 Simple Icons（CC0 授權，3400+ 品牌圖標）
追求極致輕量的人，200 多個圖標的 Feather Icons 更適合

如果你的需求是「免費、商用無顧慮、數量夠用」，我建議以 Unicons Line 為基底，搭配 CSS.GG、Tabler Icons、Remix Icon 組合使用。這幾個都是 MIT 或 Apache 授權的開源圖標庫，商用完全沒問題，數量加起來足夠覆蓋大部分設計場景。

三個立即可執行的下一步

確認你的圖標需求範圍：列出專案中需要的圖標類型（導航、社交、操作按鈕等），然後到 Unicons 官網搜尋，看 Line 樣式是否涵蓋 80% 以上的需求。如果涵蓋率夠高，直接採用。
選擇整合方式：純靜態網站用 SVG 下載最單純；動態網站或 SPA 用 Vue/React 元件最省事；WordPress 網站用 Web Font 最快上手。選定一種方式後就不要混用，維護成本會低很多。
建立顏色管理流程：用 CSS 變數統一管理圖標顏色，搭配 SEO 外掛和效能優化一起做，不要等到最後才處理視覺一致性。