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

Geomicons

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

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

Geomicons

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

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

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

使用教學

STEP 1

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

Geomicons

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

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

Geomicons

STEP 2

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

Geomicons

值得一試的三個理由:

  1. 開放原始碼、平面化設計的免費圖示集
  2. 提供 svg 格式下載,可透過 JavaScript 載入網頁
  3. 相較於其他類似的網頁圖示來說更小、更輕量化
分享到...