Icones

网站描述

集合了现在市面上所有的图标 packs，118种图标库非常强大的搜索功能可以直接以多种格式使用：甚至可以直接下载 React 或者 Vue 组件或者是和 UnoCSS 一起使用，太棒了。我想推荐给所有的前端开发者，特别谢作者X @antfu7 , 治好了我的图标选择困难症。

访问网站

Icones是什么

Icones 是 Anthony Fu 做的一个图标聚合平台，把主流的图标库都整合到一个地方了。现在有118个图标库，总共20多万个图标，包括 Material Design、Heroicons、Lucide 这些常用的。用起来挺简单的，直接搜索就行，支持实时预览。点击图标可以复制 SVG 代码，也能导出 PNG、SVG 等格式。如果你用 React 或 Vue 开发，还能直接生成组件代码。配合 UnoCSS 使用体验更好，可以直接用 class 名称来显示图标，不用额外导入文件。对前端开发来说还是挺实用的。

首页 - 图标搜索界面

如何使用Icones

使用很简单，基本没有学习成本。

搜索图标
在首页搜索框输入关键词，比如 home、user、settings 等，结果会实时显示。

选择图标
点击喜欢的图标，会显示详情页面，包括来源库、作者、协议等信息，右侧有各种导出选项。

复制代码
直接复制 SVG 代码到项目中使用，或者选择生成 React、Vue、Svelte 组件代码。

其他用法：

UnoCSS 用户可以直接复制 class 名称，如 i-heroicons-home
按住 Ctrl 可以多选图标，批量导出
在设置页面可以管理显示的图标库

Icones 的特色

海量图标库整合

118个主流图标库，超过20万个图标，从Material Design到小众精品应有尽有

智能搜索引擎

输入关键词实时搜索，支持模糊匹配和多语言，找图标比找表情包还快

一键代码生成

直接生成 SVG、React、Vue、Svelte 组件代码，复制粘贴就能用

UnoCSS 完美集成

支持 class 名称直接使用，配合原子化CSS框架体验丝滑

批量操作支持

多选图标一键导出，还能自定义尺寸和颜色

PWA 离线支持

安装到桌面当本地应用用，没网也能搜索已缓存的图标

Icones 的使用场景

前端快速开发

做原型或者快速开发时，直接搜索复制，不用纠结图标风格统一性问题

设计系统构建

为公司或项目挑选合适的图标集，统一视觉语言

学习和参考

浏览不同风格的图标设计，找灵感或者学习图标设计规范

跨框架项目

一个图标在 React、Vue、原生HTML 项目中都能快速使用

Icones 优缺点

优点

图标数量很多，基本能找到需要的

搜索速度快，实时显示结果

支持多种导出格式和代码生成

和 UnoCSS 集成方便

界面简洁，没有多余元素

完全免费开源

支持 PWA，可以离线使用

社区活跃，问题能得到解答

缺点

图标库质量参差不齐

需要注意各个库的版权协议

批量操作功能比较基础

不支持在线编辑图标

Icones 常见问题

Q1: 图标可以商业使用吗？

取决于具体的图标库。每个库的协议不同，MIT、Apache、CC 等都有。点击图标详情页可以查看协议信息。主流的如 Heroicons、Lucide 等通常都支持商业使用。

Q2: 如何配合 UnoCSS 使用？

安装 @iconify/json 包，在 UnoCSS 配置中添加 iconify 预设，然后直接使用 class 名称如 i-heroicons-home，无需额外导入。

Q3: 可以下载整个图标库吗？

Icones 主要提供单个图标下载。如需整个库，建议去原始项目的 GitHub 仓库下载。对大多数项目来说，按需选择图标更合适。

Q4: 能上传自定义图标吗？

不支持上传功能。Icones 是图标库聚合平台，不提供托管服务。如需分享自定义图标，可以创建 Iconify 格式的包或独立的图标库项目。

Q5: 为什么搜不到某些图标？

可能是关键词不匹配，或者相关图标库在设置中被禁用了。建议尝试不同的英文关键词，或检查设置页面中启用的图标库。