CSS.GG 是一套開放源碼、以 CSS 繪制而成的免費圖標(biāo)集，收錄超過 700 個圖標(biāo)圖案，提供 CSS、SVG、Figma 等多種格式，因為是以程序代碼刻制，整套圖標(biāo)文件案非常?。▋H有 316kb），如果不想加載整套圖標(biāo)集也可單獨取得特定的圖標(biāo)，透過在線預(yù)覽功能調(diào)整尺寸大小、顏色等設(shè)定，亦可取得 CSS、SVG 和 TSX 程序代碼。

這套圖標(biāo)除了開放原始碼，本身也有相當(dāng)精確、詳細的用戶界面（UI）圖標(biāo)設(shè)計，兼具輕量化、無障礙、敏捷和適用于 Retina 分辨率等特性，從網(wǎng)站可以下載整套 704 個圖標(biāo)圖案，包括 .xd、.svg、.css、.scss、.json 和 .xml 格式，也能個別取得圖標(biāo)或是將幾個需要的圖案打包產(chǎn)生對應(yīng)的程序代碼。

如果你使用 Figma、Adobe XD 向量圖形編輯器，CSS.GG 也有提供對應(yīng)的格式，可以讓用戶在軟件中快速取用特定圖標(biāo)圖案。

更多免費圖標(biāo)神器：

CSS.GG

網(wǎng)站鏈接：https://css.gg/

使用教學(xué)

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

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

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

在圖標(biāo)頁面右側(cè)可以取得 .xd、.svg、.css、.scss、.json 和 .xml 文件格式。

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

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

值得一試的三個理由：

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