Icones 开源免费图示目录，可下载超过 118 套图示集、14 万个图案

免费资源网络社群介绍过许多免费图示网站，有一大部分是开放原始码的图示集，除了点阵图通常还有向量图和图示字型（Icon font），也能快速调整为各种尺寸大小或颜色，非常适合网页、应用程序和软件开发者。这些图示集具备相当高的设计品质，涵盖各种图案类型，几乎可以说不用再重複开发需要的图示，也能将多种不同图示图案混搭使用，有些设计风格接近即使放在一起也很搭。

本文要推荐的「Icônes」是一个将各种开放原始码免费图示收录在一起的在线目录，直接减少使用者搜寻图示的难度，Icones 一共收录 118 套开源图示集、总图示数量超过 14 万个！在目录中能直接浏览各种图示集、图案和相关资讯，更重要的是还能单独将选择的图示图案打包下载或产生图示字型。

使用者可以浏览、搜寻或是调整检视模式，每个图示都能快速复制载入方式、SVG、SVG Symbol、Iconify、JSX 程序码，适用于 Vue、React、Svelte、Unplugin Icons 元件，也有 SVG、Vue、React 或 Svelte 文件可供下载，或是在 Iconify、UnoCSS 打开该图示取得更多资讯。

另一个方便的功能是利用选取方式将图示加入清单，就能把不同图示集的图示图案一次打包、下载，或是产生为图示字型文件，透过 Icones 在找图示时就不用打开一堆网站搜寻，对开发者真的非常有用。

Icônes
https://icones.js.org/

使用教程

STEP 1

开启 Icones 网站后会看到各种开源图示集，例如大家很熟悉的 Font Awesome、Google Material Icons、Noto Emoji、Octicons 和 IconPark，很多我们都曾经介绍，依照类型还分为一般、动画图示、表情图案（Emoji）、品牌 / 社群网站、地图 / 国旗、主题等等。

STEP 2

点选任一个图示集后就会载入部分图示，如果图示数量太多不会一次载入，可点选下方按钮载入更多（或是完整载入所有图示），左侧还会列出其他的图示集，包含每个图示集收录的图示数量。

STEP 3

每个图示集会有原始网站链结（在标题右侧）、作者、授权方式及标籤，可利用关键字快速找出特定图示。

右上角有个选单可切换小型、大型图示尺寸或以条列方式排序，开启複选模式或点选就复制名称的模式，前者有助于选取多个图示图案、再打包将它们下载，利用右上角选单能找到下载为 Iconfont、SVG、ZIP 格式选项。

STEP 4

点选任何的图示后下方会展开详细资讯，会有图示名称、加入 Bag，还有像是 SVG、SVG Symbol、Iconify、JSX 程序码、Vue、React、Svelte、Unplugin Icons 元件、链结、下载等等，可以说各项资讯非常全面。

STEP 5

当使用者开启複选模式、或是在特定的图示点选「add to bag」后就会在右下角找到这些图示，有点类似购物车的概念，开启 bag 后就能点选下方「Download Zip」将所有图示图案打包下载，或是「Generate Icon Fonts」产生图示字型。

值得一试的三个理由：

1. Icones 收录 118 套开源图示集，图示数量超过 14 万个
2. 浏览每个图示图案、搜寻或调整检视模式，提供各种格式下载
3. 选择各别图示、将所选内容打包为 ZIP 格式或产生图示字型