Remix Icon 圖標下載：商用、Logo 限制與新版授權

Facebook Line Messenger Telegram

Remix Icon 提供適合網站與 APP 介面的免費圖標，支援 SVG 與 Icon Font 等使用方式。現行 Remix Icon License v1.0 允許商業專案使用，但不能拿圖標做自己的 Logo、品牌識別或競爭圖標庫。「免署名」也不代表散布整套圖標時可以省略授權文件，選用前應先確認版本與成品用途。

這套圖標庫由設計師 Jimmy Cheung 與 Wendy Gao 共同打造，GitHub 上累積超過 8,300 顆星星。截至 2026 年 9 月，最新版本仍為 v4.9.1（2026 年 1 月發布），授權條款則自 v4.9.0 起從 Apache 2.0 改為官方自訂的 Remix Icon License，使用新版本時，應重新確認成品用途是否符合條款。跟 Icons8 或 Iconshock 這類以商業模式營運的圖標平台不同，Remix Icon 提供公開可取得的圖標與原始檔，下載圖標不需授權費，但仍須遵守所用版本的條款。如果你平常就會用到各類免費圖庫與設計素材，Remix Icon 值得加入你的工具清單。

用 24px 網格把線條與填色版綁在一起，這是 Remix Icon 的一致性來源

Remix Icon 是一組以 24px 網格系統為基礎設計的線性圖標集，每個圖標同時提供線條（line）和實心（fill）兩種版本。所有圖標保持一致的視覺比例與線條粗細，這點對大量使用圖標的介面設計來說非常關鍵：當你在同一個頁面混搭不同圖標時，統一的設計語言讓整體視覺更協調，不會出現某個圖標特別突兀的狀況。

跟 Feather Icons 的極簡風格比起來，Remix Icon 的圖標細節更豐富，辨識度也更高。和 Heroicons 相比，Remix Icon 在數量上佔了壓倒性優勢，涵蓋的使用場景也更廣泛。每個圖標都提供 SVG 原始碼、PNG 下載、CSS Class 引用以及 DataURL 格式，你可以根據專案需求選擇最適合的用法。

在 Remix Icon 官網點擊任何一個圖標後，你可以直接在網頁上調整顏色和尺寸，調整好之後再複製 SVG 原始碼或下載 PNG 檔案。另一個實用的功能是「收藏打包」：瀏覽圖標時把需要的加入收藏清單，最後一次打包下載。如果你對 CSS.GG 這類純 CSS 圖標方案也有興趣，Remix Icon 同樣支援 CSS Class 的引用方式，兩者可以根據專案特性來選擇。

Remix Icon 與其他免費圖標庫比較

市面上免費圖標庫很多，每一套的定位和適用場景都不同。以下把 Remix Icon 和幾套主流方案做個對照：

圖標庫	圖標數量	授權	風格	適合場景
Remix Icon	3,200+	Remix Icon License v1.0	中性線性	網站、APP、管理後台
Feather Icons	280+	MIT	極簡線性	輕量級介面
Heroicons	300+	MIT	圓潤線性	Tailwind 專案
Flaticon	數百萬+	免費需署名	多種風格	簡報、社群圖片
Tabler Icons	5,000+	MIT	線性	開源管理後台

Remix Icon 在「數量」和「授權自由度」之間取得了不錯的平衡。2026 年起授權從 Apache 2.0 調整為官方自訂的 Remix Icon License，允許網站、App 與商業專案以功能或裝飾元素的方式使用，但不能把圖標單獨打包販售、用來另製性質相近的圖標庫，或作為品牌 Logo 使用。Feather Icons 授權寬鬆（MIT），但圖標數量只有 280 個左右，遇到稍微特殊一點的需求就不夠用。Flaticon 的圖標數量龐大，但免費方案需要署名，商業使用上會多一層顧慮。跟 IconPark（字節跳動出品）相比，Remix Icon 的分類方式更直覺，搜尋體驗也更流暢。LineIcons 雖然同為線性風格，但在數量上 Remix Icon 更佔優勢。如果你需要的是高品質且分類清楚的圖標集，Tabler Icons 和 Remix Icon 都是不錯的選擇，使用前仍應分別確認所用版本的授權。

Remix Icon 的圖標風格偏向中性實用，不會太花俏也不會太單調，能輕鬆融入各種設計語言。如果你正在做管理後台或工具型應用的介面，Remix Icon 幾乎是首選等級的方案。但如果你需要更有個性的圖標，可以搭配 FindIcons 這類圖標搜尋引擎來尋找更合適的素材。

Remix Icon 商用授權：先看圖標在成品中的用途

依 Remix Icon License v1.0，網站、SaaS、簡報與客戶專案都可使用圖標，前提是符合條款。最容易混淆的是「APP 裡的功能圖示」與「代表 APP 品牌的圖示」：前者可作介面元素，後者屬於禁止的品牌識別用途。

預定用途	v1.0 的判斷	交付前確認
網站按鈕、導覽列、APP 功能圖示	允許作為功能或裝飾元素	不要把圖標當成品牌主視覺
付費網站模板、UI kit、設計系統	可附帶圖標，但圖標不能是產品的主要價值	若包含整套或實質部分，保留既有版權聲明並附授權文件
獨立圖標包、競爭圖標庫	不允許	改色、調尺寸或線寬不能避開限制
公司 Logo、產品商標、代表自家品牌的 APP icon	不允許	使用自行設計或另獲適當授權的品牌識別
GitHub、社群等第三方品牌圖標	限於表示或連結對應品牌、產品或服務	不得暗示代言或合作，仍須遵守品牌商標規範

若專案本身採 MIT、BSD 或 Apache 2.0，仍不能把引入的 Remix Icon 一併改標成該授權；圖標繼續受 Remix Icon License 的限制。條款也提醒，要求素材可無限制獨立再散布、或強制相同方式授權的專案，可能有相容性問題。

舊版 Apache 2.0 與新版條款怎麼區分？

v4.9.0 發布紀錄說明 2026 年 1 月改採新授權；本次核對的 v4.8.0 License 則是 Apache 2.0。請看專案實際安裝版本所附的 License，不要把舊版條件套用到新下載的檔案。升級時重新檢查授權；若使用 CDN，也應固定已確認的版本，避免 @latest 隨更新切換。

如何從官網下載 Remix Icon

從官網取得 Remix Icon 的步驟很簡單：

步驟一：搜尋或瀏覽圖標
打開官網後，頂部有一個搜尋框，直接輸入英文關鍵字（例如 “home”、”user”、”settings”）來找圖標。如果不確定關鍵字，可以透過左側的分類選單瀏覽。

步驟二：調整樣式
點擊任何一個圖標後，畫面下方會彈出工具面板，可以調整顏色（支援任何色碼）、像素大小（16px 到 512px），也可以選擇線條或實心樣式。即時預覽功能讓你直接看到調整後的效果。

步驟三：下載或複製
調整完畢後，你可以直接下載 SVG 檔案、下載 PNG 檔案、複製 SVG 原始碼、複製 DataURL，或是把圖標加入收藏清單。如果需要批量取得，建議使用收藏功能，先把所有需要的圖標加到清單裡，再一次打包下載。

官網右上方的「Download All」按鈕可以下載完整的圖標包，包含所有 SVG 檔案、Icon Font 字型檔和使用說明。拿到 SVG 檔案後如果覺得體積太大，可以用 SVG Repo 找到更多相似的 SVG 圖標資源，或透過 IcoMoon App 更細緻地管理自訂圖標字型。

透過 npm 安裝 Remix Icon（前端開發者教學）

前端專案最方便的取得方式是透過 npm 安裝，套件名稱為 remixicon：

npm install remixicon

安裝完成後，在專案主要 CSS 或 JS 入口檔案引入：

import 'remixicon/fonts/remixicon.css'

引入 CSS 之後，在 HTML 中使用  標籤搭配 Class 名稱來顯示圖標。每個圖標的 Class 名稱格式是 ri-圖標名稱-line（線條版本）或 ri-圖標名稱-fill（實心版本）：

 顯示線條風格的首頁圖標
 顯示實心風格的首頁圖標

不管你用的是 Webpack 還是 Vite，只要確認 CSS loader 有正確設定就可以。如果專案有做 Tree-shaking，可以改從 node_modules/remixicon/svg/ 目錄直接 import 單獨的 SVG 檔案，打包出來的體積會更精簡。在開發過程中，Ray.so 是把程式碼片段轉成圖片分享的好工具，LOADING.IO 則提供大量前端載入動畫素材，可以跟 Remix Icon 的圖標搭配使用。對於想要自訂按鈕樣式的開發者，Neumorphism CSS Generator 也能幫上不少忙。

使用 CDN 快速引入 Remix Icon

如果你只是想做個簡單的靜態頁面、快速原型驗證，或者不想增加 node_modules 的體積，用 CDN 引入是最省事的做法。在 HTML 的 <head> 區段加一行：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

加上這行之後，就能在整個頁面中使用 ri-* 開頭的 Class 名稱來顯示圖標。使用方式跟 npm 安裝一模一樣，差別只在於 CSS 檔案從 CDN 載入。

CDN 引入的好處是設定簡單，不需要任何建置工具。缺點是依賴第三方伺服器的可用性，如果 CDN 服務暫時掛掉，圖標就無法顯示。建議指定固定版本號（例如 [email protected]）而非使用 @latest，避免版本更新帶來的非預期變動。如果你的網站已經使用 Cloudflare CDN 來加速，搭配 CDN 引入 Remix Icon 在快取命中率上會表現得更好。追求極致載入速度的網站可以搭配 instant.page 這類預先載入工具，讓圖標的顯示更加即時。WordPress 使用者也歡迎參考我們的 WordPress 速度優化技巧，裡面有更多提升網站載入效能的實用方法。

在 WordPress 網站中整合 Remix Icon

想在 WordPress 網站中使用 Remix Icon，有三種做法可以選擇：

方法一：透過佈景主題的 functions.php 引入

這是最常見也比較乾淨的做法。在子佈景主題的 functions.php 檔案中加入：

function enqueue_remixicon() { wp_enqueue_style('remixicon', 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css'); } add_action('wp_enqueue_scripts', 'enqueue_remixicon');

這樣 WordPress 就會在每個頁面自動載入 Remix Icon 的 CSS。之後只要在文章或頁面的「自訂 HTML」區塊中使用對應的 Class 名稱，就能顯示圖標。

方法二：使用外掛加入 CSS

如果你不想修改佈景主題的檔案，可以安裝 WPCode 這類「插入程式碼」的外掛，把 CDN 連結加到網站的 <head> 區段中。效果跟修改 functions.php 一樣，但設定介面更友善。

方法三：在區塊編輯器中直接使用

不管你用哪一種引入方式，最終在 WordPress 佈景主題的 Gutenberg 區塊編輯器中，都可以透過「自訂 HTML」區塊來插入圖標。例如新增一個自訂 HTML 區塊，貼上 ，就能直接在文章裡顯示一顆金色的星星圖標。

在效能方面，如果你用的是 Bluehost 或 Kinsta 這類品質穩定的 WordPress 主機，CDN 引入方式的載入速度通常不成問題。但如果主機回應速度偏慢，可以考慮把 CSS 檔案下載到本地伺服器，配合 WordPress 快取外掛一起使用，確保圖標載入不會拖慢整個頁面。如果你正在尋找適合的主機方案，我們的 WordPress 主機推薦懶人包裡面有完整的評比和建議。

Remix Icon 在前端框架中的實際應用

在 React 專案中使用

React 專案中可以使用 remixicon 這個 npm 套件，引入 CSS 後就能直接在 JSX 中使用  這種寫法。如果你更偏好 Component 的方式，也有第三方封裝的 React 版本，把每個圖標包裝成獨立的 Component，用起來更符合 React 的寫作習慣。

在 Vue 專案中使用

Vue 的使用方式跟 React 類似，安裝 npm 套件後在 main.js 中引入 CSS，接著就能在 Vue Template 中直接用  來顯示圖標。不管是 Vue 2 還是 Vue 3，設定流程都差不多。

搭配 Figma 設計流程

Remix Icon 也有提供 Figma 社群檔案，設計師可以直接在 Figma 中搜尋並插入圖標，不需要手動下載 SVG 再匯入。這讓設計稿中使用的圖標能和開發端保持一致，大幅減少設計到開發之間的溝通成本。如果你的團隊有在使用 Dark Mode 深色主題，Remix Icon 的線條風格在深色背景下也有很好的辨識度。

搭配 Tailwind CSS

Remix Icon 的 CSS Class 可以直接跟 Tailwind CSS 或任何 CSS 框架搭配使用。你可以用 Tailwind 的 utility class 來控制圖標的大小、顏色和間距，例如 。如果你需要更多 CSS 背景樣式素材來搭配整體視覺設計，也可以參考我們之前介紹過的相關工具。

Remix Icon 適合誰？不適合誰？

適合使用的情境：

需要大量風格統一的圖標來搭建管理後台或工具型應用
前端專案需要透過 npm 或 CDN 引入圖標字型
設計師在 Figma 中需要一套完整的圖標集來保持設計一致性
個人或商業專案需要介面圖示，且成品用途符合所用版本的授權條件
WordPress 網站想要在文章或頁面中使用自訂圖標

可能不適合的情境：

你需要的是色彩豐富的插圖型圖標，而非中性線性圖標
專案只需要 5 到 10 個極簡圖標，Feather Icons 可能更精簡
你需要大量品牌 Logo 圖標，Remix Icon 的品牌類別數量有限
你的目標受眾是兒童或需要更活潑、具象化的圖示風格

限制與注意事項

Remix Icon 雖然是免費圖標庫，但有幾個地方需要留意：

品牌圖標數量有限。Remix Icon 收錄了一些科技品牌與社群平台的標誌圖標，但數量遠不如專門的品牌圖標集。如果你需要大量品牌 Logo，可能得再搭配其他資源。

圖標風格單一。Remix Icon 提供 line 與 fill 版本；若專案需要雙色或手繪等不同視覺風格，應另行挑選合適的圖標集。你需要混搭其他圖標庫，但這會犧牲視覺一致性。

Icon Font 的效能考量。透過 CSS Class 引入整個 Icon Font 時，瀏覽器會載入包含所有圖標的字型檔案。如果你的網站只用到 10 到 20 個圖標，載入整個字型檔案的體積（約 200KB）並不划算。這種情況下建議改用個別 SVG 引入的方式。

搜尋僅支援英文。官網的搜尋框只接受英文關鍵字，不支援中文搜尋。對於習慣用中文思考的台灣使用者來說，可能需要先想好對應的英文關鍵字。

下一步：三個立即可以執行的動作

1. 瀏覽官方圖標庫
前往 Remix Icon 官網搜尋你專案需要的圖標。判斷標準：如果大多數需要的圖標都找得到，而且風格跟你的專案搭配，就值得採用。預期結果：你會得到一組風格統一且授權明確的圖標清單。

2. 選擇適合的引入方式
根據你的專案類型選擇引入方式：前端專案用 npm 安裝，靜態頁面或原型用 CDN 引入，WordPress 網站透過 functions.php 引入。判斷標準：如果你的專案已經有建置工具，用 npm；如果沒有，用 CDN。預期結果：10 分鐘內就能在頁面中顯示第一個圖標。

3. 確認版本、用途與交付文件
記錄實際使用的圖標版本，打開該版本的 License。確認圖標是成品的功能或裝飾元素；若交付整套或實質部分，保留既有版權聲明並附上授權副本。若要做品牌識別或獨立圖標產品，應改用適合該用途的素材。

Remix Icon 常見問題 FAQ

Remix Icon 可以商用嗎？

可以用於條款允許的商業專案，例如網站按鈕、APP 功能圖示或簡報裝飾。v1.0 禁止用作自家 Logo、品牌識別、獨立圖標產品或競爭圖標庫；付費模板附帶圖標時，圖標不能是主要產品價值。使用第三方品牌圖標仍須核對商標規範。

Remix Icon 需要付費嗎？

官方圖標可免費取得，現行授權不收使用授權費。免費取得仍有用途與散布限制，不能把「免費」解讀成可獨立轉售或改作自己的品牌 Logo。

如何在 WordPress 中安裝 Remix Icon？

最簡單的方式是透過佈景主題的 functions.php 引入 CDN CSS，或者使用 WPCode 等外掛把 CDN 連結加到網頁的 head 區段。詳細步驟可以參考上面「在 WordPress 網站中整合 Remix Icon」那段。如果你剛好在尋找穩定的 WordPress 虛擬主機，或考慮升級到高品質的 A2 Hosting 快速主機方案，好的主機環境能讓圖標資源的載入速度更有保障。

Remix Icon 和 Font Awesome 有什麼不同？

選擇時除了圖標風格與需要的格式，也要分別查看所用版本和方案的授權。Remix Icon 現行 v1.0 有品牌識別與獨立圖標產品限制，不能只用「免費免署名」和其他圖標庫比較。

Remix Icon 支援哪些檔案格式？

Remix Icon 支援 SVG 向量圖、PNG 點陣圖、Icon Font（CSS Class 引用）、DataURL（CSS 內嵌），以及 React Component 等多種格式。基本上你能想到的使用方式它都有支援。

如何貢獻圖標給 Remix Icon？

Remix Icon 的 GitHub 儲存庫是公開的，任何人都可以提交 Issue 或 Pull Request 來貢獻新的圖標設計。不過圖標需要遵循他們的設計規範（24px 網格、特定線條粗細），建議先閱讀 repo 中的貢獻指南再提交。

Remix Icon 目前有多少個圖標？

截至 2026 年 9 月，Remix Icon 最新版 v4.9.1 收錄超過 3,200 個圖標（官方 npm 套件內含 3,231 個 SVG 檔案，涵蓋線條與實心兩種版本），分類共 20 個。最新版本號與新增紀錄可以到 GitHub 儲存庫的 Releases 頁面查看。

使用 Remix Icon 需要標注來源嗎？

需要第三方品牌標誌可查看 Simple Icons，但個別授權與品牌規範仍要確認；需要 MIT 授權的介面圖示可參考 Heroicons，交付時保留版權與許可聲明。不同圖標庫的條件不能互相套用。

Remix Icon 圖標下載：商用、Logo 限制與新版授權

用 24px 網格把線條與填色版綁在一起，這是 Remix Icon 的一致性來源

Remix Icon 與其他免費圖標庫比較