Geomicons 免費 SVG 平面圖示集下載，為網頁設計開放原始碼

網頁圖示（Web icons）已經成為這幾年網頁設計相當重要且不可或缺的元素，印象中早期是採用插入圖片的作法，但這會因為載入大量圖片而造成請求數大幅增加等問題，連帶也會拖慢網頁速度，後來有人想出「CSS Sprites」將所有圖片合併成一張，再以 CSS 語法調整顯示的位置，就能讓圖片載入一次情況下做更有效率的應用。

最近很多介面已經逐漸改以 SVG 格式的圖示為主，可直接從 CSS 自訂又能調整尺寸而且沒有失真或模糊等問題，也可直接將語法寫入原始碼中，大幅降低圖示佔用的流量或頁面請求數。

本文要推薦的「Geomicons」是一款為網頁設計、開放原始碼圖示集，相較於其他類似的網頁圖示來說更小、更輕量化，而且載入時在網頁請求數部分比其他同類服務少，因此可以說 Geomicons Open 是以效能角度設計而建構出的免費圖示集。

除此之外，Geomicons 是一款「手工」編寫的圖示，不是以傳統向量圖繪圖軟體製作，避免這些軟體加料讓檔案膨脹變大，如果你正在尋找乾淨簡單又一目了然的圖示設計，可先到 Geomicons 範例網頁查看這些圖示有無符合自己需求。

網站名稱：Geomicons
網站鏈結：https://jxnblk.com/geomicons-open/ （GitHub）

使用教學

STEP 1

開啟 Geomicons 的 Demo Page 會看到所有圖示，算了一下數量是 56 個，線條構成都很簡單，適用於各種顏色或大小，也能透過 CSS 樣式表直接自訂大小或顏色等屬性。

從最下方找到「Download」按鈕下載所有圖示，不過剛才試了一下好像無法下載，但沒有關係，所有圖示都是開放原始碼且放在 GitHub 頁面上，我們只要前往 GitHub 一樣可以從 Releases 找到相關檔案。

如果你熟悉 NPM 套件管理工具指令，也能利用網站提供的指令快速下載所有圖示。

STEP 2

若你想將 Geomicons 圖示運用到自己的網站、部落格或網路服務，建議可以在 GitHub 找到相關使用說明，例如在網站載入 JavaScript 檔案，透過 data-icon 屬性來載入你需要的圖示圖案，跟一般網頁圖示的使用方法差不多，有興趣的話可以自己研究一下，在這裡就不多做贅述。