iconmelon 是一個相當好用的 svg 圖示資料庫，svg 圖示是比較新的 HTML5 技術，透過簡單的語法來載入向量圖案，利用 CSS3 來加入樣式，也具備檔案原有的濾鏡效果，優點是在跨瀏覽器時可以得到一致的效果，而且檔案較小，不過僅支援較新的瀏覽器。如果你開發網頁時也需要用到圖示，不妨來 iconmelon 找找，這裡有大量的免費圖示可以免費下載使用。

iconmelon 提供的圖示集包括 80 icons pack、Brainy Icons、Jolly Icons、Hearty Vector Icons、Simple Line Icons，使用者也可以自行上傳，跟一般圖示網站不同的是使用者無須下載成套的圖示檔案，只要點選你需要的圖示，按下網站右上角的 Download 即可打包為單一個 svg 檔，再利用 iconmelon 提供的語法教學即可把圖示嵌入網站。

網站名稱：iconmelon
網站鏈結：http://iconmelon.com/

使用教學

Step 1

開啟 iconmelon 後，從網頁裡點選你需要的圖示，選擇後會出現紅色框框，代表已經選取，網站右上角的下載按鈕會顯示你目前已經選擇了幾個圖示，選完後點選 Download 可以將圖示打包成一個檔案下載。

Step 2

下載後解壓縮，開啟 index.html 會顯示要載入這些圖示你可以使用的標籤名稱，看到這裡可能還是不懂要怎麼使用 svg 圖示，沒關係，點選網頁左上角的「How to Use」，會有詳細的使用說明。

Step 3

依照 iconmelon 提供的說明頁面指示，複製 icons.svg 檔的內容並貼上，或是從 index.html 檔案底部複製 js 程式碼，並指向 icons.svg 檔案路徑即可調用，說明頁面有相當詳細、完整的說明，使用時可以做為參考。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。