熱評 Napoleon·LEE

心臟和字節只能跳一個

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

現在很多企業公司或品牌都會將自己開發的設計素材開放出來,像是圖標集、字體或是網頁框架等等,使這些項目可以被更多人使用,或是在開源的情況下創造出更多可能性,當然一方面也能提高被看到的機會。之前介紹過IBM Plex 就是其中一個例子:

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

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

ByDesign IconPark

網站鏈接:https://iconpark.bytedance.com/official

使用教學

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

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

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

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

點選圖標可以勾選,以便稍后批次下載、一次取得所有選擇的圖標。如果點選圖標選單,可以快速復制 SVG、React 和 Vue 代碼(貼上就能使用),或是直接下載 SVG、PNG 格式。

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

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

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

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

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

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

字節跳動官方出品的免費圖標庫,超好用還能自定義修改!

值得一試的三個理由:

  • 字節跳動釋出的官方圖標集,一共收錄超過 1400 個圖標
  • 下載 SVG 和 PNG 格式,或是快速復制 SVG、React 和 Vue 代碼
  • 在線自定義圖標大小、線條粗細、風格和顏色等選項
收藏 345
點贊 167

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。