Fluenticons 微软 4000 个开放原始码免费图示下载，线上预览风格配色

微软（Microsoft）释出超过 4000 个开放原始码免费图示「Fluent UI System Icons」，一系列大家都感到熟悉、友好和现代化的图案设计，不过在 GitHub 取用这些图案、浏览上并不是很方便，因此有国外开发者另外开发了一个「Fluenticons」网站做为 Microsofts fluent icons 检视器，透过这个工具就能在在线预览、搜寻特定的图示图案，也能切换浅色或深色背景，让下载图示变得更简单。

Fluenticons 收录的图示有 4000 个，而这个检视器也以开放原始码方式释出，任何人都能在 GitHub 找到原始码，Fluenticons 网站就像是一般的免费图示库，直接显示各个图案的预览图、名称，也有搜寻工具、切换不同的风格（Microsofts fluent icons 有两种风格，一种是只有外框、另一种是填满色的样式）。

Fluenticons 让使用者可下载图示的 SVG、PNG、WebP、Vue Component 和 React Component，或是复制程序码、在线调整 PNG 图案尺寸和图示颜色，有想找图示集的朋友可以试试看。

Fluenticons
https://fluenticons.co/

使用教程

STEP 1

开启 Fluenticons 网站后会看到各种图示图案预览，点选右上角「Switch to Filled Icons」将网页图示切换为填满的风格，再点选一次会回到只有外框的 Outlined Icons。

右上角还能切换浅色或深色模式，浏览在不同背景颜色的图示显示样式。

STEP 2

点选图示后在右侧栏位会显示更大的预览图，使用图示右下角「调色盘」工具可设定不同颜色。

STEP 3

透过搜寻框输入关键字会显示所有相关的图示，在 4000 多个图示中任何图几乎都能找到。

STEP 4

点选图示后 Fluenticons 右侧会显示更大张的预览图，预设有 SVG 和 PNG 两种格式可以复制原始码或是下载保存为 PNG 格式，点选下拉选项后还有 WebP、Vue Component 和 React Component 三种格式可用，无论是要直接取得原始码或下载图片文件都很好用。

除此之外，点选「Advanced Editor」开启进阶编辑器，可以设定 PNG 图片大小后即时下载。

值得一试的三个理由：

1. 微软释出超过 4000 个开放原始码免费图示 Fluent UI System Icons
2. 国外开发者製作 Fluenticons 做为图示的在线检视器
3. 可搜寻图示、切换风格、背景和图示颜色，下载多种文件格式