Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
CSS.GG – 700+ 開源免版權圖標免費下載，支援 Figma 格式檔案，並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
CSS.GG 提供了開源的 CSS、SVG 與 Figma UI Icons，目前已經開發了 700+ 以上的免費圖標，並且，所有的圖標都支援 Figma 格式開啟，並支援：.css、.svg、.tsx、.fig、.xd、.json、.xml...等等格式，你可以根據你所需要的格式免費下載該任何圖標。
CSS.GG 是一套由開發者 Astrit 所打造的開源圖標庫，最大的特色在於所有圖標都以純 CSS 偽元素技術繪製而成，完全不需要依賴字體檔案或圖片資源。截至目前為止，CSS.GG 已經收錄超過 700 個圖標，涵蓋了 UI 介面設計中最常用的各種圖示，像是箭頭、按鈕、社交媒體、檔案類型等等，並提供多達 6,000 種以上的獨特字形組合變化供開發者運用。
所有圖標基於 24px 網格設計，原生支援 Retina 高解析度螢幕，在任何裝置上都能保持清晰銳利的顯示效果。CSS.GG 支援 .css、.svg、.tsx、.fig、.xd、.json、.xml 等 7 種格式匯出，不管是前端開發者還是 UI 設計師，都能依照自己的工作流程選擇最適合的格式。如果你正在尋找更多類似的資源，可以參考我們之前介紹過的 Tabler Icons、Feather Icons 以及 Remix Icon 等優質開源圖標庫，也可以看看我們整理的 FreeImages 線上圖庫介紹。
網站名稱：CSS.GG — 700+ CSS Icons, Customizable, Retina Ready & API
網站網址：https://css.gg/
目錄
CSS.GG 是什麼？純 CSS 圖標庫核心特色解析
在網頁開發領域，圖標的呈現方式經歷了好幾個階段的演進。早期我們使用圖片 sprite，後來 Icon Font 成為主流，而 CSS.GG 則選擇了一條更純粹的路線。它的每個圖標都是用 CSS 的 ::before 和 ::after 偽元素，搭配 box-shadow、border-radius、transform 等屬性手工「畫」出來的。這種做法的好處非常明顯：沒有任何外部資源需要載入。
整套圖標庫收錄超過 700 個圖標，依照不同用途分為按鈕、介面、社交、設計、文字編輯等數十個分類。每個圖標都可以在線上即時預覽，也支援一鍵複製 CSS、SVG 或 TSX 程式碼，直接貼進你的專案就能使用。對於追求開發效率和輕量化網站的人來說，CSS.GG 是一個相當值得嘗試的選擇。如果你之前用過 SVG Repo 或 Heroicons.dev，那麼對這種線上圖標資源的使用模式應該不陌生。
CSS.GG 的整個官方網站本身就是一個展示品，所有頁面元素包含導航、按鈕、圖標展示區塊，全部都是用 CSS 繪製而成，沒有任何圖片檔案。這也從側面證明了純 CSS 圖標在實際應用上的可行性與視覺表現力。如果你之前用過 SVG Repo 或 Heroicons.dev 這類線上圖標資源，那麼對 CSS.GG 的操作模式應該不陌生。
CSS.GG 技術優勢：為什麼選擇純 CSS 圖標
相比傳統的 Icon Font 方案（像是 Font Awesome），純 CSS 圖標在幾個關鍵面向上展現了明顯的技術優勢。
- 零外部依賴：不需要載入 .woff、.ttf 或 .eot 等字體檔案，少一個 HTTP 請求就多一分速度。這對於講究網站效能的開發者來說是很大的吸引力。如果你也關心網站速度，可以參考我們整理的 WordPress 網站加速技巧。
- 效能表現優異：CSS 偽元素方案天生就比字體渲染來得快。瀏覽器不需要解析字體檔案、不需要進行文字渲染的複雜計算，直接用 CSS 繪圖指令就能呈現圖標。搭配 圖片壓縮工具 和 SVGOMG 等優化方案，整體載入速度可以再進一步提升。
- Retina 原生支援：向量特性意味著在任何解析度下都能保持清晰，從普通螢幕到 4K Retina 顯示器都不會出現模糊或鋸齒。這點對於現代網站來說尤其重要。
- 高度客製化：透過標準的 CSS 屬性就能控制圖標的顏色、大小、旋轉角度，甚至可以加上過渡動畫。不需要額外學習任何框架或語法，只要會 CSS 就能上手。你也可以搭配 CSS Gradient 或 CSS Background Patterns 等工具讓圖標融入更豐富的視覺設計中。
從架構面來看，CSS.GG 的圖標不會佔用 DOM 中的額外節點（偽元素不算在 DOM tree 中），這對於複雜頁面的渲染效能是有幫助的。而且因為不依賴字體，所以不會出現「字體載入完成前顯示方塊」的 FOUT（Flash of Unstyled Text）問題。如果你對網頁效能有興趣，可以看看我們關於頁面載入速度對 SEO 排名影響的分析文章。
MIT 授權條款與商用須知
CSS.GG 的所有圖標都採用 MIT 授權條款 釋出。MIT 是目前最寬鬆且被廣泛接受的開源授權之一，你基本上可以做任何事情：商業使用、個人專案、修改原始碼、重新分發、甚至將它整合到你自己的付費產品中販售，完全合法。
唯一的條件是，你需要在你的專案中保留原始的版權聲明與 MIT 授權條款副本。這通常只需要在專案的 LICENSE 檔案或關於頁面中加上一段聲明文字即可。比起 iconmonstr 採用的 CC0 授權（完全放棄版權）或 Simple Icons 的 CC0 方式，MIT 授權的要求稍微多了一點，但依然是非常自由的。
在實際商用場景中，多數開發者會把授權聲明放在專案根目錄的 NOTICE 或 LICENSE 檔案中，或者在前端程式碼的註解區塊裡標注來源。如果你打算將 CSS.GG 的圖標用於客戶專案或商業產品，建議保留授權聲明以確保合規。更多免費可商用的圖標資源，也可以看看 FreeImages 或 FindIcons 的介紹。需要製作品牌標誌的話，DesignEvo 也是一個不錯的選擇。
CSS.GG 操作教學：搜尋、瀏覽與下載圖標
使用 CSS.GG 下載圖標的流程非常直覺，基本上四個步驟就能完成。以下帶你走一遍完整的操作流程。
步驟一：瀏覽全部圖標
進入 css.gg 首頁後，往下滑動頁面，你會看到一個「View all icons」的按鈕。點擊之後就能進入完整的圖標瀏覽頁面，所有 700 多個圖標會以網格排列方式呈現。
步驟二：搜尋與篩選圖標
進入圖標瀏覽頁面後，左側會顯示分類清單，你可以依照介面、按鈕、社交等類別來篩選。或者直接使用頁面上方的搜尋框，輸入關鍵字就能快速找到你需要的圖標。這個操作邏輯跟 Iconhub 和 LineIcons 等圖標網站很類似。
步驟三：下載所需格式
點擊你選定的圖標後，右側面板會展開格式選項。你可以從 .css、.svg、.tsx、.fig、.xd、.json、.xml 這 7 種格式中選擇需要的項目，然後按下「Download」按鈕就能直接下載檔案。如果你使用 IcoMoon App 來管理圖標字體，也可以選擇 JSON 格式匯出後再匯入。
步驟四：線上複製程式碼
除了下載檔案，CSS.GG 也提供線上即時預覽功能。每個圖標下方都會顯示 CSS、SVG、TSX 三種格式的程式碼，你可以直接複製貼上到你的專案中使用，非常方便。這點跟 Iconpie 的操作邏輯相似，都是為了讓開發者能快速整合。如果你需要轉換圖片格式，Free Online File Converter 也能幫上忙。
CSS.GG 整合教學：CDN、npm 與 API 使用方式
下載檔案只是其中一種使用方式，CSS.GG 還提供了 CDN、npm 套件管理器以及 RESTful API 等多種整合途徑，讓你可以根據專案的規模和架構選擇最適合的方案。
CDN 快速引入方式
如果你只是做一個小型網站或快速原型，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 或 yarn 安裝：
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 中，不會造成多餘的體積。這跟 CSS 生成工具 和 Neumorphism CSS Generator 等工具的模組化思維是一致的。
RESTful API 程式化取用
CSS.GG 還提供了 RESTful API，讓你可以在後端或自動化流程中程式化取得圖標資料。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 格式
這對於需要動態生成頁面或整合到 CMS 系統的場景來說非常實用。你也可以搭配 WordPress SEO 外掛 來優化圖標的語意化標記，讓搜尋引擎更容易理解頁面內容。
CSS.GG 與其他免費圖標庫比較
市面上有非常多優質的免費圖標庫，選擇哪一個往往取決於你的具體需求。以下將 CSS.GG 與幾個同樣知名的開源圖標庫進行比較，幫助你做出更明智的選擇。
| 圖標庫 | 圖標數量 | 授權方式 | 技術特點 | 適合場景 |
|---|---|---|---|---|
| CSS.GG | 700+ | MIT | 純 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 技術路線是獨一無二的。如果你的首要考量是零依賴和極致輕量化，那 CSS.GG 會是最佳選擇。如果你需要更多圖標選擇，IconPark 和 Ionicons 提供了更豐富的數量（分別有 2,400+ 和 1,300+ 個圖標）。而像 Radix Icons 和 Unicons Solid 也都有各自的特色，值得根據專案需求來評估。
CSS.GG 在 Figma 與 Adobe XD 中的使用方式
對於 UI 設計師來說，CSS.GG 同樣提供了良好的設計工具整合支援。不管你使用的是 Figma、Adobe XD 還是 Sketch，都能夠方便地取得並使用這些圖標。
在 Figma 中，你可以安裝由 Iconduck 提供的「css.gg Icon Set」社群插件，安裝後就能在 Figma 專案中直接搜尋並插入 CSS.GG 的圖標。或者你也可以下載 .fig 格式的檔案後，直接在 Figma 中開啟編輯。這個流程跟使用 Clay Mockups 的 Figma 模板類似，操作起來非常直覺。
Adobe XD 使用者則可以直接下載 .xd 格式的圖標檔案，匯入後就能在設計稿中使用。Sketch 使用者雖然沒有專屬的格式檔案，但可以透過 SVG 格式匯入，效果一樣好。這種多格式支援的設計，讓設計師和開發者之間的協作更加順暢。如果你在設計過程中需要製作網站 favicon，可以試試 SVG Favicon Maker。
在實際的設計到開發工作流中，設計師在 Figma 中使用圖標的名稱會與前端 CSS class 名稱一致，這意味著設計稿到程式碼的轉換過程中不需要額外的對照表，大幅減少了溝通成本。你也可以搭配 Free Deca UI Kit、UI Design Daily 或 Globe 3D 等設計資源，建立更完整的 UI 素材庫。
更多免費圖標與設計資源推薦
除了 CSS.GG 之外，網路上還有非常多優質的免費圖標和設計資源。以下是我們推薦的幾個網站，每個都在各自的領域有出色的表現：
- Remix Icon：收錄超過 2,000 個開源圖標，提供線性和填充兩種風格，MIT 授權可免費商用。是 CSS.GG 之外另一個數量豐富的選擇。
- Icons8：一站式設計資源平台，不僅提供大量圖標下載和 HTML 嵌入功能，還有免費圖片、向量插圖和音樂素材可以使用，資源種類非常多元。
- Iconshock：提供超過 200 萬個免費圖標，附上來源可作為個人使用，99 美元即可升級為終身商用授權，適合需要大量圖標的商業專案。
- Flaticon：全球最大的免費圖標庫，提供各種格式的圖示 Icons，只需署名即可免費用於商業或個人用途，數量和種類都非常驚人。
- FreeImages：超過 300,000 張線上圖庫，提供免版稅、免費圖片下載且支援中文關鍵字搜尋，適合需要高品質攝影素材的設計師和開發者。
- Freebiesbug：設計師最愛的資源素材庫，提供 PSD、Illustrator、Sketch、Figma 等多種格式的免費設計資源下載。
- Free Vector Illustrations：150+ 免費插圖素材，無須署名即可用於個人和商業用途，品質相當不錯。
- 免費圖庫懶人包：我們整理了 47 個可商用無版權的免費圖庫資源，涵蓋圖片、圖示、圖標、素材和背景，非常適合作為日常設計工作的參考清單。
每個圖標庫都有自己的特色和適用場景，建議根據你的專案需求、設計風格和授權要求來選擇。如果你的工作同時涉及網頁開發和 UI 設計，CSS.GG 的多格式支援和純 CSS 技術路線確實提供了獨特的價值。如果你還在尋找動態圖標資源，Animated Icons by Icons8 提供了 900+ 免費動畫圖標；需要 SVG 波浪背景的話可以試試 SVG Waves；想找高品質向量插圖素材則推薦 Illustration Kit 或 ManyPixels Gallery。需要免費虛擬人物頭像素材的話，Free Userpics Pack 提供了 100 個獨特風格的頭像供免費下載。
CSS.GG 評價推薦優點
- 700+ 免費開源圖標，MIT 授權可商用
- 純 CSS 技術，零外部依賴
- 支援 7 種格式下載（CSS/SVG/TSX/FIG/XD/JSON/XML）
- 提供 CDN、npm 與 API 多種整合方式
- 原生支援 Figma 與 Adobe XD
- Retina 高解析度完美支援
CSS.GG 常見問題 FAQ
CSS.GG 可以免費商用嗎？
可以的。CSS.GG 所有圖標都採用 MIT 授權條款釋出，這是一種非常寬鬆的開源授權。你可以自由地將圖標運用在商業產品中，包括修改、分發和再授權。唯一的要求是在你的專案中保留原始的版權聲明和 MIT 授權條款副本。具體的授權內容可以在 CSS.GG 授權頁面 查看。
如何在 WordPress 網站中使用 CSS.GG 圖標？
在 WordPress 中使用 CSS.GG 有兩種常見方式。第一種是透過 CDN 引入，在佈景主題的 header.php 或使用自訂 HTML 區塊中加入 CSS 連結，然後在文章或頁面中使用 <i class="gg-圖標名稱"></i> 來顯示圖標。第二種是下載 CSS 檔案後上傳到你的主題目錄中。如果你的網站使用了 優質的 WordPress 佈景主題，通常可以在自訂 CSS 區段中直接加入樣式。
CSS.GG 與 Font Awesome 有什麼不同？
兩者最大的技術差異在於實作方式。Font Awesome 使用 Icon Font 技術，需要載入字體檔案（.woff、.ttf 等），而 CSS.GG 使用純 CSS 偽元素來繪製圖標，不需要任何字體檔案。這意味著 CSS.GG 少了一個 HTTP 請求，在某些場景下載入速度會更快。不過 Font Awesome 的圖標數量遠多於 CSS.GG（免費版約 2,000 個），功能也更全面。如果你的專案只需要少量常用圖標，CSS.GG 的輕量化特性會更有優勢。
如何自訂 CSS.GG 圖標的顏色和大小？
因為 CSS.GG 的圖標本質上是 CSS 屬性繪製的，你可以用標準的 CSS 來控制外觀。修改顏色只需要設定 color 屬性（偽元素會繼承），調整大小則可以透過 transform: scale() 或修改 font-size。你也可以加上 transition 屬性讓圖標在 hover 時產生動畫效果，彈性非常高。
CSS.GG 支援哪些前端框架？
CSS.GG 支援市面上主流的前端框架。由於圖標是純 CSS 實作的，所以在任何能夠引入 CSS 的環境中都能使用，包含 React、Vue、Angular、Svelte 等。CSS.GG 也提供了 TSX 格式方便 React 開發者直接以元件方式匯入。在 Vue 和 Angular 中，你只需要引入 CSS 檔案後使用對應的 class 名稱即可。如果你正在尋找合適的 免費網頁字型 來搭配圖標使用，思源黑體 Noto Sans TC 也是一個不錯的選擇。
CSS.GG 圖標會影響網站載入速度嗎？
相較於 Icon Font 方案，CSS.GG 對網站載入速度的影響其實更小。因為不需要載入字體檔案，少了一個 HTTP 請求。而 CSS 的解析和渲染對瀏覽器來說是非常高效的操作。如果你只使用少數幾個圖標，可以選擇只引入特定圖標的 CSS，而不是整個圖標庫，這樣對效能的影響幾乎可以忽略。搭配適當的 SEO 策略 和良好的主機服務，能讓網站整體表現更上一層樓。你也可以參考我們整理的 WordPress 主機推薦，選擇一個效能穩定的主機來進一步提升網站速度。
