Octicons - GitHub 官方開源 Icons 免費圖示下載，支援 Ruby, Rails, Jekyll 適合開發者使用

Facebook Line Messenger Telegram

如果你曾經打開 GitHub 看過任何一個 repo 頁面，那些小小的分支圖標、issue 標記、Pull Request 符號，其實全都來自同一套圖標庫 — Octicons。這套由 GitHub 官方設計團隊 Primer 維護的開源圖標系統，從 2016 年開始孕育，最初只是兩個設計工程師的小型專案，到現在已經成為全球數百萬開發者日常使用的基礎設計元件。這篇文章會帶你從認識 Octicons 開始，一路到實際安裝、在 React 和 Jekyll 中整合使用，並且和其他熱門圖標庫做完整比較。

Octicons 是什麼？GitHub 官方開源圖標庫完整介紹

Octicons 的起源與 GitHub Primer 團隊背景

Octicons 背後的團隊是 GitHub 的 Primer Design Systems Team。這個團隊負責維護 GitHub 整個產品線的設計系統，從色彩、排版到元件庫全都在他們的管轄範圍內。Octicons 就是這個設計系統中的圖標層，你可以把它理解為 GitHub UI 的「視覺字母表」。

這套圖標庫一開始只是為了統一 GitHub 內部的圖標使用，後來決定開源讓所有人都能免費使用。從 2016 年上線至今，Octicons 已經累積了超過 150 個精心設計的 SVG 圖標，而且每隔一段時間就會有新的圖標加入。如果你去看他們的 GitHub repository 更新紀錄，會發現維護頻率相當穩定。

為什麼開發者應該關注 Octicons

市面上免費圖標庫多如牛毛，從 Heroicons 到 Remix Icon 都有不錯的選擇。那 Octicons 的差異化在哪裡？一句話：它是 GitHub 自己在用的圖標系統。這意味著什麼？意味著它經過了全球最大規模開發者平台的實戰驗證，每一個圖標的線條粗細、圓角大小、視覺重量都經過反覆調校，確保在各種 UI 密度下都能清晰可辨。

對於在 GitHub 生態系中工作的開發者來說，使用 Octicons 更有一種「原生感」。你的應用介面會自然地和 GitHub 本身的視覺語言保持一致，使用者不需要額外學習新的圖標含義。

Octicons 授權方式與商用可行性

Octicons 採用 MIT 授權條款，這是所有開源授權中最寬鬆的一種。你可以自由地將 Octicons 用於個人專案、商業產品、甚至是客戶專案中，完全不需要付費或標註來源。唯一的限制是你不能拿 GitHub 的商標來宣稱他們為你的產品背書，但這對正常使用完全沒有影響。如果你正在找一套可以放心用在商業專案中的圖標庫，Octicons 在授權這一關完全不用擔心，和 Simple Icons 一樣是 MIT 開源授權的可靠選擇。

Octicons 核心特色與技術優勢分析

SVG 向量格式與多尺寸支援

Octicons 的每個圖標都以純 SVG 格式提供，這帶來幾個關鍵好處。向量格式意味著圖標在任何解析度下都不會模糊，不管你是放在 Retina 螢幕的高密度 UI 上，還是需要放大做簡報投影片，線條永遠銳利清晰。每個 Octicons 圖標都提供 16px 與 24px 兩種尺寸版本，這不是單純的縮放，而是針對不同像素密度重新調校過的設計。16px 版本的線條和間距會稍微調整，確保在小尺寸下依然清晰可辨；24px 版本則有更精緻的細節表現。

多框架套件生態：React、Ruby、Jekyll、JavaScript

Octicons 不只是一個下載 SVG 檔案的網站，它背後有一整套 npm 套件生態。核心套件 @primer/octicons 提供原始 SVG 資料，而 @primer/octicons-react 則封裝成 React 元件，讓你可以像使用一般 React 元件那樣引入圖標。除了 JavaScript 生態，Octicons 還提供了 Ruby gem 和 Jekyll plugin，這在圖標庫中算是相當罕見的。如果你是 Feather Icons 或 Tabler Icons 的使用者，會發現它們主要只聚焦在 JavaScript 生態，Octicons 對 Ruby 和 Jekyll 的支援是它的獨特優勢之一。

開源社群維護與持續更新頻率

很多圖標庫一開始風風火火，過了兩年就沒人維護了。Octicons 完全不同 — 它的背後是 GitHub 的 Primer 團隊，這不是一個熱情消退就棄坑的 side project，而是 GitHub 產品基礎設施的一部分。每次 GitHub 產品有新功能需要新圖標，Octicons 就會跟著更新。這意味著你不需要擔心這個庫會突然停止維護，也不用擔心相容性問題。和 CSS.GG 這類個人維護的專案比起來，Octicons 的長期穩定性讓人安心不少。

Octicons 圖標瀏覽與搜尋技巧

搜尋功能與關鍵字技巧

進入 Octicons 官方網站後，最上方有一個搜尋框。這裡的搜尋是即時過濾的，你每敲一個字，下方的圖標列表就會立刻更新。Octicons 的命名遵循一套清晰的語義規則：以「git-」開頭的通常是 Git 相關操作圖標，以「diff-」開頭的是版本差異相關的。掌握這個規律，找起圖標來會快很多。

如果你不確定要找的圖標叫什麼名稱，可以用功能關鍵字試試。例如搜尋「arrow」會出現各種箭頭圖標，「check」會找到打勾符號，「x」則會找到關閉按鈕的叉號。這種關聯搜尋方式和 iconmonstr 或 FindIcons 這類圖標搜尋引擎的邏輯類似，但 Octicons 的圖標數量相對精簡，搜尋結果更聚焦。

圖標預覽與尺寸切換

點擊任何一個圖標後會進入該圖標的詳細頁面。頁面上方有一個即時預覽區，可以在 16px 和 24px 之間切換。這個功能很實用，因為同一個圖標在兩種尺寸下的視覺效果差異不小。16px 版本為了在小尺寸下保持清晰，線條會略粗一些、細節會做一些取捨；24px 版本則能展現更完整的設計意圖。在每個圖標的下方，也會展示各套件的程式碼使用方式，方便直接複製。

SVG code、SVG 檔案、PDF 三種下載方式

每個圖標的詳細頁面都提供三種取得方式。第一種是直接複製 SVG HTML inline code，只要貼到你的 HTML 檔案中就能立即顯示。第二種是下載獨立的 .svg 檔案，方便在設計工具中使用。第三種是 PDF 格式，這對需要在 Illustrator 或其他向量編輯器中進一步修改的設計師來說很好用。如果你常需要大量下載 SVG 檔案，也可以試試 SVG Repo 這類批量下載工具，不過 Octicons 目前沒有提供一次性打包下載的功能，需要逐個取得。

Octicons 安裝教學：npm、Yarn 與 CDN 三種方式

要實際在專案中使用 Octicons，你有多種安裝方式可以選擇。根據你的技術棧和專案規模，挑一個最順手的就好。

使用 npm 安裝 Octicons

如果你使用 Node.js 生態系，npm 是最直接的方式。核心套件的安裝指令如下：

npm install @primer/octicons

安裝完成後，你可以在 JavaScript 中這樣引入圖標：

import { octicon } from '@primer/octicons'
// 取得特定圖標的 SVG 內容
console.log(octicon.markGithub.toSVG())

如果你的專案是 React 應用，建議改安裝 React 專用套件：

npm install @primer/octicons-react

使用 Yarn 安裝 Octicons

偏好 Yarn 的開發者可以用完全對應的指令：

yarn add @primer/octicons
# React 版本
yarn add @primer/octicons-react

Yarn 和 npm 在功能上完全等價，選你團隊習慣的就好。安裝後的用法也完全相同。

透過 CDN 直接引入 Octicons

對於不使用打包工具的專案（例如純 HTML 頁面或簡單的 CMS 網站），你可以透過 CDN 引入 Octicons。jsDelivr 和 unpkg 都有託管 Octicons 的 npm 套件，直接在 HTML 的 <head> 中加入 script 標籤即可。這種方式的好處是零配置，缺點是會載入整套圖標庫而不是只載入你用到的部分，在效能上不如按需引入。如果你很在意載入速度，可以搭配 SVGOMG 這類 SVG 壓縮工具先處理過再使用。更多關於網站速度優化的技巧，可以參考我們之前整理的 WordPress 速度優化指南，裡面有提到不少前端效能的做法。

在 React 專案中使用 Octicons 的實戰教學

安裝 @primer/octicons-react

Octicons 的 React 套件是獨立維護的，這意味著它的 API 設計完全以 React 的使用習慣為出發點，而不是把底層 SVG 包一層薄薄的 wrapper。安裝方式就一行：

npm install @primer/octicons-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。這種命名慣例和 Heroicons 的做法很類似，對 React 開發者來說非常直覺。

自訂圖標大小、顏色與 CSS class

Octicons React 元件支援幾個常用的 props：

size：設定圖標尺寸，接受數字（單位為 px），常用值為 16 或 24
className：套用自訂 CSS class，方便整合 Tailwind CSS 或其他 CSS 框架
verticalAlign：控制垂直對齊方式，預設是 text-bottom

要改變顏色的話，直接用 CSS 的 color 屬性就好，因為 SVG 使用 currentColor 作為填充色。這表示你可以這樣寫：

<PlusIcon size={16} className="text-blue-500" />

搭配 Tailwind CSS 之類的工具型 CSS 框架，使用起來非常順手。另一個值得一提的技術優勢是 tree-shaking。因為每個圖標都是獨立的 ES module export，打包工具（webpack、Vite、Rollup）在 build 的時候只會把你實際用到的圖標包進最終的 JavaScript bundle 裡。就算 Octicons 有 150+ 個圖標，你的生產環境 bundle size 不會因此膨脹。這點和 Ionicons 的架構類似，都是為了避免「安裝了整個庫卻只用三個圖標」的問題。

Octicons 搭配 Jekyll 與靜態網站的整合方法

Jekyll 專案中使用 Octicons Liquid Tag

Jekyll 是目前最流行的靜態網站產生器之一，Octicons 為它提供了專屬的整合方式。在你的 Gemfile 中加入：

gem 'octicons'

執行 bundle install 後，你就可以在 Jekyll 的 Liquid 模板中使用 Octicons 的 helper：

{% 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 整合 Octicons helper

Rails 專案的整合方式也很簡潔。同樣在 Gemfile 中加入 gem 'octicons'，然後在 ERB 模板中可以這樣呼叫：

<%= octicon("mark-github", height: 24, class: "mr-2") %>

這個 helper method 會回傳完整的 SVG HTML 字串，直接嵌入到你的 view 中。參數用法和 Jekyll 版本一致，支援 height、width、class 和 aria-label。如果你有幫網站設定自訂網域，搭配這些圖標可以讓整體 UI 看起來更專業。關於自訂網域的設定，可以參考我們之前寫的 Blogger 自訂網域教學，裡面的 DNS 設定邏輯在其他平台也通用。

純 HTML 靜態頁面直接使用 SVG inline

如果你的網站不使用任何框架或打包工具，最簡單的做法就是直接從 Octicons 官網複製 SVG inline code 貼到 HTML 中。每一個圖標的詳細頁面都有「Copy SVG」的按鈕，點下去就複製好了。貼到 HTML 後，你可以直接用 CSS 控制顏色和大小。

這種做法的優點是零依賴，不需要安裝任何東西。缺點是如果圖標數量多，HTML 檔案會變得比較長。一個折衷方案是把常用的圖標做成 SVG sprite，放在一個共用的 HTML 檔案中，再用 <use> 標籤引用。如果你還在幫網站設計標誌，SVG Favicon Maker 是個不錯的線上工具，可以快速產生各種尺寸的 favicon。想找更多 CSS 視覺效果的靈感，也可以看看我們介紹過的 3D Book Image CSS Generator。

Octicons vs 其他熱門圖標庫比較：Heroicons、Feather Icons、IconPark

選圖標庫就像選工具，沒有絕對的好壞，只有適不適合你的場景。以下從幾個維度來比較 Octicons 和目前市面上最受歡迎的幾個開源圖標庫。

圖標數量與設計風格比較

先看數字：Octicons 有 150+ 個圖標，Heroicons 約 300+ 個，Feather Icons 約 280+ 個，而 IconPark 則超過 2400+ 個。單看數量的話 Octicons 似乎偏少，但數量多不一定代表好用。Octicons 的每一個圖標都是 GitHub 產品中實際使用的，設計品質和一致性遠高於追求數量的庫。風格上，Octicons 偏幾何簡潔，線條銳利，適合工具型和開發者導向的 UI；Feather Icons 線條更圓潤柔和，適合生活化或內容型的產品；Remix Icon 和 Tabler Icons 則介於兩者之間，覆蓋面更廣。

框架支援與生態系比較

在框架支援方面，Octicons 是少數同時涵蓋 JavaScript（React）和 Ruby（Jekyll、Rails）生態的圖標庫。Heroicons 主要支援 React 和 Vue，Feather Icons 有較多非官方的社群封裝，IconPark 則以 React 和 Vue 為主。如果你是全端開發者，前後端都會碰到，Octicons 的跨生態支援會是個加分項。但如果你只需要在 React 專案中使用，Heroicons 的 React 整合體驗也非常成熟，兩者不相上下。

效能與 bundle size 比較

因為 Octicons 採用 tree-shakable 的 ES module 架構，最終打包大小取決於你用了幾個圖標。單個 Octicons 圖標的 SVG 檔案大約在 200-500 bytes 之間（未壓縮），和 Feather Icons 差不多，略小於 Heroicons 的部分圖標。如果你對 bundle size 特別敏感，建議實際測量一下你的使用情境。三個庫在正常使用量（10-30 個圖標）下的差異其實非常小，不會成為效能瓶頸。真正影響前端效能的大頭通常是圖片和 JavaScript 框架本身。如果想要進一步優化 SVG 檔案大小，可以用 SVGOMG 做壓縮，或是參考我們之前整理的 WordPress 網站速度優化方法和 Cloudflare 速度測試工具。

Octicons 在 UI 設計與前端開發中的實際應用場景

導覽列與側邊欄圖標應用

導覽列是 Octicons 最常見的應用場景之一。一個典型的後台管理介面或開發者工具，側邊欄通常會有：首頁、設定、通知、搜尋等功能項目，每個項目前面搭配一個小圖標可以大幅提升掃視效率。Octicons 的 HomeIcon、GearIcon、BellIcon、SearchIcon 這幾個基礎圖標，恰好覆蓋了大部分導覽列的需求。

實際開發時，建議把導覽列的圖標做成一個統一的元件，透過 props 傳入圖標名稱。這樣日後如果要更換圖標庫，只需要改一個元件就好，不需要逐頁修改。如果你需要更多 UI 設計的靈感，UI Design Daily 每天都會提供免費的 UI 設計資源，值得收藏。

按鈕與狀態指示器

按鈕加圖標是提升使用者體驗的經典手法。一個「新增項目」按鈕配上 PlusIcon，一個「刪除」按鈕配上 TrashIcon，視覺辨識速度比純文字快得多。Octicons 的圖標在按鈕中使用時，建議 size 設為 16px，和文字大小保持協調。搭配適度的 padding，整體視覺會很舒服。要讓按鈕更有層次感，可以搭配 CSS box-shadow 範例中的一些陰影技巧，讓互動狀態的變化更明顯。

表單驗證與回饋提示

表單驗證的即時回饋是另一個 Octicons 很好發揮的場景。驗證通過顯示 CheckIcon（綠色），驗證失敗顯示 XIcon（紅色），載入中顯示 SyncIcon（加上旋轉動畫）。這種狀態圖標的語言是通用的，使用者不需要學習就能理解。Octicons 中對應的圖標分別是 CheckCircleFillIcon、XCircleFillIcon 和 SyncIcon，設計風格和 GitHub 的介面完全一致。如果你想要更豐富的漸層效果，CSS Gradient 工具可以幫你快速產生各種漸層色碼。需要更多 CSS 樣式靈感的話，CSS Background Patterns 也是個好用的線上工具。

SVG 圖標對網站效能與 SEO 的影響

SVG inline vs 圖標字體的效能差異

在前端開發的早期，大家習慣用圖標字體（Icon Font）來顯示圖標，例如 Font Awesome 就是這個路線的代表。但圖標字體有幾個先天缺陷：字體檔案的載入會延遲頁面渲染、瀏覽器對字體的反鋸齒處理會讓圖標看起來模糊、而且你無法用 CSS 精確控制單個圖標的樣式。SVG inline 完全沒有這些問題。每個圖標就是一段 SVG code，直接嵌入 HTML 中，不需要額外的網路請求。渲染是即時的，而且 SVG 支援完整的 CSS 樣式控制，包括漸層填充、動畫、濾鏡等。

從檔案大小的角度來看，SVG inline 也更經濟。一個典型的 Octicons 圖標 SVG code 大約 200-500 bytes，而一個圖標字體檔案即使壓縮後也有幾十 KB。除非你的頁面使用了超過 50 個不同的圖標，否則 SVG inline 的總體積一定小於載入整個字體檔案。如果你的專案中已經在使用 Octicons，可以搭配 SVGOMG 做進一步的 SVG 壓縮優化。對於其他圖片資源的壓縮，Compressor.io 和 WebsitePlanet 圖片壓縮工具都是免費好用的選擇。要是你的網站有大量圖片需要處理，AI Image Denoiser 也能幫上忙。

SVG 對 Core Web Vitals 的正面影響

Google 的 Core Web Vitals 已經成為 SEO 排名的重要因素，而 SVG inline 圖標在這方面有天然優勢。Largest Contentful Paint (LCP) 會因為減少了外部資源請求而改善，Cumulative Layout Shift (CLS) 不會因為字體載入延遲而出現圖標閃爍的問題，First Input Delay (FID) 和 Interaction to Next Paint (INP) 也不會被字體解析的 JavaScript 拖慢。這些看起來都是微小的優化，但在大型網站上累積起來的效果很可觀。想了解更多關於網站速度和效能的優化做法，我們之前整理的 WordPress 網站速度優化指南有更完整的說明。

無障礙設計（Accessibility）考量

SVG 圖標在無障礙設計方面也比圖標字體更有彈性。你可以直接在 SVG 標籤上加入 role="img" 和 aria-label="描述文字"，讓螢幕閱讀器能正確朗讀圖標的含義。Octicons 的 React 元件預設就帶有適當的無障礙屬性，不需要額外設定。這對於需要符合 WCAG 無障礙標準的政府機關或企業網站來說特別重要。良好的無障礙設計不只幫助身障使用者，對 SEO 也有正面影響，因為搜尋引擎越來越重視頁面的可用性指標。

Octicons 常見問題 FAQ

Octicons 是免費的嗎？

是的，Octicons 採用 MIT 開源授權，完全免費，可用於個人與商業專案。你不需要付費也不需要標註來源（但標註一下總是好事）。

Octicons 支援哪些框架？

Octicons 提供多種框架的封裝套件：React（@primer/octicons-react）、JavaScript（@primer/octicons）、Ruby（octicons gem）、Jekyll（octicons Jekyll plugin）和 Rails（helper method）。對於不使用框架的專案，也可以直接複製 SVG inline code 使用。

Octicons 有多少個圖標？

截至目前，Octicons 提供超過 150 個精心設計的 SVG 圖標，涵蓋了導航、操作、狀態、標記等常見 UI 場景。數量會隨著 GitHub 產品更新持續增加。

如何在 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：1) 在佈景主題的 PHP 模板中直接貼入 SVG inline code；2) 透過 wp_enqueue_script 載入 CDN 版本；3) 如果你使用的是區塊編輯器（Gutenberg），可以在自訂 HTML 區塊中直接貼入 SVG code。想找更多 WordPress 相關資源的話，也可以參考我們整理的 WordPress 佈景主題推薦。

Octicons 圖標的授權可以商用嗎？

可以。Octicons 使用 MIT 授權條款，這是商業友好度最高的開源授權之一。你可以自由地將 Octicons 圖標用於任何商業產品、客戶專案或 SaaS 服務中，沒有使用限制。