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/

使用教學

開啟 CSS.GG 網站后點選「View all icons」查看完整圖標列表，從左側分類切換預覽的圖標類型，像是箭頭、品牌、按鈕、程序代碼、內容、設計、設備、文件、界面、多媒體、音樂和購物等等，右側編輯工具可調整圖標尺寸、顏色或找到下載鏈接。

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

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

在圖標頁面右側可以取得 .xd、.svg、.css、.scss、.json 和 .xml 文件格式。

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

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

值得一試的三個理由：

• 以 CSS 繪制而成免費圖標集，一共收錄超過 700 個圖標圖案
• 提供 CSS、SVG、Figma 等多種格式免費下載
• 可在線直接復制程序代碼，或是選取特定圖標后產生精簡的圖標程序代碼