IconPark 網站是由字節跳動官方所推出的線上開源圖標庫,截至目前已提供了 1287+ 個高品質的圖標,所有圖標都是採用 Apache License 2.0 授權方式,因此你可以任意將其使用在商業用途或個人用途的專案當中,無需署名或是附上來源連結。
IconPark 與其他利用 SVG 格式來改變外觀效果的資源不同之處在於,它利用了一種創新的技術,透過改變一個 SVG 檔案的屬性就可以變換出多種的主題。同時,它還支援多種跨平台的程式碼,讓你可以直接複製 SVG 程式碼、Reat 圖標代碼、Vue 圖標代碼…等等,讓你能夠直接使用在各種不同的編輯工具當中進行編輯。
此外,你也能在網站介面當中直接調整圖標的大小、外框粗細、圖標風格、圖標顏色、端點類型、拐點類型…等等客製化樣式設定,並在最後直接導出成 SVG 或 PNG 圖片檔案格式。
IconPark 網站介面的左側提供了各種圖標分類的設置,讓你可以根據不同的類別需求,快速的找到相對應的圖標。或者,也可以透過上方的搜尋框進行整站的圖標搜尋。
網站名稱:ByDesign IconPark
網站網址:https://iconpark.bytedance.com/official
IconPark 簡介教學
Step 1
進入頁面後,首先可以在左側快速篩選圖標的類別,或者也能夠直接從上方搜尋框進行圖標的尋找:
比較可惜的地方是,搜尋框不支援簡/繁轉換,因此若非輸入相對的簡體字,是無法正確的顯示結果。
Step 2
IconPark 有個很棒的功能是支援批量選取與下載。在畫面中你可以批次點選想要下載的圖標,接著點選右上方的「批量下載 SVG」將所選取的所有圖標一次打包下載:
Step 3
在每個圖標右側有三個點的圖示,滑鼠移入後就會出現下拉選單,可以讓你複製 SVG、React、Vue 的程式代碼,並可單獨的下載單一圖標的 SVG 與 PNG 圖片格式檔案:
Step 4
在右側中有許多能客製化圖標樣式的功能選項,你能夠自定義像是:圖標大小、線段粗細、圖標風格、圖標顏色、端點類型以及拐點類型:
和其他類似的圖標資源不同的地方在於,IconPark 的圖標風格是能夠改變成設定多種顏色的圖標外觀,且還能對圖標的外部描邊、外部填充、內部描邊、內部填充…等等地方進行個別的顏色設定。
此外,最與眾不同的地方在於,你還能改變端點與拐點的類型,端點與拐點都分別有三種不同的呈現方式,讓你能夠在更細節的地方去進行圖標的外觀自定義。
以上就是 IconPark 的完整介紹。如果你還想了解更多線上圖標的資源網站,可以參考:Radix Icons、LineIcons、Emblemicons、Iconstore、Iconhub…等等好用的圖標庫。
IconPark 評價推薦優點
- 超過 1287+ 高品質圖標
- 支援 SVG, PNG, React, Vue…等等格式
- 可自定義圖標外觀樣式與顏色
相關文章
- Octicons – GitHub 官方開源 Icons 免費圖示下載,支援 Ruby, Rails, Jekyll 適合開發者使用
- LineIcons – 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
- Emblemicons – 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
- Iconhub – 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用
- Heroicons – 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
- Unicons Solid – 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
- IcoMoon App – 5500+ 免費線上圖標資源網站,提供 SVG 與 PNG 格式,並可自定義上傳圖標產生 Font 字體樣式
- Flaticon – 全球最大線上免費圖標庫,提供各種格式的圖示 Icons 需署名即可免費用於商業或個人用途
- Radix Icons – 15×15 開源圖標 Icons 免費下載,支援 Sketch、Figma 與 SVG 檔案格式
- Iconstore – 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
- Animated icons by Icons8 – 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
- CSS.GG – 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
新增留言