SVG / 017
SVG 小圖示庫
整理常用 SVG UI 圖示，可切換靜態與動態版本，並直接複製 SVG 程式碼使用。
打勾
關閉
選單
搜尋
愛心
星星
向右箭頭
向下展開
新增
移除
重新整理
下載
上傳
通知
為什麼做這個
臨時需要簡單 UI 圖示時，比起重新找素材，直接複製一份可調整的 SVG 更方便。這個小圖示庫以一致的線條風格整理常用圖示，部分圖示另提供動畫版本。
這個怎麼用
切換「靜態／動態」會套用到整組圖示。靜態版本是最單純的 SVG 線稿；動態版本會把對應的 CSS 動畫直接寫進同一個 SVG 檔案的 <style> 標籤裡，複製整段貼上就是會動的圖示，不需要另外掛 CSS 檔或加 class。
動畫是依用途配的，不是每個圖示都套同一種效果：打勾用「畫出來」的描邊動畫、重新整理用旋轉、上傳下載用對應方向的彈跳、鈴鐺與叉叉用搖晃、愛心星星與搜尋用脈衝縮放。
圖示走 24×24 的線稿風格（stroke 2px、圓角端點），線條顏色都是 currentColor，貼到你自己的專案後，用 CSS 的 color 屬性就能換色，不用改 SVG 內部的程式碼。
複製出來的是完整的 SVG 原始碼，可以直接貼進 HTML、Vue 元件或設計工具，不需要另外下載檔案。
常見問題
動態版本會不會要另外載入 CSS 檔？
不用。動畫寫在複製出來的 SVG 檔案自己的 <style> 標籤裡。要留意的是用 <img> 標籤嵌入 SVG 時，瀏覽器不會執行 SVG 內部的 CSS 動畫——要直接貼 SVG 原始碼（inline SVG）或用 <object> 嵌入才會動。
可以換顏色嗎？
可以。圖示的線條都是 stroke="currentColor"，貼到你的專案後，在外層容器或 SVG 本身設定 CSS 的 color 屬性就能換色，不用改 SVG 內部的程式碼。
圖示可以商用嗎？
可以。圖示的線稿風格沿用專案本來就在用的 Lucide 圖示集（ISC 授權，可自由用於商業專案），這裡是把它們整理成可以直接複製、且內建動畫版本的形式。