無論是網頁設計、應用程式開發或製作報告、投影片,我們很常會需要一些圖示來強化畫面、功能或提升整體操作體驗,但對大多數的人來說要自行設計一套相同風格圖示並不是容易的事,因此才會有販售圖示或提供免費圖示下載的網站。我介紹過不少類似的素材資源,從閱讀次數可以發現大家都對這主題很感興趣。
Icons8 是我收藏在書籤一段時間、但還沒有拿出來介紹的免費圖示網站,跟一般類似網站差不多,Icons8 以提供免費的平面化設計圖案為主,總數將近四萬個!數量非常豐富,網站亦提供各種格式、尺寸大小和配色,使用者也能自己客製。
比較特別的是 Icons8 除了將圖示按照類別分類外,還利用不同平台的設計風格準則加以區隔,例如有 iOS10、Windows、Android、Google、Office,你可能很難立即在腦海中聯想出某個作業系統的設計風格,但只要透過篩選方式,就能讓所有 Icons8 網站的圖示風格一致。
Icons8 免費開放網站所有 PNG 格式、尺寸不超過 100×100 的圖示供使用者下載,免費使用的條件是必須要加註一個鏈結連回 Icons8(可參考 Free License 說明),要求並不會太嚴苛。如果你需要其他向量圖格式,例如 SVG、EPS、PDF、Font 字型或 SVG Set 就必須付費取得。
網站名稱:Icons8
網站鏈結:https://icons8.com/
使用教學
STEP 1
開啟 Icons8 網站後點選上方的「Icons」來開啟圖示瀏覽頁面,Icons8 的介面操作方式還算簡單,從左側分類找到需要的圖示類別,上方是平台的設計風格篩選,下方則有各種圖示類型,當然你也能輸入關鍵字直接透過搜尋功能查找。
STEP 2
點選任一圖示圖案後,右側會開啟更大的預覽畫面,從最右方工具列可以切換不同設計風格,雖然是同一種圖案,但在不一樣的風格下也會有不同呈現感覺。
STEP 3
點選圖示下方的尺寸選擇功能,Icons8 提供 100x100px 以下 PNG 格式圖示下載!如果你需要更大圖示或者其他向量格式,旁邊出現鎖頭圖案必須要付費才能獲取。
點選後按下方的「Download」紅色按鈕就能免費下載,非常簡單。
STEP 4
Icons8 內建基本的編輯器模式,無須額外下載或安裝軟體,就能直接於瀏覽器內對你選擇的圖示稍作修改,例如加上圖案、文字、裁切成其他形狀,調整後能在網站裡預覽及下載。
STEP 5
如果你想將 Icons8 圖示使用於網頁開發,它也能產生 HTML 程式碼,包括 Base64 編碼格式或者產生 CDN 適用的網址(這項功能是 MaxCDN 提供,速度還蠻快的而且沒有流量限制),如果你想直接將圖示使用到網站裡,透過外部鏈結即可快速取用。
不過前面有提到,使用 Icons8 免費圖示的條件是必須在網站或專案裡放上一個反向鏈結連回 Icons8,在取得圖示網址時下方也會提供連回 Icons8 的原始碼。
STEP 6
說了那麼多,如果你想一次從 Icons8 下載「所有」免費圖示,一共 38,200 個,網站也提供這項超大福利!只要簡單註冊一個帳號,就能將所有圖示下載!
開啟 https://icons8.com/download-all-packs 頁面後點選右側的「Download icons only」。若你想要試試看從 App 裡搜尋圖示的話,也可以點選另外一個選項,兩者取得的圖示是相同的,只是另一種方式會多一個 Mac 應用程式。
填入你要使用的帳號名稱、Email 和密碼,登入後就能下載 Icons8 免費提供的所有圖示打包壓縮檔。