Iconic 用心設計的免費 SVG 圖示集，每週更新加入新圖案

如果你想製作網站或開發應用程式，可能會需要一套簡單、好看且易用的圖示素材，除了不需要重新開發圖示，也會提供明確授權方式標示出適用範圍，例如之前推薦過的 Radix Icons、System UIcons、Basicons 等免費圖示集都很適合使用，現在大多數圖示也都會採 SVG 格式，讓使用者自訂大小、顏色或是進行細部調整，甚至是直接將 SVG 程式碼複製就能套用到網頁中。

本文要介紹的「Iconic」是最近發現的免費圖示網站，收錄 190 個圖案（持續增加中）、可用於網站或應用程式開發的素材，依照圖案類型進行分類，像是箭頭、商業、通訊、裝置設備、基本圖示、操作介面、音樂、電影或影片等等，這些圖形設計共通點是線條很簡單，24×24 邊界框、1.5px 畫筆粗細，提供 SVG 格式免費下載。

Iconic 圖示可自由使用於任何地方，也是賞心悅目（Pixel-perfect）的免費圖示設計。每週會加入新圖案，不過在下載或複製 SVG 程式碼前需要先登入帳號，亦可打包一次下載所有 SVG 圖案。

Iconic
https://iconic.app/

使用教學

STEP 1

在開啟 Iconic 網站後可先點選右上角「Sign Up」輸入你的 Email 地址，Iconic 會將登入鏈結寄到信箱，省去以往註冊需要設定密碼或輸入個人資訊的繁複步驟。因為在 Iconic 下載或複製 SVG 程式碼需要先登入，建議可以將這個步驟放到一開始就先進行。

STEP 2

從左側圖案分類點選要瀏覽的類別，圖示會顯示於右側欄位，包括有圖片預覽、名稱，可以看到每個分類後方有圖示數量，目前總數 190 個，每週會更新並加入新的圖案。

點選任一圖示後會出現更大的預覽圖，可以看到在不同尺寸大小、背景顏色呈現的效果。如果要下載圖示檔，點選「Download」就能取得 SVG 格式檔案，若要直接取得 SVG 程式碼也可點選「Copy」複製到剪貼簿。

無論是下載或複製程式碼都需要先登入 Iconic。

STEP 3

右上角有一個「下載」按鈕，可以將 Iconic 網站的所有圖示一次打包、下載回來，Zip 壓縮檔在點選後會跳出下載視窗，React 或 Vue 會引導至 GitHub 頁面找到完整說明及檔案。