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」查看完整圖示清單，從左側分類切換預覽的圖示類型，像是箭頭、品牌、按鈕、程式碼、內容、設計、裝置、檔案、介面、多媒體、音樂和購物等等，右側編輯工具可調整圖示尺寸、顏色或找到下載鏈結。

STEP 2

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

STEP 3

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

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

STEP 4

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

STEP 5

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