# @chakra-ui/icons

> Chakra UI icons

Latest version **2.2.4** (published 2024-10-04) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.2.4 |
| Published | 2024-10-04 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 106.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40657 |
| Author | Segun Adebayo |
| Maintainers | segunadebayo, _codebender828 |

## Links

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

## Recent versions

- 2.2.4 (latest) — 2024-10-04
- 2.2.6 (v2-latest) — 2025-02-19
- 0.0.0-dev-20240115120705 (dev) — 2024-01-15
- 0.0.0-v3-20240109123510 (next) — 2024-01-09
- 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16
- 0.0.0-pr-202212011232 (pr) — 2022-02-20
- 0.0.0-canary-2021118164051 (canary) — 2021-12-08
- 2.2.5 — 2024-11-07
- 0.0.0-v2-latest-20241107153126 — 2024-11-07
- 2.2.3 — 2024-10-03
- 2.2.2 — 2024-10-02
- 0.0.0-v2-latest-20241002175335 — 2024-10-02
- 0.0.0-v2-latest-20241002174536 — 2024-10-02
- 0.0.0-v2-latest-20241002170600 — 2024-10-02
- 2.2.1 — 2024-10-01
- … 457 more at https://npm.io/package/@chakra-ui/icons/versions

## README

<p align="center">
  <a href="https://github.com/chakra-ui/chakra-ui">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored-white@2x.png?raw=true">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true" alt="Chakra logo" width="300" />
    </picture>
  </a>
</p>

<h1 align="center">Build Accessible React Apps with Speed ⚡️</h1>
<br />

<p align="center">
  <a href="cursor://anysphere.cursor-deeplink/mcp/install?name=chakra-ui&amp;config=eyJjb21tYW5kIjoibnB4IC15IEBjaGFrcmEtdWkvcmVhY3QtbWNwIn0%3D" target="_blank" rel="noreferrer">
    <img alt="Add MCP server to Cursor" height="20" src="https://cursor.com/deeplink/mcp-install-light.svg" />
  </a>
  <img alt="Github Checks" src="https://img.shields.io/github/checks-status/chakra-ui/chakra-ui/main"/>
  <a href="https://github.com/chakra-ui/chakra-ui/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/chakra-ui"/>
  </a>
  <a href="https://www.npmjs.com/package/@chakra-ui/react">
    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@chakra-ui/react.svg?style=flat"/>
  </a>
  <a href="https://www.npmjs.com/package/@chakra-ui/react">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@chakra-ui/react?style=flat-square&color=43cc11">
  </a>
  <a href="https://github.com/chakra-ui/chakra-ui">
    <img alt="Github Stars" src="https://img.shields.io/github/stars/chakra-ui/chakra-ui?style=social" />
  </a>
  <a href="https://discord.gg/chakra-ui">
    <img alt="Discord" src="https://img.shields.io/discord/660863154703695893.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
  </a>
</p>

<br />

Chakra UI is a component system for building products with speed. Accessible
React components for building high-quality web apps and design systems. Works
with Next.js RSC

## Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI.

- Latest: https://chakra-ui.com
- v2: https://v2.chakra-ui.com
- v1: https://v1.chakra-ui.com
- v0: https://v0.chakra-ui.com

## Installation

To use Chakra UI components, all you need to do is install the
`@chakra-ui/react` package and its peer dependencies:

```sh
# with Yarn
$ yarn add @chakra-ui/react @emotion/react

# with npm
$ npm i @chakra-ui/react @emotion/react

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react

# with Bun
$ bun add @chakra-ui/react @emotion/react
```

## Usage

Read the docs here: https://www.chakra-ui.com/docs/get-started/installation

## Contributing

Read the contribution guide here:
https://www.chakra-ui.com/docs/get-started/contributing

## Support Chakra UI

### Organizations

Support this project with your organization. Your logo will show up here with a
link to your website.
[[Contribute](https://opencollective.com/chakra-ui/contribute)]

<a href="https://opencollective.com/chakra-ui/organization/0/website"><img src="https://opencollective.com/chakra-ui/organization/0/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/1/website"><img src="https://opencollective.com/chakra-ui/organization/1/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/2/website"><img src="https://opencollective.com/chakra-ui/organization/2/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/3/website"><img src="https://opencollective.com/chakra-ui/organization/3/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/4/website"><img src="https://opencollective.com/chakra-ui/organization/4/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/5/website"><img src="https://opencollective.com/chakra-ui/organization/5/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/6/website"><img src="https://opencollective.com/chakra-ui/organization/6/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/7/website"><img src="https://opencollective.com/chakra-ui/organization/7/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/8/website"><img src="https://opencollective.com/chakra-ui/organization/8/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/9/website"><img src="https://opencollective.com/chakra-ui/organization/9/avatar.svg?avatarHeight=130" /></a>

### Individuals

By donating \$5 or more you can support the ongoing development of this project.
We'll appreciate some support. Thank you to all our supporters! 🙏
[[Contribute](https://opencollective.com/chakra-ui/contribute)]

<a href="https://opencollective.com/chakra-ui"><img src="https://opencollective.com/chakra-ui/individuals.svg?width=890" /></a>

## Testimonials

> People throw React component libraries and design systems at me regularly.
> This might be the best one I've seen. The APIs are simple but composable and
> the accessibility on the couple components I looked is complete.
>
> Great work @thesegunadebayo, really inspiring work. –
> [Ryan Florence](https://twitter.com/ryanflorence)

> Awesome new open-source component library from @thesegunadebayo. Really
> impressive stuff! –
> [Colm Tuite](https://twitter.com/colmtuite/status/1169622886052782081)

> This is incredible work. Amazing job Segun! –
> [Lee Robinson](https://twitter.com/leeerob/status/1169330130361159682)

> Chakra UI is glorious! I love the consistent use of focus styling and the
> subtle animation –
> [Guillermo ▲](https://twitter.com/rauchg/status/1169632334389248000)

## Awards and Mentions

We've been extremely humbled to receive awards and mentions from the community
for all the innovation and reach Chakra UI brings to the JavaScript ecosystem.

<table>
  <tr valign="middle">
    <td width="124">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/tech-radar.png" width="124" alt="Technology Radar" />
    </td>
    <td>
      <h4>Solution Worth Pursuing</h4>
      <p><em><a href="https://www.thoughtworks.com/radar/languages-and-frameworks/chakra-ui">Technology Radar</a> (2020–2021)</em></p>
    </td>
  </tr>
  <tr>
    <td width="124">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/os-awards.png" width="124" alt="Open Source Awards 2020" />
    </td>
    <td>
      <h4>The Most Impactful Contribution to the community</h4>
      <p><em><a href="https://osawards.com/react/2020">Open Source Awards</a> (2020)</em></p>
    </td>
  </tr>
</table>

## License

MIT © [Segun Adebayo](https://github.com/segunadebayo)

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