Radix Icons

Radix Icons 是由 Radix UI 团队推出的极简现代开源图标库，与 Radix UI（Headless UI 组件库）同属一个生态体系。Radix Icons 的设计语言极度克制——每个图标仅由最基本的线条和形状构成，没有任何多余的装饰，视觉上极其干练清晰。目前 Radix Icons 收录超过 200 个图标，所有图标均采用 24×24 网格、1.5px 线宽、圆角拐弯的规范，风格统一且与现代极简界面高度契合。

作为 Radix UI 生态的一部分，Radix Icons 与 @radix-ui/react-primitives 深度整合，可作为 React 组件直接使用，同时也提供纯 SVG 文件下载适用于任何技术栈。图标设计遵循无障碍优先原则，所有图标均内置 aria-label 支持，SVG 元素包含清晰的 role 和 aria 属性，开箱即用地满足 WCAG 规范。

主要功能

功能一：极简设计语言

Radix Icons 的设计哲学是「少即是多」。每个图标仅使用最基本的线条表达语义，没有任何渐变、填充或多余的几何装饰。图标的线条宽度统一为 1.5px，拐角采用小圆角处理，整体视觉感受干净、锐利、现代。这种极简风格与 Radix UI 的无头组件（Headless Components）理念一脉相承——不强制视觉风格，只提供语义化的结构。

功能二：React 组件集成

Radix Icons 可通过 @radix-ui/react-icons NPM 包作为 React 组件引入。使用方式非常简单：import { ClipboardIcon } from @radix-ui/react-icons。每个图标均为独立的 React 组件，支持传入 className、style、width、height 等标准 SVG 属性。由于组件基于 @radix-ui/react-primitives 构建，与 Radix UI 其他组件（如 Dialog、Dropdown Menu、Popover）在视觉风格上完全一致，是构建 Radix UI 界面时的天然图标搭档。

功能三：SVG 文件直接下载

除了 NPM 包，Radix Icons 还提供所有图标的 SVG 文件直接下载。开发者可以从官网选择单个图标下载 SVG 文件，也可以通过 GitHub 仓库批量获取全部图标。SVG 文件命名规范、结构清晰，每个文件的 viewBox、width、height 均统一为 24×24，便于在任何框架或纯 HTML 项目中使用。

功能四：在线图标浏览器

radix-ui.com/icons 官网提供了完整的图标浏览与搜索界面。所有图标以网格形式展示，支持关键词搜索和分类筛选（General、Mathes、Media、Cards 等）。每个图标详情页提供了 React 组件导入代码、纯 SVG 代码、Figma 复制等多种获取方式。官网还提供了「Copy all」功能，可以一次性复制所有图标的 SVG 代码。

功能五：无障碍优先设计

Radix Icons 在设计之初就将无障碍（Accessibility）作为核心考量。每个图标 SVG 均包含适当的 ARIA 属性：role="img"、aria-label（可自定义）以及 focusable="false"。这意味着当图标作为按钮或链接的视觉元素时，配合相应的 aria-label 即可被屏幕阅读器正确识别。相比之下，大多数开源图标库的无障碍支持都较为薄弱，需要开发者手动补充。

核心特点与优势

适用场景

Radix Icons 适合以下场景：Radix UI 项目（Headless 组件 + 极简图标，天作之合）；极简风格后台系统（图标线条干净，不喧宾夺主）；无障碍要求高的产品（内置 ARIA 支持，无需额外处理）；React + TypeScript 项目（类型完整，IDE 支持好）；需要与 Radix UI 风格一致的界面（Dialog、Dropdown 等组件与图标视觉统一）。

Radix Icons 不是图标数量最多的，也不是样式最华丽的，但它在「极简」这件事上做得最纯粹。如果你已经在使用 Radix UI 构建界面，或者追求的是干练、干净、无杂质的视觉风格，Radix Icons 是最契合的选择。