如果你在製作專案或開發網站、應用程式需要用到圖示,網路上有非常多免費圖示可供下載選擇,通常只需要找到合適的設計風格,稍微研究一下授權方式就能使用,不需要自己重新開發一套圖示,特別是一些線條較為簡單、精簡的圖案設計很適合使用在各種情境,例如修改自 Font Awesome 的 Line Awesome、具完整自訂性的 Ikonate、手工打造的高品質圖示集 Zwicon 和 Feather Icons、Octicons 等等。
Icon Font
Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案
Line Awesome 超過 4000 個免費線稿圖示,修改自知名 Font Awesome
如果說到最知名的免費圖示字型(Icons Font),我想大家一定聽過 Font Awesome,這套圖示最初發佈於 2012 年,現今則由 1,544 個圖案組成,主要分為免費、開放原始碼和付費 Pro 圖示兩大類型,在使用 Font Scripts 網站中佔有 20% 市佔率,可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示,除了直接從官方網站或 GitHub 下載整套圖示集,亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。
Zwicon 手工打造高品質免費圖示集,566 種圖案收錄各種格式
開發一項新的專案前,可能會先去把相關資源找齊,其中在介面部分一定會碰到的問題是要使用那一套圖示做為主視覺,網路上已經有相當多免費圖示可供下載甚至是商業使用,若非必要其實不用再重新開發,我在上一篇「免費圖示 Unicons 收錄超過 1000 個向量圖示下載」提過一些之前介紹過的圖示素材,如果你想找圖示,也可直接瀏覽本站免費圖示分類或透過右側站內搜尋框找到更多相關文章。
Unicons 超過 1000 個向量圖示免費下載,完美像素放大縮小不影響解析度
如果要開發應用程式或網路服務,通常會需要整套樣式一致的圖示集,而這些圖案也不是太難找,網路上有不少以開放原始碼釋出、甚至可用做商業用途的圖示庫,例如我之前介紹過的 illustrio、Ionicons、Feather Icons 和 Octicons 等等(文章裡還有更多免費圖示集鏈結),這些圖案都有不太一樣的樣式設計,只要符合自己介面風格就能有相當好的效果,相較於自行開發整套圖示來說也更省時省事。
PaymentFont 免費支付圖示集,收錄 116 個常用付款方式向量圖檔(信用卡、PayPal)

在需要付費的網站中,通常會在購物車或網頁底部放上付款圖示,代表這裡支援信用卡或其他線上支付管道,例如 PayPal 或 Stripe 等等,當然這些圖案都能在網路找到,而且有著各式各樣的設計風格,透過圖片編輯軟體自行調整一下馬上符合你的網站,但如果你不想東湊西湊又要花時間修改,直接選用已經準備好的向量圖示集就更簡單了!若你有需要這些支付相關圖示請繼續閱讀下去。
Standart.io 簡單設計線條俐落圖示集,Sketch、SVG 格式免費下載
上週介紹過一套簡潔設計的免費圖示集「IconBros 持續更新高品質免費圖示集,SVG 和 PNG 格式下載」,相信有興趣的讀者朋友應該已經前往下載,類似簡單風格的圖示很多,也容易被應用到各種情境中使用。如果你偏愛這類設計專案,我將在免費資源網路社群網站裡陸續介紹、推薦給大家,而你可以先從「免費圖示」分類找到我之前推薦過的項目,簡單來說,網路上有非常多的資源,只要善加利用絕對可以幫助你省下許多重新開發造輪的時間。
IconBros 持續更新高品質免費圖示集,SVG 和 PNG 格式下載
Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式
Maki Icons 免費開放原始碼 300 圖示下載,採用 CC0 授權可商業用途
前天剛介紹「Ionicons:700 個開放原始碼高品質圖示字型免費下載」,文章裡有提到我最近將網站使用到的圖示集整合統一,除了讓顯示效果一致,最主要原因是可減少載入太多圖示庫而拖慢網頁效能。如果你在 WordPress 安裝不少外掛工具或從沒檢視過目前使用的佈景主題,我想可以找時間好好整理一下網站,通常能找出可能用不到但又被迫載入的元件,要知道自己的網站速度如何?可參考我寫的這篇「16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備」。