精華筆記 網站 icon 還死板板的？5 個動態 icon 庫推薦（大部分免費、可商用）
一個小小的動態 icon，就能讓網站看起來精緻很多：按讚時愛心跳一下、滑過去時箭頭往前推、載入時時鐘轉一圈。以前要做這種效果得找動畫師或自己寫 CSS，現在有很多現成的動態 icon 庫，複製貼上就好。
這篇整理 5 個動態 icon 庫，每一個都去官網確認過數量、價格和授權（2026 年 10 月），最後附上怎麼挑。
一張表看完
| 名稱 | 數量 | 價格 | 授權 | 格式 |
|---|---|---|---|---|
| Lucide Animated | 468 個 | 免費 | MIT | React（Motion） |
| Lordicon | 48,100+ 個（免費 9,700+） | 免費版／PRO $8 美元起 | 免費版需標註來源 | Lottie、GIF、MP4、SVG 等 |
| Potlab Icons | 150+ 個 | 免費 | 開源（授權類型未標明） | SVG、React、Flutter、Figma、Framer |
| Animate UI | 259 個 | 免費 | MIT + Commons Clause | React（Motion） |
| itsHover | 未標明 | 免費 | Apache 2.0 | React（shadcn） |
1. Lucide Animated
網址：https://lucide-animated.com
以很受歡迎的 Lucide 圖示為基礎，用 Motion 加上動畫，目前有 468 個。
- 免費、MIT 授權，個人和商業用途都可以。
- 用 shadcn 指令一行就裝進專案，例如：
pnpm dlx shadcn add @lucide-animated/<圖示名稱> - 有 Svelte、Vue、Angular、Flutter 的社群移植版。
適合：用 Next.js / React 做網站、或用 AI 寫程式（vibe coding）的人。叫 Claude 或 Cursor 直接裝，最省事。
2. Lordicon
目前最大的動畫 icon 庫，官網標示 48,100+ 個，由設計師手工製作動畫。
- 免費版：9,700+ 個 icon，可以調顏色、線條粗細、速度，無限次匯出，可以商用，但要標註來源。
- PRO：年繳每月 8 美元（月繳 16 美元），解鎖 38,300 個 PRO icon，不用標註。
- 匯出格式最齊全：Lottie、GIF、MP4、SVG、PNG、WebP，還有 After Effects 檔。
- 可以設定滑過、循環、變形等不同動態。
適合：做簡報、影片、App、行銷素材的設計師。它是這 5 個裡唯一能直接匯出影片和 GIF 的。
3. Potlab Icons
純 SVG 動畫的 icon 庫，官網寫「100% 免費、開源」。
- 格式很多：SVG、Font、React、React Native、Flutter，還有 Figma 和 Framer 外掛。
- 每個 icon 都能直接「Copy SVG」。
- 官網上的數量寫法有出入（同一頁出現 1,671 和 154+），圖庫實際約 150 多個，授權類型沒有明確寫出來，商用前建議自己確認。
適合：用 Figma、Framer 做設計的人，複製 SVG 就能用。
4. Animate UI
一套開源的 React 動態元件庫，除了按鈕、選單這些元件，也有 259 個動態 icon（同樣是 Lucide 圖示加上 Motion 動畫）。
- 免費，用 shadcn 指令安裝。
- 授權是 MIT + Commons Clause：可以免費用在你的專案裡，但不能把這套軟體本身拿去轉賣。
適合：除了 icon，也想要整套動態元件的人。如果你只需要 icon，跟 Lucide Animated 有些重疊，二選一即可。
5. itsHover
主打「滑鼠移過去才會動」的 icon，安靜時是一般圖示，hover 時才有動畫，比較不吵。
- 免費，可以直接複製程式碼，或用 shadcn 指令安裝。
- GitHub 上的授權是 Apache 2.0。
- 有品牌 icon，也可以許願請作者新增。
適合：想要低調、互動感的網站，例如作品集、SaaS 產品頁。
加碼：想自己做動畫？用 Jitter
Jitter（https://jitter.video）**不是 icon 庫**，而是線上動態設計工具，可以從 Figma 匯入圖示、自己做動畫，再匯出成影片、GIF 或 Lottie。免費版可以存 3 個檔案、匯出 720p。適合想要獨一無二動畫的設計師。
怎麼挑？
- 用 AI 寫 React 網站 → Lucide Animated（一行指令、MIT）
- 要做影片、簡報、GIF → Lordicon（格式最多，免費版記得標註）
- 用 Figma / Framer 做設計 → Potlab Icons
- 想要整套動態元件 → Animate UI
- 想要 hover 才動的低調效果 → itsHover
小提醒
- 動畫不要放太多：一頁裡到處都在動，反而讓人分心。挑重點的按鈕、狀態提示放就好。
- 商用前看授權：特別是 Lordicon 免費版要標註來源，Potlab 授權未明確標示。
- 注意效能：Lottie 動畫檔案比較大，網站上大量使用時要留意載入速度。
更多設計和 AI 工具，追蹤 IG @aihub.tw。