網路上有不少設計師將自行創作的免費圖示釋出,提通給需要的使用者下載使用,我也陸陸續續介紹過許多圖示集,有些甚至是開放原始碼專案,還能下載後編輯修改,對於要開發網路服務或應用程式來說確實相當省時省力。如果你在開發介面時會用到一些圖示圖案,可以先上網搜尋有無合適素材,確認授權方式後就能放心使用。

本文要介紹的「Potlab Icons」也是一款圖示集,不過很特別的是這是一套 SVG 動畫圖示組合,一共收錄 50 個圖案,包含幾個很常見到的主題,例如愛心、通知、重新整理、購物車、定位、放大鏡、電力、相機、照片、電話等等,這些圖案都以簡單線條構成,只要程式碼就能運作。

Potlab Icons 所有圖示都能從網站首頁預覽,使用方法也很簡單,點選圖示、下載 .html 格式檔案、複製原始碼即可,用於網頁專案開發也可自訂圖示大小或顏色,相當有用,若需要動態 SVG 圖示不妨看看這個網站提供的圖案是否符合需求。

網站名稱:Potlab Icons
網站鏈結:http://www.potlabicons.com/

使用教學

STEP 1

從 Potlab Icons 網站可以看到這些 SVG 動畫圖實際動起來的樣子,點選小圖會開啟更大張的預覽畫面,包括圖示名稱和下載鏈結,點選「Download」會獲取 .html 網頁格式而非一般常見的 .png 或 .gif。

STEP 2

下載後開啟 .html 就能看到圖示實際於瀏覽器呈現的樣貌,圖案也是會動的動態圖,如果要使用到自己的網頁專案,只要檢視原始碼將必要的段落複製即可。

值得一試的三個理由:

  1. 收錄 50 種圖案的免費 SVG 圖示集
  2. 可線上預覽,點選後下載 .html 格式
  3. 只要程式碼就能運作,可自訂圖示大小或顏色