
Lucide 是一套很美觀、具有一致性風格的免費圖示,由社群成員協同創作,圖示不僅看起來非常乾淨簡潔,在設計上遵循嚴格的設計規範以保持樣式和可讀性。使用者可以從網站查看、預覽所有的圖示圖案,還能夠進行自訂,包括顏色、尺寸大小、筆畫寬度等等,可自訂性強,從網站快速下載 SVG 向量圖、PNG 格式。
Lucide 目前收錄超過 1500 個圖示,涵蓋設計、程式碼與開發、導航、社交等多達 40 多種分類,包括食品飲料、醫療、交通、天氣等實用領域都能在這裡找到,滿足各種工作實務需求。
另一個值得一提的是 Lucide 支援各種前端開發工具和 JavaScript 框架,例如 Vanilla、React、Vue、Svelte、Preact、Solid 和 Angular,也能快速複製 SVG、Data URL 或下載 PNG 格式,如果在開發或設計上會用到各種圖案可以來 Lucide 找找看。
網站名稱:Lucide
網站鏈結:https://lucide.dev/ (GitHub)
使用教學
開啟 Lucide 網站後會看到圖示專案的相關介紹和說明,也有一個可自訂化的工具可以試用一下,點選「View all icons」或是右上角 Icons 進入圖示頁面,預覽圖示圖案和操作都會在這個介面上進行。

從左上角「Customizer」自訂功能調整圖示顏色、筆畫寬度、圖示大小就會即時顯示在右側編輯區,還能輸入關鍵字來篩選出相關的圖示圖案。

左側一整排是圖示分類,還會列出目前收錄的圖示數量。

點選任一圖示會在下方顯示更大張的預覽圖,資訊相當詳細,包括這個圖示的名稱、描述、相關標籤、貢獻者,也能快速複製 SVG 或是 JSX 語法。

點選「See in action」後會進入圖示的詳細資訊頁面,在這裡就能找到 Vanilla、React、Vue、Svelte、Preact、Solid、Angular 開發框架對應的程式碼。
如果是網頁使用也可以選擇「Icon Font」圖示字型。

除了複製語法也能點選下載按鈕,找到對應的格式,例如 SVG 向量圖、Data URL 或是下載 SVG、下載 PNG 。

值得一試的三個理由:
- Lucide 是開放原始碼免費圖示集,收錄超過 1500 個圖案
- 支援各種前端開發工具和 JavaScript 框架
- 採用 ISC License 授權方式,適合個人和商業用途