CSS.GG 超過 700 個以 CSS 製作免費圖示 SVG、Figma 多種格式下載

CSS.GG 超過 700 個以 CSS 製作免費圖示 SVG、Figma 多種格式下載

CSS.GG 是一套開放原始碼、以 CSS 繪製而成的免費圖示集,收錄超過 700 個圖示圖案,提供 CSS、SVG、Figma 等多種格式,因為是以程式碼刻製,整套圖示檔案非常小(僅有 316kb),如果不想載入整套圖示集也可單獨取得特定的圖示,透過線上預覽功能調整尺寸大小、顏色等設定,亦可取得 CSS、SVG 和 TSX 程式碼。

這套圖示除了開放原始碼,本身也有相當精確、詳細的使用者介面(UI)圖示設計,兼具輕量化、無障礙、敏捷和適用於 Retina 解析度等特性,從網站可以下載整套 704 個圖示圖案,包括 .xd、.svg、.css、.scss、.json 和 .xml 格式,也能個別取得圖示或是將幾個需要的圖案打包產生對應的程式碼。

如果你使用 Figma、Adobe XD 向量圖形編輯器,CSS.GG 也有提供對應的格式,可以讓使用者在軟體中快速取用特定圖示圖案。

CSS.GG
https://css.gg/

使用教學

STEP 1

開啟 CSS.GG 網站後點選「View all icons」查看完整圖示清單,從左側分類切換預覽的圖示類型,像是箭頭、品牌、按鈕、程式碼、內容、設計、裝置、檔案、介面、多媒體、音樂和購物等等,右側編輯工具可調整圖示尺寸、顏色或找到下載鏈結。

CSS.GG

STEP 2

點選圖示開啟詳細資訊頁面,會有更大的預覽圖、名稱、瀏覽次數、下載次數、程式碼行數(別忘記 CSS.GG 所有圖案都是程式碼畫出來的)、更新日期和分類。

CSS.GG

STEP 3

從右上角切換不同的顏色預覽,或是按下「+」將它選取、加入下載名單。

CSS.GG

在圖示頁面右側可以取得 .xd、.svg、.css、.scss、.json 和 .xml 檔案格式。

CSS.GG

STEP 4

從每個圖示下方可以直接取得 CSS、SVG 或 TSX 原始碼,無論是要快速複製,或下載特定檔案格式都很簡單,最下方也有 HTML、CSS、JSON 和 XML 載入和顯示圖示的原始碼,只要複製、貼上就能顯示圖案。

CSS.GG

STEP 5

如果不需要整套 CSS.GG 圖示集,也可單獨選取需要的圖案,回到首頁後透過右上角的「Icons Selected」僅載入特定的圖示程式碼,對於不希望被圖示佔用太多大小的開發者來說是很有用的功能,只是 CSS.GG 本身也不龐大就是了,圖示大多都是由數行程式碼組成,相較於一些圖片圖示來說已經精簡很多。

CSS.GG

值得一試的三個理由:

  1. 以 CSS 繪製而成免費圖示集,一共收錄超過 700 個圖示圖案
  2. 提供 CSS、SVG、Figma 等多種格式免費下載
  3. 可線上直接複製程式碼,或是選取特定圖示後產生精簡的圖示程式碼
分享到...