Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Octicons – GitHub 官方開源 Icons 免費圖示下載，支援 Ruby, Rails, Jekyll 適合開發者使用
Octicons 是一個超過 150+ 個免費開源圖標庫網站，這是由 2016 年開始，由 GitHub Design Systems Team 兩個小組成員開始建立的專案，此項目現在仍然不斷的更新與添加新的圖標與功能。
用 AI 摘要這篇文章：
Octicons 是 GitHub 官方開源的 SVG 圖標庫，MIT 授權免費商用，支援 React、Ruby、Jekyll。截至 2026 年 5 月，最新版本 19.28.0 已收錄超過 300 個圖標，是開發者工具型 UI 的首選圖標系統。前往 Octicons 官方網站 即可線上瀏覽與下載。
目錄
Octicons 是什麼
Octicons 是 GitHub 設計系統 Primer 下的圖標層，你可以把它理解為 GitHub 整個產品線的「視覺字母表」。從 repo 頁面的分支圖標、issue 標記、Pull Request 符號，到設定頁面的齒輪、通知的鈴鐺，全都來自這套圖標庫。它在 2016 年開源，由 GitHub Primer Design Systems Team 負責維護，不是一個熱情消退就棄坑的 side project，而是 GitHub 產品基礎設施的一部分。
Octicons 採用 MIT 授權條款，你可以自由地將它用於個人專案、商業產品、客戶專案或 SaaS 服務中，完全不需要付費或標註來源（但標註一下總是好事）。和 Simple Icons 一樣是 MIT 開源授權的可靠選擇。唯一的限制是不能拿 GitHub 的商標來宣稱他們為你的產品背書，但正常使用完全不受影響。
為什麼選 Octicons 而不是其他圖標庫
市面上免費圖標庫多如牛毛，從 Heroicons 到 Remix Icon 都有不錯的選擇。Octicons 的差異化在於：它是 GitHub 自己在用的圖標系統，經過了全球最大規模開發者平台的實戰驗證。每一個圖標的線條粗細、圓角大小、視覺重量都經過反覆調校，確保在各種 UI 密度下都能清晰可辨。如果你的專案和 GitHub 生態有關（開發者工具、技術文件、開源專案），使用 Octicons 會讓應用介面和 GitHub 的視覺語言保持一致，使用者不需要額外學習新的圖標含義。
| 比較項目 | Octicons | Heroicons | Feather Icons | IconPark |
|---|---|---|---|---|
| 圖標數量 | 300+ | 300+ | 280+ | 2400+ |
| 授權 | MIT | MIT | MIT / ISC | MIT |
| 維護團隊 | GitHub Primer | Tailwind Labs | 社群維護 | ByteDance |
| React 支援 | 官方套件 | 官方套件 | 社群封裝 | 官方套件 |
| Ruby / Jekyll | 官方 gem | 無 | 無 | 無 |
| 設計風格 | 幾何簡潔、線條銳利 | 圓潤、柔和 | 極簡線條 | 多元可客製化 |
| Tree-shakable | 是 | 是 | 是 | 是 |
數量多不一定代表好用。Octicons 的每一個圖標都是 GitHub 產品中實際使用的，設計品質和一致性遠高於追求數量的庫。但如果你需要大量圖標且不在乎風格差異，IconPark 的數量優勢無可匹敵。如果你在做一般性的 SaaS 產品，Heroicons 或 Feather Icons 的風格可能更百搭。
核心特色與技術優勢
SVG 向量格式與多尺寸支援
Octicons 的每個圖標都以純 SVG 格式提供。向量格式意味著在任何解析度下都不會模糊，Retina 螢幕、簡報投影片都一樣銳利。每個圖標提供 16px 與 24px 兩種尺寸版本，這不是單純的縮放，而是針對不同像素密度重新調校的設計。16px 版本的線條和間距會稍微調整，確保在小尺寸下依然清晰；24px 版本則有更精緻的細節表現。
多框架套件生態
Octicons 不只是一個下載 SVG 檔案的網站，背後有一整套 npm 套件生態。核心套件 @primer/octicons 提供原始 SVG 資料，@primer/octicons-react 封裝成 React 元件。除了 JavaScript 生態，Octicons 還提供了 Ruby gem 和 Jekyll plugin，這在圖標庫中相當罕見。如果你是 Feather Icons 或 Tabler Icons 的使用者，會發現它們主要只聚焦在 JavaScript 生態，Octicons 對 Ruby 和 Jekyll 的支援是獨特的加分項。
Tree-shaking 與效能
每個 Octicons 圖標都是獨立的 ES module export，webpack、Vite、Rollup 等打包工具在 build 時只會把你實際用到的圖標包進最終的 JavaScript bundle。就算 Octicons 有 300+ 個圖標，你的生產環境 bundle size 不會因此膨脹。單個 Octicons 圖標的 SVG 檔案大約在 200-500 bytes 之間（未壓縮），和 Feather Icons 差不多。正常使用量（10-30 個圖標）下，各開源圖標庫的差異非常小，不會成為效能瓶頸。
安裝教學：npm、Yarn 與 CDN
使用 npm 安裝
npm install @primer/octicons
安裝完成後，在 JavaScript 中這樣引入：
import { octicon } from '@primer/octicons'
console.log(octicon.markGithub.toSVG())
React 專案請改安裝專用套件：
npm install @primer/octicons-react
使用 Yarn 安裝
yarn add @primer/octicons yarn add @primer/octicons-react
透過 CDN 直接引入
對於不使用打包工具的專案（純 HTML 頁面或簡單的 CMS 網站），可以透過 jsDelivr 或 unpkg 引入。直接在 HTML 的 <head> 中加入 script 標籤即可。這種方式零配置，但會載入整套圖標庫而不是只載入你用到的部分。如果你很在意載入速度，可以搭配 SVGOMG 先壓縮 SVG 再使用。更多前端效能做法，可參考 WordPress 網站速度優化指南。
在 React 專案中使用 Octicons
Octicons 的 React 套件是獨立維護的，API 設計完全以 React 使用習慣為出發點。每個圖標都是一個獨立的 React 元件：
import { MarkGithubIcon, PlusIcon, TrashIcon } from '@primer/octicons-react'
function App() {
return (
<div>
<MarkGithubIcon size={24} />
<PlusIcon size={16} />
<TrashIcon size={16} />
</div>
)
}
每個圖標元件的名稱是原本圖標名的 PascalCase 加上「Icon」後綴，例如 mark-github 對應 MarkGithubIcon。常用 props 包括：
size：設定圖標尺寸，常用值為 16 或 24className：套用自訂 CSS class，方便整合 Tailwind CSS 等框架verticalAlign：控制垂直對齊方式，預設是text-bottom
要改變顏色，直接用 CSS 的 color 屬性，因為 SVG 使用 currentColor 作為填充色。搭配 Tailwind CSS 使用非常順手：
<PlusIcon size={16} className="text-blue-500" />
搭配 Jekyll 與 Ruby on Rails
Jekyll Liquid Tag
在 Gemfile 中加入 gem 'octicons'，執行 bundle install 後，就能在 Liquid 模板中使用：
{% octicon mark-github height:24 %}
這行 Liquid tag 會直接在頁面中渲染出對應的 SVG 圖標。你可以透過參數控制尺寸（height、width）、CSS class（class）和無障礙標籤（aria-label）。對於在 GitHub Pages 上架設 Jekyll 部落格的開發者來說特別方便，因為 GitHub Pages 原生就支援 Octicons gem。
Ruby on Rails Helper
Rails 專案同樣在 Gemfile 加入 gem 'octicons'，在 ERB 模板中這樣呼叫：
<%= octicon("mark-github", height: 24, class: "mr-2") %>
這個 helper method 會回傳完整的 SVG HTML 字串，直接嵌入到你的 view 中。參數用法和 Jekyll 版本一致。
純 HTML 靜態頁面
最簡單的做法是從 Octicons 官網複製 SVG inline code 貼到 HTML 中。每個圖標的詳細頁面都有「Copy SVG」按鈕。貼上後直接用 CSS 控制顏色和大小即可。優點是零依賴，缺點是圖標數量多時 HTML 檔案會比較長。折衷方案是把常用圖標做成 SVG sprite，用 <use> 標籤引用。如果你需要產生 favicon，SVG Favicon Maker 是個好用的線上工具。
適合誰、不適合誰
適合 Octicons 的情境：
- 開發者工具、技術文件、開源專案，需要和 GitHub 視覺語言一致的 UI
- 使用 Jekyll 或 Rails 的全端專案，需要跨前後端的圖標解決方案
- 重視圖標設計品質與一致性，而非追求最大數量
- 需要 MIT 授權可商用的圖標庫
不適合 Octicons 的情境：
- 需要大量多元風格圖標（超過 1000 個），IconPark 或 Flaticon 更合適
- 非技術型內容網站，Feather Icons 或 Heroicons 的柔和風格更百搭
- 需要動畫圖標，Icons8 Animated Icons 更適合
限制與注意事項
Octicons 的圖標數量雖然已超過 300 個，但和 IconPark（2400+）或 Remix Icon（2149 個）相比仍偏精簡。如果你的專案需要大量非開發者場景的圖標（例如餐飲、旅遊、醫療），Octicons 可能無法完全覆蓋。
Octicons 目前沒有提供一次性打包下載的功能，需要從官網逐個取得 SVG code 或 SVG 檔案。如果你常需要批量下載，可以透過 npm 安裝後從 node_modules/@primer/octicons/build/svg/ 目錄取得所有 SVG 檔案。
不管選哪一個圖標庫，重點是「一套用到底」。在一個專案中混用多個圖標庫會讓 UI 顯得雜亂無章，因為不同圖標庫的線條粗細、圓角大小、視覺重量都不一樣。選定一套，從頭到尾保持一致。
下一步
- 前往 Octicons 官網 瀏覽完整圖標列表，用關鍵字搜尋功能確認你需要的圖標是否存在。判斷標準：如果 80% 以上的常用圖標都找得到，Octicons 就足夠用。
- 根據你的技術棧選擇安裝方式：React 專案裝
@primer/octicons-react，Jekyll / Rails 專案加gem 'octicons'，純 HTML 直接複製 SVG inline code。預期結果：10 分鐘內完成安裝並渲染出第一個圖標。 - 如果你還在比較圖標庫，參考 TechMoon 的 Heroicons 介紹、Tabler Icons 介紹 和 Remix Icon 介紹，根據你的專案風格和數量需求做最終選擇。選定後就從一而終。
Octicons 常見問題 FAQ
Octicons 是免費的嗎？
是的，Octicons 採用 MIT 開源授權，完全免費，可用於個人與商業專案。
Octicons 支援哪些框架？
Octicons 提供多種封裝套件：React（@primer/octicons-react）、JavaScript（@primer/octicons）、Ruby（octicons gem）、Jekyll（octicons Jekyll plugin）。對於不使用框架的專案，也可以直接複製 SVG inline code 使用。
Octicons 有多少個圖標？
截至 2026 年 5 月，Octicons 提供超過 300 個 SVG 圖標，涵蓋導航、操作、狀態、標記等常見 UI 場景。數量會隨著 GitHub 產品更新持續增加，最新版本為 19.28.0。
如何在 HTML 中直接使用 Octicons？
前往 Octicons 官方網站，找到你要的圖標，點擊「Copy SVG」按鈕，然後直接貼到 HTML 檔案中。貼上後用 CSS 控制 color、width、height 等樣式。
Octicons 和 Heroicons 哪個比較好？
兩者都是高品質的開源 SVG 圖標庫。Octicons 的優勢在於 GitHub 官方維護、跨框架支援（包含 Ruby 和 Jekyll）、和 GitHub 生態的視覺一致性。Heroicons 的圖標數量相近（300+），由 Tailwind CSS 團隊維護，如果你大量使用 Tailwind，整合起來會更順手。
Octicons 可以用在 WordPress 網站嗎？
可以。WordPress 網站可以透過幾種方式使用 Octicons：在佈景主題的 PHP 模板中直接貼入 SVG inline code、透過 wp_enqueue_script 載入 CDN 版本、或在使用區塊編輯器（Gutenberg）時在自訂 HTML 區塊中直接貼入 SVG code。想找更多 WordPress 資源的話，可以參考 WordPress 佈景主題推薦。
Octicons 圖標的授權可以商用嗎？
可以。Octicons 使用 MIT 授權條款，商業友好度最高的開源授權之一。你可以自由地將 Octicons 圖標用於任何商業產品、客戶專案或 SaaS 服務中，沒有使用限制。
