IconPark 字節跳動官方免費圖示庫，1400 個 SVG、PNG 圖片格式下載

現在很多企業公司或品牌都會將自己開發的設計素材開放出來，像是圖示集、字型或是網頁框架等等，使這些項目可以被更多人使用，或是在開源的情況下創造出更多可能性，當然一方面也能提高被看到的機會。之前介紹過「IBM Plex：IBM 設計免費字型下載，三種字體類型及風格指南」就是其中一個例子，或是 GitHub 釋出的開放原始碼免費圖示 Octicons 也是非常好用的素材庫，如果需要圖示可以直接在網路上搜尋。

本文要介紹的「IconPark」是一套完整免費圖示庫，也是字節跳動（ByteDance）釋出的官方圖示集（旗下最知名的就屬抖音 TikTok），IconPark 一共收錄超過 1400 個圖案，從基礎到各種類型應有盡有，在網站裡可以預覽這些圖案，點選快速下載 SVG 或 PNG 圖片格式，也能複製 SVG、React 和 Vue 代碼，勾選圖示後批次下載檔案。

IconPark 網頁提供可自訂圖示功能，像是圖示大小、線條粗細、圖示風格（顏色）、邊線和填充顏色、端點類型、拐點類型都能選擇設定，直接在網頁線上預覽效果，透過 SVG 原始檔案變化出不同的顏色效果，只需要改變一個 SVG 檔案的屬性就能切換多種佈景主題設計。如果你需要更多資訊，IconPark 也在 GitHub 開放原始碼提供完整原始文件。

ByDesign IconPark
https://iconpark.bytedance.com/official

使用教學

STEP 1

開啟 IconPark 後可以看到許多圖示圖案，從左側選單選擇圖示類別，或透過上方搜尋框輸入關鍵字進行查找，每個圖案會有預覽、中文說明和英文名稱，右側是調整圖示大小、線條粗細、圖示風格顏色的工具欄位。

IconPark 依照主題對圖案進行分類，包括基本圖示、人群、書籍、內容編輯、天氣、手勢、方向、交流、醫療健康、聲音、時間、圖表、抽象等等相當詳細，使用者可以很容易找到自己需要的圖示圖案。

STEP 2

點選圖示可以勾選，以便稍候批次下載、一次取得所有選擇的圖示。如果點選圖示選單，可以快速複製 SVG、React 和 Vue 代碼（貼上就能使用），或是直接下載 SVG、PNG 格式。

STEP 3

若你覺得每個圖示標示中文描述和名稱看起來很雜亂，無法很仔細查看這些圖案，從右上角也能切換不同預覽模式，讓它只有單獨顯示圖示圖案而沒有其他資訊。

STEP 4

從右側的編輯器可以調整圖示大小、線條粗細、圖示風格（顏色）和線條顏色，設定後預覽模式會自動更新，就能立即查看新的圖示效果。

比較特別的是 IconPark 提供線性、填充、雙色和多色的圖示風格，若你覺得預設線性設計看起來太過單調無趣，也可以選擇不同風格加入顏色，顏色部分可供使用者自訂，例如選擇多色模式下可自訂外框線條顏色、外部填充顏色、內部線條顏色和內部填充顏色，就可以製作出看起來更生動活潑的彩色圖示集。