Uicons 超過 4000 個免費圖示下載！適合網頁、應用程式開發者使用

很多年前介紹過「FlatIcon 超過 12000 個平面化圖示設計免費下載」設計資源，時至今日它已經是個非常龐大的素材庫，這家公司旗下還有包含 Freepik、Slidesgo 等知名的網站，前陣子剛推薦過 Icons Pattern 以 Flaticon 提供的圖示製作無接縫背景圖片工具，對於要產生重複拼接效果的素材很有用，接下來還要再推薦一個也是 Flaticon 旗下的免費工具，如果需要開發網站、軟體或應用程式可以研究一下。

接下來要介紹「Uicons」是 Flaticon 提供的一套最佳使用者介面免費圖示，一共超過 4,000 個 SVG、經過網頁字型最佳化處理的向量圖示，特別適合使用於網頁、iOS 和 Android 應用程式開發者。

Uicons 是以簡單線條構成的圖示圖案，依照邊線粗細分為 Regular、Bold 或是填滿效果（Solid），也有圓角或是直角差異，使用者透過 Uicons 頁面檢視、預覽不同的圖示樣式，或是以搜尋關鍵字查找特定的內容，每個圖示都能下載 PNG、SVG 或 iOS、Android 開發者適用的素材格式，更簡單的方法直接下載完整圖示集。

此外，Uicons 也有對應的內容傳遞網路（CDN）鏈結，只要在網頁就能以程式碼帶入特定圖示。

Uicons 使用的授權方式可在網站找到，簡單來說，使用到圖示時需要標示出處來源，並且加入一個鏈結連回 Uicons 網站（同時標示圖示由 Flaticon 提供），可點選網站右上角「How to attribute?」查看詳細說明，包括在社群網站、網頁、印刷品、影片、應用程式或遊戲使用 Unicons 的署名方式。

Uicons
https://www.flaticon.com/uicons

使用教學

STEP 1

開啟 Uicons 頁面後會看到許多介面圖示，從上方輸入關鍵字搜尋特定圖示圖案，或是選擇使用一般邊框粗細、較粗的粗體邊框或是填充顏色的圖示樣式。

圖示的邊緣也能切換為圓角或是直角，選擇後會在預覽頁面自動重新整理預覽圖。

STEP 2

點選任一圖示圖案後 Uicons 會顯示更大張的預覽圖，其中還會有圖示名稱、標記（Markup）、各種格式下載按鈕、標籤和其他樣式預覽功能。

STEP 3

如果想預覽不同的顏色配色組合，圖示左下角「調色盤」可以切換為其他顏色。點選要下載的圖示格式時會有對應的選項，例如選擇 PNG 會有 16px 至 512px 不同大小尺寸選項。

STEP 4

點選「Need help to start?」鏈結時會顯示下載按鈕或是 CDN 鏈結，簡單來說，使用者可以下載完整的 SVG 格式、字型檔案或是以 CSS 方式在網站特定位置帶入圖示，也就是自行託管圖示相關檔案；另一種作法是在網頁或透過 @import 載入 Uicons 提供的鏈結，一樣也能在網站載入特定內容，不過無論選擇的是那種方式都需要先免費註冊帳號。

註冊後就會顯示「Download pack」下載鏈結或是 CDN 鏈結，依照使用者需求選擇使用的方式即可。

STEP 5

當開發者在網頁載入 .css 格式時，就能透過網站提供的標記語法載入特定圖示，也可以自訂大小、顯示位置、顏色等各項參數，這部分就不在本文多做說明，開發者就花點時間找找資料自行研究一下。