RemixIcon:开源中性风格图标系统（3200+ 图标）

开头

RemixIcon 是一套开源的中性风格图标系统，给设计师和开发者用。它包含 3200 多个图标，分「描边」和「填充」两种样式，全都基于 24x24 的网格绘制，视觉上保持统一。做网页、App 或后台界面时，这一套图标基本够用，不用到处找。

适合谁

• 前端开发者：做网站或后台系统需要大量图标标注按钮、状态和导航。RemixIcon 的风格极简中性，不容易和你的 UI 冲突。
• UI/UX 设计师：在 Figma、Sketch、Adobe XD 里工作，可以直接从官网复制 SVG 矢量图形粘贴使用，省去下载和管理本地文件的麻烦。
• 独立开发者 / 技术折腾党：做个人博客、工具站或开源项目，想快速用上一套免费、风格统一、能商用的图标。RemixIcon 的 Webfont 和 SVG Sprite 两种方式都挺方便。

能解决什么问题

1. 图标风格不统一：从不同地方零散下载的图标，粗细、圆角、视觉重量都不一样。RemixIcon 的 3200 多个图标都按同一套网格规范设计，看起来整齐。

2. 手动管理文件麻烦：不用在本地目录存一堆 SVG 文件。可以直接在官网按需下载或复制，也能通过 npm 或 CDN 引入，随时更新。

3. 修改尺寸和颜色麻烦：用 Webfont 方式时，图标可以像文字一样用 font-size 和 color 控制大小颜色，用 CSS 类（比如 ri-2x、ri-3x）就能缩放，不用一个个去改 SVG 的属性。

怎么开始用

方式一：直接下载

去 remixicon.com 找到想要的图标，可以下载 SVG 或 PNG 格式。设计师直接点 Copy SVG，然后在设计工具里 ⌘+V 粘贴矢量图。

方式二：Webfont 使用（推荐）

安装：

npm install remixicon --save

在入口 JS 文件里引入 CSS：

import 'remixicon/fonts/remixicon.css'

或者用 CDN（在 HTML 的 中添加）：

<link
  href="https://cdn.jsdelivr.net/npm/remixicon@4.9.0/fonts/remixicon.css"
  rel="stylesheet"
/>

然后用 class 名调用，规则是 ri-{图标名}-{风格}：

<i class="ri-admin-line"></i>
<i class="ri-admin-fill"></i>

-line 是描边风格，-fill 是填充风格。具体的图标名需要去官网搜索确认。

控制尺寸（继承父容器的 font-size）：

<div style="font-size: 24px;">
  <i class="ri-admin-line ri-fw"></i>  <!-- 固定宽度 -->
  <i class="ri-admin-line ri-2x"></i> <!-- 2em -->
  <i class="ri-admin-line ri-10x"></i> <!-- 10em -->
</div>

方式三：SVG Sprite

下载 remixicon.symbol.svg 到项目目录，用 引用：

<svg class="remix">
  <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}

优点和坑

优点

• 免费且可商用：个人和商业项目都能免费使用，官方没有额外限制。
• 数量大且风格统一：3200 多个图标，两种风格，一套网格系统，整体很整齐。
• 用起来灵活：支持按需下载、Webfont、CDN、SVG Sprite 好几种用法，能适应不同项目。

坑

• 版本变更注意：从 v2.0.0 开始，class 前缀从 remixicon- 改成了 ri-，如果参考的是老教程，可能会对不上。
• 网站搜索是主力：官方建议从网站按需下载或复制，而不是把整套图标都拉到本地管理。图标名得去官网查，离线的时候不好找。
• CDN 版本要确认：CDN 链接里的版本号（比如 @4.9.0）可以换成任意历史版本，但如果你用的版本和文档示例不一样，一些新图标可能没有。
• 依赖 CSS 类控制尺寸：图标通过继承父元素的 font-size 来缩放，如果不熟悉 CSS 的继承逻辑，刚开始可能觉得尺寸调起来不顺手。

适合你吗

适合：做网站或工具类产品的前端开发者，希望用一套图标解决所有界面标注需求，不想在图标资源上花太多时间。

不适合：如果你需要品牌定制插画、复杂场景的示意图，或者只做纯静态页面、不想引入任何 CSS 文件，那这套图标用处不大。另外，如果对图标风格有强烈的个性化要求，这种「中性风格」可能会显得有点平淡。

本内容由云图AI工坊根据公开资料（GitHub README、官方文档）整理，未进行一手实测，仅供选型参考。

---

常见问题

RemixIcon 图标是免费的吗？可以商用吗？

免费，可以商用。个人和商业项目都能直接用，官方没有额外限制。它提供了 3200 多个图标，包含描边和填充两种风格，是一套开源的中性风格图标系统。

RemixIcon 的官方网站入口是什么？

官网是 remixicon.com。你可以在上面搜索、预览所有 3200 多个图标，直接复制 SVG 代码、下载 SVG/PNG 文件，或者查看 Webfont 和 SVG Sprite 的使用方法。

RemixIcon 怎么安装和使用？

推荐用 npm 安装：npm install remixicon --save。然后在入口 JS 文件里引入 CSS：import 'remixicon/fonts/remixicon.css'。在 HTML 里通过类名使用，比如 ，这里的 -line 代表描边风格。

RemixIcon 总共有多少个图标？

有 3200 多个图标，全都基于 24x24 网格统一绘制，视觉上保持一致。图标分为「描边」和「填充」两种主要风格，能满足网页、App 或后台界面的大部分需求。

使用 RemixIcon 时需要注意什么坑？

主要注意版本变化：从 v2.0.0 开始，class 前缀从 remixicon- 改成了 ri-，老教程可能对不上。另外，图标尺寸靠继承父元素的 font-size 来控制，如果不熟悉 CSS 继承逻辑，可能觉得尺寸调起来不顺手。建议用的时候去官网确认一下图标名。

相关工具推荐

• GitHub 官方开源图标库 Octicons 的技术解析
• 自托管可视化 CMS 方案 Instatic 介绍
• Next.js 项目的 SEO 与结构化数据管理插件 Next SEO