CSS.GG - 700+ 開源免版權圖標免費下載，支援 Figma 格式檔案，並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載

Q: 如何自訂 CSS.GG 圖標的顏色和大小？

CSS.GG 圖標本質上由 CSS 屬性繪製，用標準 CSS 就能控制外觀。修改顏色設定 color 屬性（偽元素會繼承），調整大小用 transform: scale()。也可以加上 transition 屬性讓圖標在 hover 時產生動畫效果。

Facebook Line Messenger Telegram

CSS.GG 是一套用純 CSS 偽元素繪製的開源圖標庫，收錄超過 700 個圖標、6,000 種以上字形組合，支援 CSS、SVG、TSX、Figma、Adobe XD、JSON、XML 共 7 種格式匯出。不過要注意，從 2.1.2 版開始授權條款已從 MIT 改為自訂條款，商用需取得作者授權。

網站名稱：CSS.GG — 700+ CSS Icons, Customizable, Retina Ready & API
網站網址：https://css.gg/

CSS.GG 是什麼？

CSS.GG 由開發者 Astrit 建立，每個圖標都用 CSS 的 ::before 和 ::after 偽元素搭配 box-shadow、border-radius、transform 等屬性手工繪製，完全不需要字體檔案或圖片資源。所有圖標基於 24px 網格設計，原生支援 Retina 高解析度螢幕。

截至 2026 年 5 月，CSS.GG 在 GitHub 上標示為 700+ 圖標、6,000+ 獨特字形組合，涵蓋 UI 介面、按鈕、社交媒體、檔案類型等常用分類。如果你需要更多風格的圖標資源，可以參考我們介紹過的 Tabler Icons、Feather Icons 以及 Remix Icon 等開源圖標庫，也可以看看 FreeImages 線上圖庫的整理。

授權條款變更：MIT 已改為自訂條款

這是使用 CSS.GG 前最需要留意的重點。根據 GitHub 儲存庫的 LICENSE.md，2.1.2 版之前的 CSS.GG 採用 MIT 授權，可以自由商用。但從 2.1.2 版起，授權條款已改為自訂條款，主要限制包括：

商用需授權：個人非商業用途免費，但商業用途必須取得作者 Astrit 的明確書面許可
禁止衍生作品：不得修改、改編或基於圖標庫建立衍生作品
禁止複製功能：不得將圖標庫的功能或設計要素複製到其他軟體或平台
必須標註來源：使用時須標明作者 Astrit 及 CSS.GG 品牌名稱

如果你的專案需要商用圖標，建議在採用前先向作者確認授權，或改用同樣基於 MIT 授權的替代方案，例如 Heroicons（Tailwind CSS 官方推薦）或 Simple Icons（CC0 授權的品牌圖標庫）。

純 CSS 圖標的技術優勢與限制

相比傳統 Icon Font 方案（如 Font Awesome），CSS.GG 的純 CSS 路線有幾個明確的技術差異：

零外部依賴：不需要載入 .woff、.ttf 等字體檔案，少一個 HTTP 請求就能顯示圖標
不會出現 FOUT：沒有「字體載入前顯示方塊」的問題，頁面渲染過程中圖標不會閃爍
Retina 原生支援：向量特性確保在任何解析度下保持清晰
用 CSS 就能客製化：透過 color、transform: scale() 等標準屬性控制顏色和大小

但純 CSS 圖標也有限制。圖標數量固定在 700 多個，遠少於 Font Awesome 免費版的 2,000+ 個或 Ionicons 的 1,300+ 個。而且 CSS 偽元素的除錯不如 SVG 直覺，在複雜佈局中偶爾會遇到對齊問題。如果你更重視圖標數量和客製化彈性，IconPark（2,400+ 圖標）或 Flaticon（全球最大圖標庫）可能是更適合的選擇。

操作教學：搜尋、下載與整合圖標

步驟一：瀏覽全部圖標

進入 css.gg 首頁後，往下滑動頁面，點擊「View all icons」按鈕即可進入完整的圖標瀏覽頁面，所有 700 多個圖標會以網格排列呈現。

CSS.GG 查看所有圖標 — 點擊 View all icons 進入完整圖標庫

步驟二：搜尋與篩選圖標

進入瀏覽頁面後，左側顯示分類清單（介面、按鈕、社交等），也可以直接用頁面上方的搜尋框輸入關鍵字。操作邏輯跟 Iconhub 和 LineIcons 等圖標網站類似。

步驟三：下載所需格式

點擊選定的圖標後，右側面板會展開格式選項。可以從 .css、.svg、.tsx、.fig、.xd、.json、.xml 這 7 種格式中選擇，按下「Download」即可。如果你使用 IcoMoon App 管理圖標字體，可以選 JSON 格式匯出後再匯入。

步驟四：線上複製程式碼

除了下載檔案，每個圖標下方也會顯示 CSS、SVG、TSX 三種格式的程式碼，可以直接複製貼到專案中使用。

CSS.GG 線上複製 CSS、SVG、TSX 程式碼 — 直接複製程式碼貼入專案即可使用

整合方式：CDN、npm 與 API

CDN 快速引入

在 HTML 的 <head> 區段加入：

<link href="https://css.gg/c/css?=|icon-name|" rel="stylesheet">

接著在 HTML 中使用對應的 class 名稱：

<i class="gg-software-download"></i>

你也可以透過 Cloudflare CDN 或 jsDelivr 等公共 CDN 載入，提升全球存取速度。WordPress 網站可搭配快取外掛來快取 CSS 資源。

npm 套件安裝

對於使用模組化打包工具（Webpack、Vite、Rollup 等）的專案：

npm install css.gg
# 或
yarn add css.gg

安裝後可以在 JavaScript 中 import 特定格式的圖標。例如在 React 專案中匯入 TSX 元件：

import { SoftwareDownload } from 'css.gg/dist/icons/tsx/Software-Download'

function App() {
  return <SoftwareDownload />
}

這種方式支援 Tree-shaking，打包工具只會將實際用到的圖標編譯進最終 bundle，不會造成多餘體積。

RESTful API 程式化取用

CSS.GG 提供 RESTful API，可在後端或自動化流程中取得圖標資料：

GET https://css.gg/c/css?=|icon-name|    # 取得 CSS 格式
GET https://css.gg/c/svg?=|icon-name|    # 取得 SVG 格式
GET https://css.gg/c/tsx?=|icon-name|    # 取得 TSX 格式

CSS.GG 與其他免費圖標庫比較

圖標庫	圖標數量	授權方式	技術特點	適合場景
CSS.GG	700+	自訂條款（商用需授權）	純 CSS 偽元素繪製，零依賴	個人專案、追求極致輕量化
Tabler Icons	558+	MIT	SVG 格式為主，可線上客製化	需要大量客製化的儀表板
Feather Icons	200+	MIT	極簡設計風格，統一線條粗細	簡約風格的 Web 應用
Heroicons	300+	MIT	Tailwind CSS 官方推薦	使用 Tailwind 的專案
Ionicons	1,300+	MIT	跨平台支援 iOS/Android/Web	混合式行動應用開發
IconPark	2,400+	MIT	字節跳動出品，線上客製化豐富	需要大量圖標的大型專案
Octicons	260+	MIT	GitHub 官方出品	開發者工具和技術文件
Emblemicons	1,000+	MIT	涵蓋產品開發、設計、業務展示	商業應用和產品設計

主流開源免費圖標庫比較一覽

從表格可以看出，CSS.GG 在圖標數量上處於中等水平，純 CSS 技術路線是它最大的差異化優勢。但新的自訂授權條款限制了商用自由度，這是選擇時必須衡量的關鍵因素。如果你的專案需要商用且不想處理額外授權，MIT 授權的替代方案會更省心。

在 Figma 與 Adobe XD 中使用

在 Figma 中，可以安裝「css.gg Icon Set」社群插件，安裝後就能直接搜尋並插入圖標。也可以下載 .fig 格式的檔案直接在 Figma 中開啟編輯。

Adobe XD 使用者可以下載 .xd 格式檔案匯入使用。Sketch 使用者雖然沒有專屬格式，但可透過 SVG 格式匯入。設計師在 Figma 中使用的圖標名稱會與前端 CSS class 名稱一致，從設計稿到程式碼的轉換不需要額外對照表。

如果你需要搭配其他設計資源，可以參考 Freebiesbug 設計師資源素材庫，提供 PSD、Illustrator、Sketch、Figma 等多種格式的免費設計資源。

CSS.GG 評價優缺點

700+ 圖標，純 CSS 技術零依賴
支援 7 種格式（CSS/SVG/TSX/FIG/XD/JSON/XML）
提供 CDN、npm 與 API 多種整合方式
原生支援 Figma 與 Adobe XD
Retina 高解析度完美支援
缺點：2.1.2 版起商用需授權，圖標數量相對少

誰適合用 CSS.GG？誰不適合？

適合：前端開發者做個人專案或作品集，想要零依賴的輕量圖標方案；設計師在 Figma 中快速取用圖標；教學用途或技術展示
不適合：需要大量圖標（超過 700 個）的商業專案；需要自由商用且不想處理授權流程的團隊；需要彩色或複雜圖示的場景（CSS.GG 只支援單色線條風格）

下一步行動建議

確認授權需求：如果你的專案涉及商業用途，先到 CSS.GG 授權頁面了解最新條款，或直接聯繫作者確認。如果需要免授權的替代方案，優先考慮 MIT 授權的 Tabler Icons 或 Heroicons
測試 CDN 引入：在新專案或測試環境中用 CDN 方式引入幾個圖標，確認渲染效果和載入速度符合預期
比較後再決定：根據你的圖標數量需求、授權要求和設計風格，對照上面的比較表選擇最適合的圖標庫。數量需求大的可以看 IconPark 或 Ionicons，品牌圖標需求可以看 Simple Icons

常見問題 FAQ

CSS.GG 可以免費商用嗎？

截至 2026 年 5 月，從 2.1.2 版起，CSS.GG 的授權已從 MIT 改為自訂條款。個人非商業用途可免費使用並需標註來源，但商業用途必須取得作者 Astrit 的明確書面許可。具體授權內容請參考 CSS.GG 授權頁面。如果你使用的是 2.1.2 之前的舊版本，仍適用 MIT 授權。

CSS.GG 與 Font Awesome 有什麼不同？

最大差異在實作方式。Font Awesome 使用 Icon Font 技術，需要載入字體檔案；CSS.GG 使用純 CSS 偽元素繪製圖標，不需要字體檔案，少了一個 HTTP 請求。不過 Font Awesome 免費版圖標數量遠多於 CSS.GG（約 2,000 個 vs 700+ 個），功能也更全面。如果你的專案只需要少量常用圖標且追求輕量化，CSS.GG 有優勢。

如何自訂 CSS.GG 圖標的顏色和大小？

CSS.GG 圖標本質上由 CSS 屬性繪製，用標準 CSS 就能控制外觀。修改顏色設定 color 屬性（偽元素會繼承），調整大小用 transform: scale()。也可以加上 transition 屬性讓圖標在 hover 時產生動畫效果。

CSS.GG 支援哪些前端框架？

因為是純 CSS 實作，在任何能引入 CSS 的環境都能使用，包含 React、Vue、Angular、Svelte 等。CSS.GG 也提供 TSX 格式方便 React 開發者以元件方式匯入。在 Vue 和 Angular 中，只需引入 CSS 檔案後使用對應 class 名稱即可。

CSS.GG 圖標會影響網站載入速度嗎？

相較於 Icon Font 方案，CSS.GG 對載入速度的影響更小。不需要載入字體檔案，少了一個 HTTP 請求，CSS 的解析和渲染對瀏覽器來說是非常高效的操作。如果只用少數幾個圖標，可以只引入特定圖標的 CSS 而非整個圖標庫，對效能的影響幾乎可以忽略。搭配良好的 WordPress 網站加速技巧和穩定的主機服務，整體表現會更好。