Name: Remix Icon
Rating: 5.0 (8418 reviews)

项目概述

Remix Icon 是一套广受全球设计师与开发者青睐的开源中性风格系统图标库。收录了超过 2800+ 款专业图标，全面覆盖商业金融、通讯交流、硬件设备、文件办公与系统操作等核心业务场景。所有图标均严格基于 24×24 像素网格绘制，提供高度统一的线性 (Line) 与面性 (Fill) 两种视觉形态。

核心特性

🎯 2800+ 像素级对齐图标：基于 24×24 像素基础网格构建，视觉重心与线条粗细经过严密的光学校准。
📦 全形态多框架深度支持：原生提供 SVG 矢量切图、WebFont 字体图标、官方 React 组件库 (@remixicon/react)、Vue 插件及 Figma 设计资产。
⚡ 零失真与 currentColor 染色：纯净优化的矢量代码，完美适配视网膜高分屏，支持通过 CSS color 与 Tailwind 文字颜色快速着色。
📜 Apache 2.0 商业友好协议：完全免费开源，允许无限制用于个人与商业产品，无需强制署名。

快速上手与示例代码

# 推荐 React 组件库安装
npm install @remixicon/react
# 或引入通用 WebFont
npm install remixicon

import React from 'react';
import { RiHome5Line, RiSearch2Line, RiSettings4Fill } from '@remixicon/react';

export function NavigationBar() {
  return (
    <nav className="flex items-center gap-6 p-4 rounded-2xl bg-neutral-900 text-white">
      <button className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
        <RiHome5Line size={20} />
        <span>控制台</span>
      </button>
      <button className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
        <RiSearch2Line size={20} />
        <span>搜索</span>
      </button>
      <RiSettings4Fill size={20} className="ml-auto text-neutral-400 hover:text-white cursor-pointer" />
    </nav>
  );
}

技术选型建议与适用场景

企业级中后台与 SaaS 产品：中性低调且规范严谨的视觉语言，与现代极简设计系统具有极高契合度。
设计与研发高效协同：官方提供与代码组件同名的 Figma 官方组件库，大幅降低设计交付与开发对齐成本。

Remix Icon

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

Kinetics (Colorion)

Ambient CSS

23rd