Zwicon 手工打造高品質免費圖示集，566 種圖案收錄各種格式

開發一項新的專案前，可能會先去把相關資源找齊，其中在介面部分一定會碰到的問題是要使用那一套圖示做為主視覺，網路上已經有相當多免費圖示可供下載甚至是商業使用，若非必要其實不用再重新開發，我在上一篇「免費圖示 Unicons 收錄超過 1000 個向量圖示下載」提過一些之前介紹過的圖示素材，如果你想找圖示，也可直接瀏覽本站免費圖示分類或透過右側站內搜尋框找到更多相關文章。

本文要推薦的「Zwicon」是一套來自匈牙利的免費圖示集，這套圖示的特色是純手工打造，一共有 566 個圖案、26 種分類，這些圖示都是以 24px 網格做為基礎，採用 1px 線條粗細和 2px 圓角效果，看起來相當精緻且風格一致，能夠呈現優異的視覺效果。

Zwicon 是以滿足 UX / UI 設計師需求而生，因此非常適合各種類型的開發項目，也會在遇到問題和缺少圖案時更新圖庫。Zwicon 附帶 Sketch、InVision Studio 和 Figma 相關檔案，特別注意分類命名，因此可以很輕鬆瀏覽和找到需要的圖示檔案，除此之外也提供 .svg、.jpg、.png、.pdf 和 .iconjar 等格式。

未來 Zwicon 還會支援 Axure RP、Adobe XD 和桌面端字型。

如果你要將圖示運用於網站或網頁應用程式，Zwicon 也有網頁字型（webfont）格式和相關檔案，只要載入 .css 樣式表，再以程式碼就能載入特定圖案。

網站名稱：Zwicon
網站鏈結：https://www.zwicon.com/

使用教學

STEP 1

開啟 Zwicon 網站，點選「Icon set」可找到完整的圖示集預覽，透過上方搜尋框輸入關鍵字快速查找特定的圖示圖案，或以分類瀏覽，在寫這篇文章時 Zwicon 一共收錄 566 個圖示。

點選任一圖示，會開啟在使用 Webfont 時載入圖示可使用的樣式語法。如果你想各別下載圖示，還可以點選下方「Download Svg」下載 .svg 格式檔案。

STEP 2

點選 Zwicon 首頁的「Free Download」免費下載圖示集，這邊要注意的是網站提供兩種下載方式：以 PayPal 贊助或發佈一則 Twitter 推文，贊助的話最少是 $5 美金，這裡我們直接選擇「Pay with a tweet」就能免費下載。

依照相關說明進行到最後一個步驟，點選「Access」就能下載  Zwicon 圖示集。

STEP 3

下載後解壓縮，會取得所有 Zwicon 格式和相關檔案，這時候打開「How to use」查看使用說明。如果是使用於網站或網頁應用程式，可以載入 .css 樣式表，再透過程式碼載入特定的圖示。

這裡有提到 Zwicon 是採用「Creative Commons 姓名標示-禁止改作 4.0 國際」授權，因此可自由使用，包括商業用途，但必須標註出處，而且改作後不得將素材重新散布。

STEP 4

至於完整的圖示圖案我就不在文章裡放上，想預覽的話可直接前往 Zwicon 網站，點選上方的「Icon set」就能找到完整圖示。