Basicons 用於產品設計和介面開發免費圖示集，186 個基本線條圖案下載

如果要設計產品或開發使用者介面，我們通常會需要風格相同的圖示集，若無法自行繪製或不希望付費購買也有很多替代方案，像是我個人很推薦的 Ionicons 收錄超過 700 個高品質圖示，還有 Zondicons 維持相當好的圖示設計，可整合到任何操作介面而不會看起來太過突兀或是造成使用上的障礙；Zwicon 則主打手工打造的高品質免費圖示集，看起來精緻且風格一致，能夠呈現優雅的視覺效果，使用 WordPress 的朋友可以試著以內建的 Dashicons 圖示集進行開發工作，在全新 5.5 版加入多達 71 個新圖示。

本文要推薦的「Basicons」是一款基礎、簡單的圖示設計，可用於產品開發設計，這套圖示集一共收錄 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 鏈結和原始碼。