Lucide Icons:收錄 1500 個圖案的免費開源圖示集,支援各種前端工具和開發框架

Lucide dev icons 1.

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 進入圖示頁面,預覽圖示圖案和操作都會在這個介面上進行。

Lucide dev icons 2.
自訂圖示樣式

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

Lucide dev icons 7.jpg.
以分類或搜尋找到特定圖示

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

Lucide dev icons 3.jpg.

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

Lucide dev icons 4.
複製開發框架程式碼,下載特定格式

點選「See in action」後會進入圖示的詳細資訊頁面,在這裡就能找到 Vanilla、React、Vue、Svelte、Preact、Solid、Angular 開發框架對應的程式碼。

如果是網頁使用也可以選擇「Icon Font」圖示字型。

Lucide dev icons 5.

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

Lucide dev icons 6.

值得一試的三個理由:

  • Lucide 是開放原始碼免費圖示集,收錄超過 1500 個圖案
  • 支援各種前端開發工具和 JavaScript 框架
  • 採用 ISC License 授權方式,適合個人和商業用途
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6515