IconPark - 字節跳動官方開源圖標庫，2400+ 免費向量圖標線上客製化下載

Q: React 和 Vue 專案要怎麼引入 IconPark？

React 專案安裝 @icon-park/react，Vue 專案安裝 @icon-park/vue，兩者都支援具名引入和 tree-shaking。透過 props 傳入 theme、size、fill 等參數即可客製化。 IconPark 評價要點 超過 2400+ 高品質向量圖標，Apache 2.0 免費商用無需署名 深度客製化：大小、粗細、四種風格、端點、拐點、多層顏色 支援 SVG、PNG、React、Vue 多種匯出格式 支援批量下載與 tree-shaking 按需載入 專案已於 2023 年 2 月歸檔，不再更新維護

Facebook Line Messenger Telegram

IconPark 是字節跳動（ByteDance）旗下 ByDesign 團隊開發的開源向量圖標庫，收錄超過 2400 個可免費商用的圖標，支援線上客製化大小、粗細、風格、端點與多層顏色，並可匯出 SVG、React、Vue、PNG 四種格式。不過，這個專案已在 2023 年 2 月歸檔停止維護，網站仍可存取但不再更新。

IconPark 是什麼

IconPark 是字節跳動 ByDesign 設計系統底下的開源圖標專案，官方網站位於 iconpark.oceanengine.com，GitHub 原始碼託管在 bytedance/IconPark。它的定位不是單純提供固定樣式的 SVG 檔案下載，而是讓你從同一組路徑資料，透過修改屬性參數，變換出線性、填充、雙色、多彩四種主題風格。

這個專案在 GitHub 上累積了超過 9000 顆星，不過已於 2023 年 2 月正式歸檔（archived），npm 套件最後更新停留在 2022 年 7 月（版本 1.4.2）。這意味著不會再有功能更新或錯誤修復，但現有的圖標和匯出功能依然可以正常使用。

網站名稱：ByDesign IconPark
官方網址：https://iconpark.oceanengine.com/official
GitHub 授權：Apache License 2.0（已歸檔）

IconPark 核心特色

IconPark 在免費圖標庫中最大的差異化優勢是「即時客製化」。大多數圖標庫，包括 Icons8 和 Remix Icon，提供的自訂選項多半只有大小和顏色。IconPark 則把 SVG 的描邊屬性完整暴露出來，讓你直接在瀏覽器裡調整線段粗細、端點形狀、拐角弧度，以及四層獨立顏色控制。

技術上，IconPark 不使用 web font 載入圖標，而是採用純 SVG 路徑。這帶來三個好處：載入速度更快（不需要下載整個字型檔）、渲染品質更好（向量路徑在任何解析度都清晰）、而且可以針對單一圖標做精確的樣式控制。

匯出格式支援四種：

SVG 原始碼：直接貼入 HTML，或透過 SVGOMG 進一步壓縮
React 元件：產生符合 JSX 規範的元件程式碼
Vue 元件：支援 Vue 2 與 Vue 3
PNG 圖片：適合不熟悉程式碼的使用者

另外也支援批量下載，一次選取多個圖標後打包成壓縮檔。比起 CSS.GG 等需要逐一操作的圖標庫，處理大量圖標時效率高出不少。

如何使用 IconPark：搜尋、篩選與下載

使用流程分三步：找到圖標、調整樣式、下載或複製程式碼。

透過分類或搜尋找到圖標。左側分類面板提供 UI 操作、品牌標誌、社群媒體、地圖定位、天氣、交通工具等分類。你也可以在搜尋框輸入英文關鍵字直接查找。
調整客製化參數。選好圖標後，右側面板可以調整大小（12-128px）、線段粗細（0-4）、主題風格、端點與拐角類型、以及多層顏色。所有變更即時預覽。

單一圖標可複製 SVG, React, Vue 程式碼與下載 SVG, PNG 檔案

下載或複製：點擊單一圖標後，可以複製 SVG、React 或 Vue 程式碼，也可以下載 SVG 或 PNG 檔案。需要多個圖標時，逐一勾選後點擊「批量下載 SVG」按鈕即可打包下載。

客製化功能深度解析

客製化是 IconPark 最核心的競爭力。右側面板提供的參數控制深度，在其他免費圖標庫中很難找到。

四種主題風格

線性（Outline）：只有描邊輪廓，類似 Heroicons 的 Outline 風格，適合乾淨清爽的介面
填充（Filled）：實心填充，視覺重量較重，適合深色模式或需要強調的場景
雙色（TwoTone）：描邊加填充的雙色風格，層次感更豐富
多彩（MultiColor）：多色圖標，視覺效果最豐富

切換風格時，所有已選取的圖標會同步更新，方便快速比較不同風格的效果。

端點、拐點與多層顏色

端點類型（strokeLinecap）控制線段末端外觀，有圓角、方角、平角三種。拐點類型（strokeLinejoin）控制線段相交處形狀，同樣有圓弧、尖角、斜角三種。這兩個參數的組合能讓同一個圖標呈現截然不同的視覺個性，例如圓角加圓弧會顯得柔和親切，方角加尖角則更穩重俐落。

顏色方面，IconPark 將圖標拆分為四個獨立控制項：外描邊色、外填充色、內描邊色、內填充色。你可以為不同層次分別設定顏色。如果需要配色靈感，可以搭配 Coolors 等配色工具使用。這種多層顏色控制在 Feather Icons 或 Tabler Icons 中是看不到的。

在 React 與 Vue 專案中整合

React 安裝與使用

npm install @icon-park/react

import { Home } from '@icon-park/react';

function App() {
  return <Home />;
}

透過 props 客製化：

<Home
  theme="filled"
  size="32"
  fill="#4CAF50"
  strokeWidth={3}
  strokeLinecap="round"
  strokeLinejoin="round"
/>

Vue 安裝與使用

npm install @icon-park/vue

Vue 3 Composition API 寫法：

<template>
  <Home theme="filled" size="32" fill="#4CAF50" />
</template>

<script setup>
import { Home } from '@icon-park/vue';
</script>

Vue 2 寫法需要在 components 中註冊元件。Props 的客製化參數與 React 版本完全一致。

按需載入

@icon-park/react 和 @icon-park/vue 都支援 ES Module 的 tree-shaking。只要用具名引入（如 import { Home }），打包工具就只會包含實際用到的圖標，不會把全部 2400+ 個圖標都塞進 bundle。

IconPark 授權條款

IconPark 採用 Apache License 2.0 授權，簡單說就是：個人或商業用途都可以自由使用、修改和散布，不需要署名，也不需要附上授權聲明。只有在修改 IconPark 原始程式碼並散布修改後的版本時，才需要保留原始的授權聲明檔案。

對大多數只是下載圖標使用的設計師和開發者來說，這個條件幾乎不會觸發。跟 CC0 授權相比自由度幾乎一樣，跟 MIT 授權相比少了保留授權聲明的負擔。

授權類型	商用	署名	修改散布	代表圖標庫
Apache License 2.0	可	不需要	需保留授權聲明	IconPark、Remix Icon
CC0	可	不需要	無限制	部分開放素材
MIT	可	需保留授權聲明	需保留授權聲明	Heroicons
CC BY 4.0	可	需要署名	需標註修改	部分 Flaticon 圖標

IconPark 與其他圖標庫比較

圖標庫	圖標數量	授權	線上客製化	React/Vue 支援	維護狀態（截至 2026 年 5 月）
IconPark	2400+	Apache 2.0	深度（端點/拐點/多層色）	完整支援	已歸檔（2023-02）
Icons8	13 萬+	免費版需署名	基本（大小/顏色）	部分支援	活躍維護
Remix Icon	2800+	Apache 2.0	基本（大小/顏色）	完整支援	活躍維護
Heroicons	~300	MIT	有限	React/Vue	活躍維護
Feather Icons	~280	MIT	基本（大小/粗細）	社群套件	低頻維護

IconPark 的客製化深度至今仍然是同類產品中最強的，但「已歸檔」是個需要認真考慮的因素。如果你的專案需要長期維護，建議優先考慮 Remix Icon 或 Flaticon 這類仍在活躍更新的圖標庫。IconPark 適合用於風格已定案、不需要後續圖標更新的一次性專案，或者你只需要從中挑選幾個圖標匯出 SVG 檔案使用。

誰適合使用 IconPark

適合：

需要高度客製化圖標風格的 UI 設計師，尤其是需要精確控制描邊和端點細節的場景
已有 React 或 Vue 專案，想快速引入可客製化圖標元件的前端開發者
只需要一次性匯出 SVG 檔案、不需要後續圖標庫更新的專案
想在 WordPress 網站中使用免費圖標的站長，直接下載 PNG 貼入文章即可

不適合：

需要持續獲得新圖標的團隊（專案已停止維護，不會有新圖標加入）
需要圖標庫提供長期技術支援和錯誤修復的商業專案
圖標需求超過 2400 個、需要更豐富素材量的大型設計系統

IconPark 常見問題 FAQ

IconPark 現在還能正常使用嗎？

可以。雖然 GitHub 專案已在 2023 年 2 月歸檔停止維護，但官方網站和 npm 套件都還能正常存取和安裝。現有的 2400+ 個圖標、客製化功能和程式碼匯出都可以正常運作，只是不會再有任何更新或錯誤修復。

IconPark 完全免費嗎？

是的。所有圖標都採用 Apache License 2.0 開源授權，不需要付費就能使用全部圖標和功能。

IconPark 圖標可以用於商業專案嗎？

可以。Apache License 2.0 明確允許商業使用，不需要署名，也不需要額外取得授權。你可以用在客戶網站、付費 App、設計範本等任何商業場景。

IconPark 和 Icons8 有什麼不同？

Icons8 的圖標總數遠多於 IconPark（13 萬+ vs 2400+），還提供插圖和照片等素材，但免費版需要署名。IconPark 不需要署名，客製化能力也更強，但圖標數量較少且已停止維護。如果你需要大量不同風格的圖標且不介意署名，Icons8 資源更豐富；如果你需要深度自訂圖標外觀，IconPark 的客製化面板更實用。