矢量圖標常常用在欄目和標題的名稱前面，起到醒目突出的作用。通常情況下，大家會選擇用字體圖標，如FontAwesome，因為這方面的資源比較多，使用起來比較方便。而對于SVG矢量圖標，使用的人不是特別多，但我發現很多人用SVG來設計logo圖標，還有一些欄目圖標。

如果你正需要SVG矢量圖標設計網頁，那么你來對了地方，本文給你介紹逾千個SVG(可生成PNG)矢量圖標免費下載使用。

網站地址及使用介紹

首先打開網頁：https://icomoon.io/app/#/select 。

點擊任何一個圖標，然后點擊下面的“Generate SVG & More”。

這時進入新的網頁，看到剛才自己選擇的圖標。

直接獲得SVG圖標的HTML代碼

把鼠標移到圖標上，會看到 <> Get Code 文字，點擊它，可看到SVG圖標的HTML代碼。

下載SVG和PNG文件

點擊“Download”按鈕，可以直接下載SVG文件和PNG文件。（注！國內網絡不一定能下載）

解壓縮下載的文件，得到PNG圖片和SVG圖標的HTML文件。

總結

本文介紹了一個擁有逾千個SVG(可生成PNG)矢量圖標免費下載使用的網站，對一個網頁設計師來說，這是一個值得收藏的資料庫網站。

相關文章

• 純CSS偽元素創建的84個小圖標
• 512個CSS圖標形狀(icon shape)【收藏】
• 簡化svg文件中的對象可減小文件大小，6mb減到700kb
• 使用Inkscape優化SVG，文件從1600kb減到16kb
• 減小SVG體積的5個技巧，網頁加載時間從10秒降到2秒
• 詳細介紹CSS+SVG創建圓圈/圓環動畫

• [實例]純 CSS SVG 畫圓/圓環/圓弧動畫
• 比較和了解何時使用SVG與何時使用Canvas
• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區別比較表
• SVG 與 Canvas 的五大區別
• SVG圖片對比PNG、JPEG的5大優點

• svg circle stroke屬性設置實線邊框/虛線邊框/無邊框
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS+SVG實現環形/圓環文字效果【簡單實例】
• 純CSS實現環形文字效果
• 用表格(Table)數據創建SVG圖表【簡單實用】

標簽: SVG  PNG  CSS圖標