編者按：本文推薦兩個免費可商用的圖標素材網站，兩個都提供了一致性風格很高的線性圖標集，超過500個全都可商用，趕緊來收~

本文要推薦的「Feather Icons」是一款免費、開放原始碼矢量圖標集，收錄八大類型、總共 233 個圖示，這些圖示設計在 24×24 網格上，無論在功能、一致性或簡約設計都具有相同特性。圖標本身設計是由簡單線條構成，宛如「羽毛」般輕巧，因此很適合使用于任何的開發項目。

如果你只單獨需要其中幾個圖案，只要點擊圖示就能下載 SVG 矢量格式，調整成任何你想使用的大小，Feather Icons 亦提供所有圖示打包、快速下載。除此之外，Feather 是開放原始碼項目，可以在 GitHub 找到更多說明。

Feather Icon

STEP 1

開啟 Feather 網站后可以看到所有收錄在這套圖標集的預覽。

一共有八種圖示類型，總數量超過 200 個！點擊任何圖案即可下載單獨的 SVG 格式。透過你手邊的矢量圖編輯工具來編輯、調整成你需要的大小或格式。

STEP 2

如果想一次打包、下載所有圖案，可點擊網站上方的「Download」取得壓縮檔，解壓縮后就能獲取所有圖標的?SVG 格式！圖標也會依照類別放在不同的分類目錄下。

Typicons

Typicons?是一款開放原始碼、設計線條簡單的免費圖標集，一共有 336 種圖案，使用者只需要從 Github 網站下載特定檔案，再將它載入網站或項目就能使用，其中包含原始的 SVG 格式，使用者也能依照自己需求來建構你自訂的圖示集。

STEP 1

開啟 Typicons 網站后，可以看到所有圖標集里的圖案，目前一共 336 種，其實好像沒有限定哪一種類型的操作界面或應用程序才能用，種類還蠻完整的。

STEP 2

將鼠標游標移動到圖標上方，除了會放大顯示，還能從下方得知這個圖示的名稱，這是用來載入顯示某個圖標使用的，稍后我會再提到更詳細的使用方法。

STEP 3

點擊 Typicons 網站上方的「Download」按鈕連接到 GitHub，可以取得原始碼檔案，最主要的是 /src/font/ 資料夾下的檔案，不知道語法怎么寫，請參考 demo 網頁檔的原始碼寫法。

STEP 4

在「How to use Typicons」也有簡易教學，其實只要放上一段載入 typicons.min.css 樣式表的語法，或者從你現有的 CSS 加入 @font-face 載入 .eot、.woff、.ttf、.svg 等幾個必要檔案就能使用，網站上提供范例寫法，路徑稍微改一下就能使用。

本文前面第二個步驟顯示的圖示名稱其實就是 CSS 樣式，透過 <span> 標記的 class 來載入圖示就能使用，更多設定方法可以參考官方網站的說明文件。

「圖標素材網站」

1. 《酷站兩連發！收錄高達130萬免費圖標素材的兩個網站》
2. 《酷站兩連發！免費打包40,000個圖標+日本圖標素材站》
3. 《酷站兩連發！專門提供免費簡約圖標素材的兩個網站》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com