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

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

如果你想製作網站或開發應用程式,可能會需要一套簡單、好看且易用的圖示素材,除了不需要重新開發圖示,也會提供明確授權方式標示出適用範圍,例如之前推薦過的 Radix IconsSystem UIconsBasicons 等免費圖示集都很適合使用,現在大多數圖示也都會採 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 程式碼需要先登入,建議可以將這個步驟放到一開始就先進行。

Iconic

STEP 2

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

Iconic

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

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

Iconic

STEP 3

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

Iconic

值得一試的三個理由:

  1. Iconic 收錄超過 190 個圖示圖案,可自由下載、使用於任何地方
  2. 線條簡單,採用 24×24 邊界框、1.5px 畫筆粗細,免費下載 SVG 檔案
  3. 每週加入新圖案,需要先登入帳號才能下載或複製 SVG 程式碼
分享到...