本文重點：Reicon 是免費開源的 SVG 圖示庫，收錄 2,600 多個手繪圖示，提供 Outline 與 Filled 兩種風格，採 MIT 授權，個人與商業專案都能使用，可下載 SVG、PNG、WebP，並支援 React、Vue、Flutter 等框架與 MCP Server。
製作網站、應用程式介面或簡報時，圖示是最容易被忽略卻很影響觀感的小細節，從不同免費圖示網站東抓一個、西湊一個，很容易出現線條粗細不一致、風格對不上的情況，看起來就是拼湊而成，很沒有專業感。開發者還會多一層困擾，找來的圖示格式往往只有 PNG 或 SVG 檔，必須自己命名或是一個個手動匯入，遇到要換色或調整粗細時也會是個問題。
Reicon 是什麼？
本文要介紹的「Reicon」是一套免費開源的向量圖示庫，也是我收藏許久還沒介紹過的免費資源，Reicon 主打「設計師真正想用的圖示庫」，目前收錄超過 2,600 個手繪、像素級的 SVG 圖示，全部採用 MIT 授權，個人與商業專案都能自由使用，沒有額外限制。
網站強調每個圖示都是採用手工繪製，統一在 24×24 的網格上校正，不是用自動描圖或 AI 生成，所以不管縮到 12px 還是放大到 64px 以上，線條都維持清晰銳利，對於講求細節的開發者來說，Reicon 確實是可以考慮的圖示集。
Reicon 的圖示分成 Outline（線條）與 Filled（實心）兩種風格，另外也有還在測試階段的 Duotone（雙色）風格可以先睹為快。整合的廣度也是 Reicon 的重點，除了 CDN、HTML 可以嵌入網頁，還提供 React、Angular、React Native、Vue、Astro、Svelte 等主流前端框架的專屬套件，以及 Flutter SDK 給行動開發者使用，甚至還有 MCP Server，能讓支援 MCP 的 AI 編輯器直接依名稱抓取圖示使用。
先前介紹過的 Lucide 同樣支援 React、Vue、Svelte、Angular 等框架，可以拿來對照。
Reicon 可以免費商用嗎？
Reicon 是免費圖示庫，採 MIT 授權，授權與費用相關資訊整理如下：
| 項目 | 說明 |
|---|---|
| 授權 | MIT |
| 使用範圍 | 個人與商業專案皆可，沒有額外限制 |
| 標示來源 | 建議依專案需求標明來源或保留授權聲明 |
| 費用 | 圖示可完全免費下載，網站採開源與贊助並行，首頁與圖示庫頁面會出現贊助提示，並非強制付費 |
網站資訊
網站標題：Reicon
網站連結：https://reicon.dev/
使用教學
開啟 Reicon 官網首頁，往下捲動會看到「Playground」互動預覽區，可以即時調整顏色、大小（12px 到 64px）與風格（Outline、Filled），用來快速確認某個圖示套用不同設定後的樣子。
點選首頁或導覽列的「Browse Icons」進入圖示庫頁面，左側篩選欄可依「Weights（風格）」選擇 Outline、Filled 或 Duotone（雙色測試版），依「Grid Size」調整縮圖顯示大小（24px、36px、50px、60px），也能從「Categories（分類）」挑選，例如 Arrows、Business、Devices、Faces 等數十種主題分類，上方搜尋框則可直接輸入關鍵字快速找圖示，目前圖示庫共有 2,630 個圖示可瀏覽。
點進任一個圖示，會進入該圖示的專屬頁面，畫面左側是可縮放檢視的圖示預覽，右上角有 Copy JSX、Copy Name 和 Copy SVG 三個快速複製按鈕，方便複製後直接貼進程式碼或設計稿。
在「Export Size」選擇匯出尺寸，提供 16px、24px、32px、48px、64px、128px、256px、512px 多種規格，下方三個按鈕可分別下載 SVG、PNG、WebP 格式檔案。若開啟「Custom Color」選項，還能在下載前先自訂圖示顏色。
頁面下方會依你使用的技術框架（JS、CDN、React、Angular、React Native、Vue、Svelte、Astro、Flutter 等）自動顯示對應的安裝指令與程式碼範例，複製貼上就能在專案裡使用，舉例來說，如果要直接使用在網頁上，可以透過 CDN 載入圖示集，再用程式碼來顯示特定圖案。
若要在多個裝置或框架間快速切換用法，也可以直接到導覽列的「Packages」頁面，一次查看 React、Angular、React Native、Vue、Svelte、Flutter SDK 及 Vanilla JS／CDN 各自的安裝方式與版本資訊。
進階功能：MCP Server、VS Code 擴充套件、Figma UI Kit
Reicon 提供免安裝設定的 MCP Server，只要在支援 MCP 的 AI 編輯器（例如 Claude、Cursor）設定檔加入 npx reicon-mcp 指令，就能讓 AI 直接依需求搜尋、插入 Reicon 的圖示與 SVG 原始碼，這也是目前的主流用法，許多工具和服務都能連 MCP，就能直接整合到自己的 AI 工具。
MCP Server 提供 search_icons、view_icon、apply_icon、list_categories 四個工具，分別負責搜尋圖示、預覽 SVG、產生對應框架的程式碼與列出分類，搜尋索引內建在套件裡，安裝後可離線運作。之前介紹過的 Remix Icon 也有提供 RemixIcon-MCP，有需要可參考。
網站也提供 VS Code 擴充套件，方便在編輯器內直接瀏覽與插入圖示；設計端則有 Figma UI Kit，讓設計師可以在 Figma 裡直接套用與開發端一致的圖示元件，減少交付時的落差。
常見問題
Reicon 可以免費商用嗎？
可以。Reicon 採用 MIT 授權，個人與商業專案都能使用，沒有額外限制，建議依專案需求標明來源或保留授權聲明。
Reicon 支援哪些框架？
提供 CDN／HTML、React、Angular、React Native、Vue、Astro、Svelte 的專屬套件，以及 Flutter SDK，也有 VS Code 擴充套件與 Figma UI Kit。
Reicon 可以下載哪些格式？
單一圖示可下載 SVG、PNG、WebP，匯出尺寸從 16px 到 512px 共八種，也能複製 JSX、名稱或 SVG 原始碼。
Reicon 支援 MCP 嗎？
支援。在支援 MCP 的 AI 編輯器設定檔加入 npx reicon-mcp 指令，AI 就能搜尋圖示、預覽 SVG 原始碼並產生對應框架的程式碼。
探索更多來自 免費資源網 的內容
訂閱即可透過電子郵件收到最新文章。
