先想像一個常見的情境：小雅是接案的前端工程師，最近幫朋友的咖啡店做線上點餐頁。做到一半她才發現，頁面上的圖示是從四、五個網站東拼西湊來的，購物車的線條偏粗，旁邊的搜尋圖示卻細得像鉛筆線。實際上客人不一定說得出哪裡怪，但整體看起來就是少了一點專業感。她只好花上半天重新找圖、換色、調尺寸。
🔔 不錯過任何精彩內容
立即訂閱我們的 LINE 或將本站設為 Google 偏好來源，掌握最新資訊！
這次要介紹的 Reicon，就是衝著這個痛點來的。根據官網的介紹，Reicon 是一套免費的開源 SVG 圖示庫，主打手工繪製的圖示，並支援 React、Angular、Vue、Svelte、Flutter、Figma 等常見工具，官方網址是 https://reicon.dev/。對設計師與工程師來說，這代表同一套圖示可以從設計稿一路用到程式碼，不必各找各的。
Reicon 是什麼？
Reicon 是一套免費開源的 SVG 圖示庫，由來自印度的前端開發者 Dev Chauhan 發起，提供給設計師與工程師在網站、App 和設計稿裡使用。所有圖示都畫在 24×24 的網格上，所以不管縮小或放大，線條粗細給人的感覺都很一致。官方各處標示的數量是 2,700 多個，不過瀏覽頁面實際顯示的數字可能略少一些，例如有教學文章寫到的是 2,630 個，這點先跟大家說一聲。
Reicon 的圖示分成 Outline（線條）與 Filled（實心）兩種風格，另外還有一款 Duotone（雙色）目前仍在測試階段。整合的範圍算是相當完整，從 CDN、React、Angular、React Native、Vue、Svelte、Astro，到 Flutter 與 Compose 都有對應的套件，另外還有 Figma 外掛與 VS Code 擴充套件。實際上，同一套圖示橫跨設計與開發兩邊，在團隊合作時最省事，因為設計師在 Figma 裡用的圖，工程師在程式裡也叫得出同一個名字。
這個專案在 GitHub 上已經累積約 1.7k 顆星、90 個 fork，並由 Vercel 贊助託管。對一個發布不久的新專案來說，這個關注度不算低。不過它在 Product Hunt 上的討論相當有限，網路上也還找不到太多媒體報導，所以現階段比較像是在開發者社群慢慢發酵。我的看法是，這類新圖示庫很適合先拿來做小專案試水溫，再決定要不要全面導入。
Reicon 可以免費商用嗎？
Reicon 採用 MIT 授權，個人與商業專案都可以免費使用，不需要付費訂閱。官方在 GitHub 上也明確寫著可以商用，所以接案或公司專案都不用擔心費用問題。把重點整理成下表會更清楚。
| 項目 | 說明 |
|---|---|
| 授權 | MIT License |
| 使用範圍 | 個人與商業專案皆可 |
| 費用 | 圖示可免費下載，沒有強制付費 |
| 授權聲明 | MIT 授權在散布時需要保留版權與授權聲明，建議一併留著 |
不過有一點我會建議多留意。GitHub 頁面註明，Reicon 的基礎圖示取材自 Solar Icons（CC BY 4.0）與 Zappicon，所以如果你是在做正式的商業案，保險起見把授權聲明留著，之後被問到也有個交代。這種做法不麻煩，卻能省下不少日後的疑慮。
Reicon 怎麼用？
Reicon 的使用方式很直覺：先在官網挑好圖示，再依用途複製程式碼或下載檔案。官網介面是英文，不過按鈕名稱都很簡單。
步驟一：在 Playground 瀏覽圖示
打開官網首頁往下捲，就會看到 Playground 互動預覽區。在這裡可以直接調整顏色、尺寸（12px 到 64px）和風格（Outline 或 Filled），馬上看到圖示換裝後的樣子。小雅先拿購物車圖示試了幾種組合，確認線條粗細跟她的頁面配得起來。這個步驟看起來有點多餘，不過對挑風格很有幫助。
步驟二：到 Browse Icons 搜尋與篩選
點選導覽列的 Browse Icons，就會進入圖示庫頁面。左側可以依 Weights（風格）、Grid Size（縮圖大小）和 Categories（分類）篩選，上方的搜尋框也能直接輸入關鍵字。分類相當多，像 Arrows、Business、Devices、Faces 等主題都有。小雅輸入 cart 和 search，幾秒鐘就找到要用的兩個圖示。
步驟三：打開圖示頁面，複製或下載
點進任何一個圖示，會看到它的專屬頁面。右上角有 Copy JSX、Copy Name、Copy SVG 三個按鈕，複製後可以直接貼進程式碼或設計稿。如果想要檔案，就在 Export Size 選好尺寸（16px 到 512px 共八種），再下載 SVG、PNG 或 WebP。開啟 Custom Color 還能在下載前先換好顏色，對趕時間的人來說很方便。
步驟四：用套件安裝到專案
如果是長期使用，直接安裝套件會比一個個下載省事。圖示頁面下方會依你使用的框架（例如 React、Vue、Svelte、Flutter 或 CDN）顯示對應的安裝指令與程式碼範例，複製貼上就能用。想一次比較各框架的用法，可以到官網的 Packages 頁面。以 React 為例，官方的寫法是先安裝 reicon-react，再用 import { Home } from 'reicon-react' 把圖示叫出來。
步驟五：搭配 Figma 與 VS Code
官方另外提供 Figma 外掛與 VS Code 擴充套件。前者讓設計師在 Figma 裡直接套用同一套圖示，後者則方便在編輯器內瀏覽並插入圖示。這兩個工具的實際安裝畫面，建議以官方文件為準，因為介面可能會隨版本調整。
Outline 和 Filled 風格有什麼差別？
Outline 是以 1.5px 線條勾勒輪廓的圖示風格，Filled 則是把圖示填成實心的版本，兩者在 Reicon 裡共用同一組圖示名稱。官方的設計說明提到，Filled 是為了應付被選取、被啟用這類需要強調的狀態。換句話說，平常用 Outline，被點到的時候換成 Filled，畫面的層次就會很清楚。
| 風格 | 外觀 | 適合場景 | 小雅的用法 |
|---|---|---|---|
| Outline | 1.5px 線條，視覺輕盈 | 一般選單、按鈕、說明文字旁 | 導覽列的平常狀態 |
| Filled | 實心，視覺重量較大 | 被選取、已啟用、需要強調的狀態 | 目前所在頁面的圖示 |
| Duotone | 雙色，官方標示為測試階段 | 想嘗鮮或做較有個性的設計 | 只拿來試玩，正式頁面先不採用 |
我會建議先把風格規則訂好，再開始挑圖示，比方說平常只用 Outline，只有選取狀態才換成 Filled。這樣整個網站的視覺會乾淨很多，也比較不會又回到東拼西湊的老問題。至於 Duotone，目前還在測試，現階段玩玩就好。
Reicon 的各種版本與工具有什麼差別？
Reicon 把同一套圖示包成不同的套件與工具，讓你依照使用的環境挑選最順手的入口。選哪個入口不會影響圖示本身，差別只在整合起來的麻煩程度。我把常見的幾種整理成下表，方便對照。
| 入口 | 適合誰 | 怎麼取得 | 差異 |
|---|---|---|---|
| CDN／HTML | 只想快速在網頁上顯示圖示的人 | 載入官方的 CDN 腳本，再用 <re-icon> 標籤叫出圖示 |
不需要建置環境，適合小型網頁或快速測試 |
| React／Vue／Svelte 等框架 | 用前端框架開發網站的工程師 | 用 npm 安裝對應套件，例如 reicon-react、reicon-vue | 以元件方式匯入，只會打包有用到的圖示 |
| Flutter／Compose | 開發行動 App 的人 | Flutter 使用 pub.dev 上的 reicon_flutter，Compose 則有專屬套件 | 直接對應各平台的寫法，不必自己轉檔 |
| Figma 外掛 | 設計師 | 從 Figma 社群安裝外掛 | 設計稿與程式碼用同一套圖示，交付時落差較小 |
| VS Code 擴充套件 | 習慣在編輯器工作的工程師 | 從 VS Code 擴充套件市集安裝 | 不用離開編輯器就能瀏覽與插入圖示 |
| MCP 伺服器 | 使用 AI 編輯器或 AI 助理的人 | 在 MCP 設定檔加入 npx reicon-mcp |
由 AI 搜尋圖示、預覽 SVG 並產生程式碼，不是給人手動瀏覽的介面 |
對小雅來說，她用的是 React，所以直接安裝 reicon-react 最順手；如果她的朋友只想改一個靜態頁面，CDN 反而更省事。我的建議是先看自己現在的開發環境，別一開始就想把所有工具都裝齊。有需要再加，才不會讓專案變得複雜。
Reicon 的 MCP 伺服器是什麼？
MCP 是讓 AI 助理連接外部工具與資料的通用協定，而 Reicon 的 MCP 伺服器，就是讓 AI 能直接查詢並使用 Reicon 圖示的橋樑。設定方式不複雜，只要在支援 MCP 的 AI 編輯器（例如 Claude 或 Cursor）設定檔裡，加入執行 npx reicon-mcp 的指令就行了。官方提供 search_icons、view_icon、apply_icon 與 list_categories 四個工具，分別負責搜尋、預覽、產生程式碼與列出分類。搜尋索引內建在套件裡，所以安裝完成後不需要連網查詢。
小雅之後只要對 AI 說「幫我找一個購物車圖示，要 Outline 風格，用在 React 專案」，AI 就能自己去找圖，並產生對應的程式碼。官方文件也提到，它同樣可以當成獨立的指令列工具使用。對不寫程式的人來說，這個功能可能用不到；但對常用 AI 寫程式的人，省下的是反覆切換視窗找圖的時間。我的看法是，圖示庫開始主動配合 AI 工具，會是接下來滿明顯的趨勢，不過實際效果還是要看你的 AI 編輯器怎麼設定。
關於 Reicon 還有哪些常見問題？
以下整理六個讀者最常問的 Reicon 問題，涵蓋授權、風格差異、地區使用與是否值得換用。答案都以官方資料與公開的套件頁面為準。如果你的情況比較特殊，建議再回頭查看官方文件。
Reicon 可以免費商用嗎？
可以。Reicon 採用 MIT 授權，個人與商業專案都能免費使用。因為基礎圖示取材自 Solar Icons 與 Zappicon，建議把授權聲明一併保留。
Reicon 和其他免費圖示庫差在哪裡？
差異主要在三點：圖示統一畫在 24×24 的網格上、每個圖示都有 Outline 與 Filled 兩種版本，以及從 Figma 到 MCP 的完整工具。其他圖示庫也有類似的整合，例如 Lucide 同樣支援多種前端框架，所以最後還是看你喜歡哪一種風格。建議先到官網的 Playground 試幾個常用圖示，感覺對了再決定。
台灣可以直接使用 Reicon 嗎？有地區限制嗎？
我查到的官方資料沒有提到任何地區限制，網站與套件也都是公開的，台灣讀者可以直接使用。不過官網與文件目前是英文介面，第一次使用可能需要稍微適應。好在按鈕名稱都很簡單，多試幾次就上手了。
值得把現有專案的圖示換成 Reicon 嗎？
要看現況。如果現在的圖示已經風格統一、也沒有問題，就沒有必要特地更換。若你覺得畫面有拼湊感，或想讓設計與程式兩邊用同一套圖示，可以先在新專案或單一頁面試用，確認需要的圖示都找得到，再決定是否全面導入。
Reicon 的 MCP 伺服器需要付費嗎？
從公開資料來看，MCP 伺服器同屬開源專案，使用上不需要額外付費。不過你使用的 AI 編輯器本身可能有自己的方案與費用，那是另一回事。建議先確認自己的編輯器是否支援 MCP，再回頭設定 Reicon。
完全不會寫程式也能用 Reicon 嗎？
可以。直接到 Browse Icons 搜尋圖示，再下載 SVG 或 PNG，就能拿去做簡報、文件或社群圖片。下載前還能用 Custom Color 先換好顏色，不需要另外開修圖軟體。
最後，Reicon 值得收藏嗎？
Reicon 是一套把「風格統一」與「整合方便」放在同一個免費方案裡的圖示庫，適合從個人專案到接案的各種需求。回到一開始的小雅，如果她把整個點餐頁換成同一套 Reicon，再訂下「平常 Outline、選取 Filled」的規則，頁面看起來應該會清爽許多。好用的圖示庫不在於數量多寡，而在於整套風格夠一致、拿起來夠順手。在 AI 工具越來越普及的現在，能讓 AI 也找得到、用得上的資源，會比只能手動瀏覽的資源更有優勢。有興趣的人，不妨先到官網的 Playground 玩玩看，再決定要不要導入。