
還記得上次介紹的 System UIcons 專為系統和產品開發設計的免費圖示嗎?這類尺寸較小、精緻且適用於介面設計的圖案相當深得我心,在很多情境下可能都派得上用場,如果你覺得之前推薦的圖示集不太夠用,或者剛好缺少你需要的圖示,可以試著搜尋其他替代方案。小型圖示集選項很多,通常是開放原始碼(Open Source)且包含多種常見常用圖片格式,接下來要介紹的免費圖示包含相當豐富的圖案,需要的朋友可以研究一下。
本文要推薦的「Radix Icons」是一套清晰的 15×15 小型圖示集,由 Modulz 團隊設計,收錄各種在介面、編輯器或網站會用到的圖案,像是箭頭、組件、設計、物件、排版、音樂、對齊方式、抽象、邊框和角、標誌 Logo 等等。Radix Icons 特色是線條設計相當精緻,視覺效果上很清楚,也能很快知道某個圖案代表的意象,使用者可以開啟網站直接預覽完整的圖示圖案(大約有超過 200 個)。

值得一提的是 Radix Icons 提供 SVG 格式,也有適用於 Figma 和 Sketch 格式下載(或以 npm
方式安裝),在預覽時點選圖示圖案會立即複製對應的 SVG 原始碼,就能直接使用到你的專案開發上,非常簡單。
Radix Icons
https://icons.modulz.app/
使用教學
STEP 1
開啟 Radix Icons 網站往下拖曳就能看到完整圖示集,亦可使用搜尋方式找出特定圖案,不過因為圖案不多,只要直接瀏覽應該就能找到需要的圖示。順帶一提,從網站左上角還可切換在淺色、深色的呈現樣貌。

最基本的使用方式是點選圖示後會將 SVG 原始碼自動複製到剪貼簿,貼上就能看到圖示效果。

STEP 2
在 Radix Icons 網站右上角還能找到 Figma、Sketch 格式,或是下載打包好的 SVG 格式。

從 GitHub 頁面能找到更多說明和版本更新,這套圖示集 Radix Icons 採用 MIT License 授權方式釋出。

值得一試的三個理由:
- 清晰的 15×15 小型圖示集,收錄超過 200 個圖案
- 快速複製 SVG 原始碼或下載 Figma、Sketch 等格式
- 無論淺色或深色背景都能獲得相當好的視覺效果