IconPark 免費圖標庫：字節跳動 2400+ 向量圖標客製化下載

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）。歸檔之後倉庫進入唯讀狀態，master 分支裡留下的 2,600 多個 SVG 圖檔從此固定不變，不會再有任何功能更新、新圖標加入或錯誤修復，但現有的圖標和匯出功能依然可以正常使用，npm 上 1.4.2 版也仍可安裝。對使用者的實質影響是：套件本身穩定不會壞，但若未來 React 或 Vue 的新版本破壞了相容性，你必須自己 fork 維護或改用社群分支。

網站名稱：ByDesign IconPark
官方網址：https://iconpark.oceanengine.com/official
GitHub 授權：Apache License 2.0（已歸檔）
網址備註：iconpark.bytedance.com 為官方舊網址，會自動轉址到 iconpark.oceanengine.com

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。

實務上要留意版本搭配。1.4.2 是 2022 年 7 月的版本，對 React 17、18 與 Vue 2、Vue 3 都能正常運作；但 React 19（2024 年底發布）之後的併發特性與新的 JSX transform 並沒有經過官方驗證。如果你的專案已經升上 React 19，建議先在隔離環境試跑一輪，確認 props 傳遞與 ref 轉發沒有非預期行為，再決定是否全面採用。另一個常見做法是繞過 npm 套件，直接從 IconPark 網站匯出所需的 SVG，自己包成小型元件，這樣就完全不受框架版本綁架，是最保險、也最容易長期維護的路徑。

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 年 8 月）
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 檔案使用。把它當成「素材取樣庫」而非「依賴套件」來用，歸檔這件事的風險就幾乎可以忽略，因為匯出的 SVG 檔案是純靜態資源，永遠不會因為框架升級而失效。

誰適合使用 IconPark

適合：

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

不適合：

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

最後一種容易混淆的需求：IconPark 提供的是網站與 App 介面使用的向量圖標，如果你要找的是 Mac 應用程式或資料夾的替換圖示，可以改參考Mac icon 下載的相關整理，macOSicons 收錄的是現成的 Mac 應用圖示檔，和 IconPark 的用途不同。

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 的客製化面板更實用。