# @rsuite/icons

> All icons of rsuite

Latest version **1.4.1** (published 2026-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsuite/icons
pnpm add @rsuite/icons
yarn add @rsuite/icons
bun add @rsuite/icons
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2026-06-17 |
| First published | 2020-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5 |
| Author | hiyangguo@gmail.com |
| Maintainers | simonguo, superman66, hiyangguo, sevenoutman, undor, vingeray |

## Links

- npm: https://www.npmjs.com/package/@rsuite/icons
- Repository: https://github.com/rsuite/rsuite-icons
- Homepage: https://github.com/rsuite/rsuite-icons#readme
- Issues: https://github.com/rsuite/rsuite-icons/issues
- npm.io page: https://npm.io/package/@rsuite/icons

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [@rsuite/icon-font](https://npm.io/package/@rsuite/icon-font.md) ^4.1.0

## Recent versions

- 1.4.1 (latest) — 2026-06-17
- 1.0.0-alpha.3 (beta) — 2021-02-22
- 1.4.0 — 2025-10-13
- 1.3.2 — 2025-04-25
- 1.3.0 — 2024-10-29
- 1.2.0 — 2024-10-16
- 1.1.0 — 2024-10-16
- 1.0.3 — 2023-07-31
- 1.0.2 — 2021-10-12
- 1.0.0 — 2021-04-23
- 1.0.0-alpha.2 — 2020-12-10
- 1.0.0-alpha.1 — 2020-12-10
- 1.0.0-14 — 2020-12-01
- 1.0.0-13 — 2020-12-01
- 1.0.0-12 — 2020-11-26
- … 12 more at https://npm.io/package/@rsuite/icons/versions

## README

# @rsuite/icons

[![npm][npm-badge]][npm]
[![GitHub Actions][github-actions-badge]][github-actions]
[![npm][npm-version-badge]][npm]
[![license][license-badge]][license]

@rsuite/icons is a comprehensive icon library for [React Suite](https://github.com/rsuite/rsuite), offering a collection of SVG icons as React components. It provides a flexible and performant way to include and customize icons in your React applications.

## Installation

```bash
npm install @rsuite/icons --save
# or
yarn add @rsuite/icons
```

## Usage

### Basic Usage

```jsx
import { Icon } from '@rsuite/icons';
import GearIcon from '@rsuite/icons/Gear';

// Use preset icon
<GearIcon />

// Use custom SVG icon
<Icon as={YourSvgComponent} />
```

### Customization

```jsx
// Size (using size prop)
<GearIcon size={24} />
<GearIcon size="2em" />

// Size (using style)
<GearIcon style={{ fontSize: '2em' }} />

// Color
<GearIcon style={{ color: '#4caf50' }} />

// Rotate
<GearIcon rotate={90} />

// Flip
<GearIcon flip="horizontal" />

// Pulse
<GearIcon pulse />

// Spin
<GearIcon spin />
```

## Features

- **React Component**: Optimized for React applications
- **TypeScript Support**: Built with TypeScript for type safety
- **Customizable**: Control size, color, rotation and more
- **React 19 Compatible**: Updated to work with React 19

## API

### `<Icon>` Props

The `<Icon>` component extends `React.SVGProps<SVGElement>` so it accepts all valid SVG attributes.

| Property  | Type                          | Default          | Description                              |
| --------- | ----------------------------- | ---------------- | ---------------------------------------- |
| `as`      | `React.ElementType \| string` | `'svg'`          | The custom SVG component                 |
| `spin`    | `boolean`                     | `false`          | Dynamic rotation icon                    |
| `pulse`   | `boolean`                     | `false`          | Use pulse to have it rotate with 8 steps |
| `rotate`  | `number \| string`            | -                | Rotate the icon by a specific degree     |
| `viewBox` | `string`                      | -                | View box of the SVG                      |
| `flip`    | `'horizontal' \| 'vertical'`  | -                | Flip the icon                            |
| `fill`    | `string`                      | `'currentColor'` | SVG fill color                           |
| `size`    | `number \| string`            | `'1em'`          | Icon size (sets both width and height)   |
| `width`   | `number \| string`            | `'1em'`          | SVG width                                |
| `height`  | `number \| string`            | `'1em'`          | SVG height                               |

## Documentation

For more information, please visit [Icon documentation](https://rsuitejs.com/components/icon/)

## Development

### Setup

```bash
npm install
```

### Run Storybook

```bash
npm run storybook
```

### Build

```bash
npm run build
```

### Test

```bash
npm run test
```

## License

MIT

[npm-badge]: https://img.shields.io/npm/dm/@rsuite/icons.svg
[npm-version-badge]: https://img.shields.io/npm/v/@rsuite/icons.svg
[npm]: https://www.npmjs.com/package/@rsuite/icons
[license-badge]: https://img.shields.io/npm/l/@rsuite/icons.svg
[license]: https://github.com/rsuite/rsuite-icons/blob/main/LICENSE
[github-actions-badge]: https://github.com/rsuite/rsuite-icons/workflows/Run%20Test%20Cases/badge.svg
[github-actions]: https://github.com/rsuite/rsuite-icons/actions

---
_Source: https://npm.io/package/@rsuite/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._