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 格式时，就能透过网站提供的标记语法载入特定图示，也可以自订大小、显示位置、颜色等各项参数，这部分就不在本文多做说明，开发者就花点时间找找资料自行研究一下。

值得一试的三个理由：

1. Uicons 是 Flaticon 提供的使用者介面免费图示，收录 4000 个图示图案
2. 免费下载 PNG、SVG 或 iOS、Android 应用程序开发者适用的格式
3. 三种不同粗细边框、圆角和直角风格，使用时需标示出处来源