手繪風 SVG 圖示的三條路：近 9 萬個免費圖庫、把 Lucide 弄歪的生成器，還有那張沒人看的授權頁

🌏 English version

Koboyo Icons 掛著近 9 萬個免費手繪風 SVG 圖示，免費商用、免署名、不用註冊。這個量級在免費圖庫裡是離譜的——Streamline 號稱業界最大的手繪集 Freehand，單一 set 是 11,171 個，而且要錢。

不過這個數字別當常數看。寫這篇的當天早上首頁與授權頁一致標示 92,967，幾小時後再看變成 87,954，Google 索引裡還存著更早的 71,238；隔天（2026-08-06）再看又回到 90,150。所以這不是單向刪減，而是上下跳動——本文用「近 9 萬」而不寫死數字，你看到的時候大概又是另一個。

而且還有另一個對不上的地方。koboyo.com/sitemap.xml 是單一的 flat <urlset>（不是 sitemap index，沒有分片），整份只列 18,044 個 URL，扣掉分類頁與站務頁之後約 17,930 個是圖示頁——跟授權頁宣稱的 90,150 差了五倍。

這不等於圖庫只有 1.8 萬個圖示：沒進 sitemap 的圖示照樣能透過站內搜尋或 /icons/svg/<name>.svg 直接取得。但它確實代表能被搜尋引擎發現、以及你實際瀏覽得到的，遠少於首頁那個數字。如果你的評估理由是「覆蓋率最高」，值得先搜幾個你真正需要的冷門概念，而不是相信總數。

而在下載之前，更值得先讀授權頁，因為那裡有一段話會直接決定你能不能用。

而且「我想要手繪感的圖示」在 2026 年其實不只有「去找一個手繪圖庫」這一個答案。這篇拆三條路：收現成的圖庫、用程式把既有幾何弄歪、AI 生成。第二條路的技術細節最有意思，也最少人講。

如果你要的是向量動畫而不是靜態圖示，站上另有一篇 Text / Image to Lottie 全景導讀；要 3D 資產的話是 2026 做 3D 模型的工具地圖。這篇補的是靜態 2D 向量這一塊。

你要什麼？
├── 覆蓋率最高，能接受授權限制 ────→ Koboyo（近 9 萬）
├── 授權要最乾淨（CC0）───────────→ Khushmeen（400+）
├── 品質一致、願意付費 ───────────→ Streamline Freehand（set 11,171，$19/月起）
├── 已經在用 Lucide，想換個調性 ──→ sketchyicons（生成，MIT）
├── 要自己畫的東西也有手感 ───────→ Rough.js / tldraw 的做法
└── 給 AI agent 自己找圖 ─────────→ icons0.dev / theSVG（MCP）

第一條路：現成圖庫，真正的變數是授權不是數量

Koboyo 那段容易漏掉的限制

Koboyo 授權頁的「You can't」寫得很白：

Resell or redistribute the library (or any substantial part of it) as an icon collection, on a stock/marketplace site, or as a competing icon product, modified or not.

Build a competing product with them, such as an icon library, or a canvas, whiteboard, diagramming, presentation or drawing app like koboyo.com.

Bundle the icons into any app where they are the feature, or where users can pick, extract, download or re-share them.

第一條是所有圖庫都有的防轉售條款，沒問題。第二、三條才是重點：做白板、圖表、簡報或繪圖 app 不能用（Koboyo 本體就是一個無限畫布），而且只要你的使用者能在你的 app 裡挑選圖示、抽取或下載，就踩線了。

翻成人話：拿去當自己網站或產品的 UI 圖示，沒問題；做一個讓使用者挑圖示插到文件裡的編輯器，不行。這跟 CC0 的差距非常大，而它偏偏是免署名、看起來最沒有負擔的那一種授權文案。

授權頁對圖示來源的說法是「The icons are curated, corrected and organised by hand」——講的是整理校正的過程，沒有說明繪製方式。（實際瀏覽會看到大量系統性變體，例如同一個概念有 drawn boldly / hand drawn loosely / at a slight angle / with a soft shadow 四種版本，interface 分類則是 A card of / A grid of / A list of / A panel of 乘上 activity、calendar、comments 等等的笛卡兒積。這種命名結構通常來自批次生成，但這是我從命名模式的推論，官方沒有明說。）

七家的規模與授權

Streamline 的定位跟其他家不同：它是唯一由真人團隊長期維護的商業選項，官方頁面說 Freehand 建在 24px grid 上、「varying stroke thickness creates an artistic look」。要一整套風格一致到可以撐起產品的手繪圖示，這仍然是最穩的答案。

代價全部寫在授權條款裡，而且不只一條：

Use up to 100 icons, 50 illustrations, 50 elements, or 50 emojis per project.

It's 100 unique icons per project, so if you repeat one icon 10 times, it still counts only as one.

這個 allowance 常被誤傳成硬天花板，其實同一份條款第 6 節有 Extended Allowance License 可以加購解除。但另外三條沒有解套，而且對開發者更容易踩到：

• 開源專案即使付費也強制署名——「attribution is mandatory when incorporating our icons into open-source projects, including proper credits and a link to streamlinehq.com」。付費買斷不等於免署名，這點跟多數人的直覺相反。
• 禁止用於 AI 訓練（「Do not use assets for AI training」）。
• 每個組織只有一位 licensed user 能存取向量原始檔，其他設計師與工程師只能用已挑好的那批；要多人取用得另外加購席次。

也就是說，選 Streamline 前要算的不只是圖示夠不夠，還有你的專案是不是開源、團隊有幾個人要碰原始檔。

Khushmeen 則是另一個極端：只有 400 多個，但 CC0、免署名、零限制，還有 Figma 檔。react-doodle-icons 把其中 439 個包成 MIT 授權的 React 元件，單一 icon 約 200 bytes。如果你的需求是「常用 UI 圖示換成手繪風」而不是「什麼冷門概念都要有」，這個組合的麻煩最少。

第二條路：不收圖，把幾何弄歪

這條路的前提反過來：不去找手繪圖示，而是拿一套幾何嚴謹的圖示，用程式在渲染前把座標打亂。好處是覆蓋率等於來源圖庫（Lucide 有 1,500+ 個）、授權跟著來源走、而且風格強度可以調參數。

sketchyicons：拿 Lucide 的幾何，用名稱當種子

sketchyicons 有 1,500+ 個圖示，但它對自己的描述是「Nobody drew them」：

A generator takes Lucide's geometry and bends every line, seeded per icon so your build and mine produce it byte for byte.

演算法是兩趟 pass，官網講得很清楚：

Every straight run becomes a quadratic whose control point sits off the midpoint by a fraction of the run's own length. Then every coordinate moves. Both are seeded from the icon name, so the result is identical on every machine.

拆開來就三件事：

1. 每段直線變成一條二次貝茲曲線，控制點從中點偏移，偏移量是該線段自身長度的一個比例——不是固定像素值。
2. 所有座標再整體位移一次。
3. 兩趟的亂數都用 icon 名稱當種子，所以是 deterministic 的：同一個 icon 在任何機器、任何次 build 產出完全相同的 path data。

第 1 點的「按線段長度比例」是整個設計的關鍵，它讓緊湊的形狀自動收斂：

A coordinate cannot wander further than the run it belongs to and still be that run, so tight shapes barely move. That is the point rather than a limitation: everybody knows exactly what a chevron looks like, so a shaky one reads as broken, while a feather can wander and still look deliberate.

這句話點出手繪風圖示真正的難處：抖動要放在哪裡是有語意的。chevron 抖了讀起來像壞掉，feather 抖了才像刻意。用比例而非絕對值當偏移上限，等於免費得到這個判斷。

另一個容易被忽略的實務問題是尺寸。sketchyicons 的規格是必須在 15px 撐得住：

That is the size an interface actually uses inside a control, and it is where a wobbly stroke turns to mud. An icon that only reads at 24 is not finished.

這是很多手繪圖示集在 demo 頁好看、放進真實 UI 就糊掉的原因——demo 都是 48px 或更大。

授權上 sketchyicons 也交代得乾淨，官網頁尾寫著：geometry 衍生自 Lucide 1.27.0（ISC），generator 與 npm packages 本身是 MIT，並註明未獲 Lucide 背書。API 完全對齊 Lucide（size / color / strokeWidth / absoluteStrokeWidth），所以既有專案切換只要改 import 那一行。它按框架拆成獨立套件（@sketchyicons/react 492 B、@sketchyicons/vue 466 B、@sketchyicons/data 250 B），Vue 專案不會在依賴樹裡看到 React。

tldraw：用 shape ID 當種子，兩趟疊描邊

同一個問題，tldraw 在畫布上的解法更複雜，因為它的形狀會被使用者拖拉縮放——抖動必須在變形之後仍然穩定，否則每次 resize 圖形都在重新抽搐。

他們的做法同樣是找一個穩定的種子：

Since every shape has a unique and stable ID, we can use this ID as the seed for the generator.

在這之上還加了兩層：

• 多趟疊描邊模擬墨水：「we render each path multiple times, with each pass using slightly different random offsets」，每趟改一次種子，預設兩趟。單一條抖動的線看起來還是電腦畫的，疊兩趟才有筆尖壓過紙的厚度。
• 依轉角角度動態圓角：「A sharp 90° corner needs significant rounding to look hand-drawn, and a corner closer to 180° needs far less.」尖角要大幅倒圓才像手畫，鈍角則幾乎不用——而且圓角量還要依線段長度 clamp，免得短邊被整個吃掉。

這兩個細節解釋了為什麼 Excalidraw 和 tldraw 的手繪感看起來「不假」，而很多同類工具只是加了一層抖動 filter。

這條路的地基：Rough.js

上面兩者的共同祖先是 Rough.js——小於 9 kB gzipped、MIT 授權，提供線、弧、多邊形、圓、以及 SVG path 的 sketchy 渲染，roughness 和 bowing 兩個參數直接控制潦草程度。Excalidraw 就是建在它上面，也是它的 sponsor。

同一位作者（Preet Shihn）還做了 Wired Elements（MIT，GitHub 10.8k stars），把 Rough.js 包成一整套手繪風的 web components——button、input、slider 那些。官網那句話是這條路線的精神註腳：

The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes.

值得注意的是它跟 sketchyicons / tldraw 的取捨方向相反：Wired Elements 刻意讓每次渲染都不同，適合 wireframe 和 mockup；而要進 production 的圖示則需要 deterministic，否則 diff 和快照測試會一直紅。

第三條路：AI 生成，目前最弱的一環

Clearly 提供六種 style pack（line、filled、duotone、brutalist、hand-drawn、isometric），走 BYOK 模式——自己帶 Claude 或 OpenAI 的 API key，由模型直接寫出 SVG code。它對自己的定位講得很誠實：固定圖庫在「你需要一個 search-without-magnifier 這種領域特定圖示」時就沒轍了，生成才能補這一段。Vexura 則是純線上工具，每天 3 個免費 credit。

但這條路現在的問題不是畫得像不像，而是一致性。圖示的價值有一大半來自「同一套裡每個 icon 的筆畫粗細、留白、視覺重量都一樣」，而逐個 prompt 生成天生就會漂移。Clearly 用 brand kit 想解這題（付費層），但目前沒有任何 AI 生成方案能達到 Streamline 那種一致度。

比較實際的用法是混搭：主體用固定圖庫或生成器保證一致性，只在缺特定概念時用 AI 補幾個。另外注意 Clearly 的授權分層——免費層輸出僅限個人用途，商用要 Pro。

順帶一提：圖示搜尋正在集體往 MCP 靠

查資料時最明顯的趨勢是，新一代的圖示聚合器全部在做 AI agent 入口——連本文開頭的 Koboyo 也在同一條線上，它的圖示頁掛著「Use with AI · MCP」，登入後就能從 Claude、Codex、Cursor 直接取用：

其中 i0 的檢索設計值得單獨看：依其 GitHub repo 說明，它把 303k 個圖示的 SVG body 全部存進 Turso（libSQL），FTS5 關鍵字檢索（porter stemming）與 DiskANN 向量索引平行跑，再用 RRF 融合；embedding 是 gemini-embedding-001 的 256 維。這正好是站上 Hybrid Search：BM25 + 向量 + RRF 那套架構的一個具體應用——圖示搜尋其實非常吃這個組合，因為「一個表示『刪除但可復原』的圖示」這種查詢純關鍵字打不中，而「trash」這種精確詞又是純向量容易漂掉的。

實務上的意義是：如果你用 Claude Code 或 Cursor 寫前端，讓 agent 自己去 MCP 找圖示、直接產出 React 元件，比你切到瀏覽器搜尋再複製貼上快得多。

怎麼選

• 要授權最乾淨、不想讀條款 → Khushmeen（CC0）
• 要覆蓋率最高，而且你的產品不是畫布／編輯器類 → Koboyo，但先確認使用者不能在你的 app 裡挑選或下載這些圖示
• 已經在用 Lucide → sketchyicons，換一行 import
• 要做整套設計系統、風格一致度優先 → Streamline Freehand，但先確認專案不是開源的（開源即使付費仍強制署名），並算好每專案 100 個的 allowance 與席次要不要加購
• 要在自己的畫布／白板產品裡畫手繪圖形 → Rough.js，並參考 tldraw 的穩定種子與多 pass 做法
• 要讓 AI agent 自己找圖 → icons0.dev 或 theSVG 的 MCP server

最後一句提醒：這個題目最容易翻車的地方不是選錯風格，是沒讀授權。手繪風圖庫的授權離散度遠高於一般 UI 圖示集——同樣寫著「免費商用」，CC0、強制回連、禁止競品這三種的實際約束天差地遠，而它們的首頁看起來都一樣友善。

更新紀錄

• 2026-08-06：Koboyo 的數字又動了——授權頁從 87,954 回到 90,150，所以原本「一天內少 5,013 個代表在主動刪減」的推論不成立，改寫成上下跳動。同時查了 sitemap.xml：是單一 flat urlset，只列 18,044 個 URL、約 17,930 個圖示頁，跟宣稱數字差五倍，這段一併補進第一節與圖庫比較表。

參考資料

• Koboyo Icons — 宣稱近 9 萬個免費手繪 SVG
• Koboyo Icons 授權條款 — 禁止競品與「圖示為主體」app 的原文；2026-08-06 標示 90,150
• Koboyo sitemap.xml — 單一 flat urlset，2026-08-06 實測 18,044 個 URL（約 17,930 個圖示頁）
• Koboyo 無限畫布 — 圖庫所屬的本體產品
• sketchyicons — 1,500+ 個由 Lucide 幾何生成的手繪圖示，含演算法說明
• sketchyicons GitHub — generator 原始碼（MIT）
• Lucide License — ISC，Feather 衍生的部分為 MIT
• Engineering imperfection with draw shapes · tldraw — shape ID 當種子、多 pass 疊描邊、動態圓角
• Rough.js — sketchy 渲染函式庫（MIT，< 9 kB gzipped）
• Wired Elements — 建在 Rough.js 上的手繪風 web components
• Excalidraw — 開源手繪風無限畫布
• Khushmeen Doodle Icons — 400+ 個 CC0 手繪圖示
• react-doodle-icons — Khushmeen 圖示的 MIT React 封裝
• Streamline Freehand — set 11,171 個商業手繪圖示
• Streamline 定價 — 訂閱與買斷方案，Freehand 家族 22,349 個
• Streamline Premium Licenses — 每專案 100 個 allowance、Extended Allowance License、開源署名義務、禁止 AI 訓練、席次限制的原文
• Icons8 Doodle — 2,200 個彩色塗鴉圖示
• Iconro Hand Drawn — 1,010 個需署名的手繪圖示
• doo-iconik — 595 個圖示，15 種框架封裝
• Duma Icons — 451 個手繪 SVG / React 圖示
• Clearly — BYOK 的 AI SVG 圖示生成
• Vexura — 線上 AI SVG 生成工具
• icons0.dev — 223 個 collection 的圖示搜尋
• i0 GitHub — FTS5 + 向量混合檢索與 MCP server 的實作
• theSVG — 6,502+ 個品牌與雲端架構圖示
• IconVaultKit — 200,000+ 圖示聚合搜尋
• Iconstack — 51,378 個圖示，附 API 與 MCP
• All SVG Icons — 286,000+ 圖示、220+ 個庫
• Text / Image to Lottie：AI 動畫生成工具全景導讀 — 向量動畫那一塊
• 2026 做 3D 模型的工具地圖 — 3D 資產那一塊
• Hybrid Search：用 BM25 + 向量搜尋彌補彼此的盲區 — i0 檢索設計的架構背景