# @oxygen-ui/react-icons

> The SVG icons from primitives exported as React components.

Latest version **2.4.6** (published 2025-07-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @oxygen-ui/react-icons
pnpm add @oxygen-ui/react-icons
yarn add @oxygen-ui/react-icons
bun add @oxygen-ui/react-icons
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.4.6 |
| Published | 2025-07-24 |
| First published | 2023-03-31 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 592.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Author | WSO2 |
| Maintainers | wso2-org |
| Keywords | icons, react-icons, design-system, oxygen-ui, oxygen-ui-react-icons |

## Links

- npm: https://www.npmjs.com/package/@oxygen-ui/react-icons
- Repository: https://github.com/wso2/oxygen-ui
- Homepage: https://github.com/wso2/oxygen-ui/tree/main/packages/react-icons#readme
- Issues: https://github.com/wso2/oxygen-ui/issues
- npm.io page: https://npm.io/package/@oxygen-ui/react-icons

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.4.6 (latest) — 2025-07-24
- 2.4.5 — 2025-06-13
- 2.4.4 — 2025-06-10
- 2.4.3 — 2025-06-04
- 2.4.2 — 2025-05-27
- 2.4.1 — 2025-05-19
- 2.4.0 — 2025-05-15
- 2.3.4 — 2025-02-07
- 2.3.3 — 2025-02-07
- 2.3.2 — 2025-02-06
- 2.3.1 — 2025-01-17
- 2.3.0 — 2025-01-16
- 2.2.0 — 2025-01-10
- 2.1.0 — 2025-01-06
- 2.0.0 — 2024-11-06
- … 67 more at https://npm.io/package/@oxygen-ui/react-icons/versions

## README

<p align="center" style="color: #343a40">
  <h1 align="center">@oxygen-ui/react-icons</h1>
</p>
<p align="center" style="font-size: 1.2rem;">React components for Oxygen UI icons.</p>
<div align="center">
  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@oxygen-ui/react-icons">
  <img alt="npm" src="https://img.shields.io/npm/dw/@oxygen-ui/react-icons">
  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
</div>

## Installation

```bash
# With npm
npm install @oxygen-ui/react-icons

# With pnpm
pnpm add @oxygen-ui/react-icons

# With yarn
yarn add @oxygen-ui/react-icons
```

## Usage

To use icons from `@oxygen-ui/react-icons`, simply import the desired icon as a React component and use it in your code:

```jsx
import { HomeIcon } from '@oxygen-ui/react-icons';

function CustomHomeIcon() {
  return <HomeIcon fill="#FFFFFF" size={16} />;
}
```

## API

### Icon Components

The `@oxygen-ui/react-icons` package exports all the available icons as React components, which can be used in your app as shown in the example above. The available icons are:

- `HomeIcon`
- `ChevronLeftIcon`
- `ChevronRightIcon`
- ... and more!

> View all available icons at https://wso2.github.io/oxygen-ui/react/?path=/docs/icons-icons-%F0%9F%9A%A7--page.

Each icon component accepts the following props:

- `aria-label`: The aria label to be used for the icon.
- `tabIndex`: The tab index to be used for the icon.
- `verticalAlign`: The vertical alignment to be used for the icon. This prop is optional and defaults to 'text-bottom'.
- `className`: The class name to be applied to the icon. This prop is optional.
- `fill`: The color to be used to fill the icon. This prop is optional.
- `size`: The size of the icon. This prop is optional.
- ... and all the other accepted props for the `svg` element.

## Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our [guidelines for contributing](../../CONTRIBUTING.md) to get started.

## License

Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.

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