如果要設計產品或開發(fā)界面，我們通常會需要風格相同的圖標，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎、簡單的圖標設計，可用于產品開發(fā)設計，這套圖標一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預覽圖標，也能切換不同尺寸下的呈現樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標圖案或取得源碼。

Basicons也有一個內嵌（Embed）語法產生器，能產生帶入圖標圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網站一次下載所有圖標，再依照需求使用即可。這套圖標集以MIT授權方式釋出。（即可以免費使用、修改、出售，附上協議即可）

Basicons

網站鏈接：https://basicons.xyz/

使用教學

STEP 1

開啟Basicons 從首頁就能預覽完整圖標圖案，這套圖標特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應該能夠很快速聯想到圖標代表的意思（否則就失去圖標的意義…），可以稍微預覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。

STEP 2

從右側的「Customize」自訂選項可以調整圖標尺寸、線條粗細，調整后會直接呈現于左側。

STEP 3

點選要下載的圖標后再按下右側的「Download」就能下載.svg圖標格式（或是從上方點選Download All將所有186個圖標完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復制程式碼。

除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。

值得一試的三個理由：

1. 簡單的免費圖標集，收錄186 種圖標圖案供免費下載使用
2. 可一次打包下載完整svg 格式圖標，或單獨復制產生svg 源碼
3. 線上調整預覽不同的尺寸大小、筆觸粗細效果

更多免費圖標：