[Home](/index.md) › [Icons](/icons.md) › Chakra UI

# Chakra UI

Chakra UI is an accessible React component library and design system with themeable, composable components, style props and design tokens.

## At a glance

- **Page**: https://devicons.io/icons/chakra-ui/
- **Website**: https://chakra-ui.com/
- **Also known as**: Chakra, @chakra-ui/react, Chakra UI v3
- **Tags**: [React](/icons/tag/react/), [UI Library](/icons/tag/ui-library/), [Components](/icons/tag/components/), [Design System](/icons/tag/design-system/), [Open Source](/icons/tag/open-source/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `chakra-ui-icon` | `ChakraUiIcon` | https://devicons.io/devicons/icons/chakra-ui-icon.svg | https://devicons.io/devicons/font/chakra-ui-icon.svg | `devicons devicons-chakra-ui-icon` |
| `chakra-ui` | `ChakraUi` | https://devicons.io/devicons/icons/chakra-ui.svg | https://devicons.io/devicons/font/chakra-ui.svg | `devicons devicons-chakra-ui` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { ChakraUiIcon } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { ChakraUiIcon } from "@dev.icons/react/mono";

<ChakraUiIcon size={32} alt="Chakra UI logo" />
```

### Vue

```vue
<script setup>
import { ChakraUiIcon } from "@dev.icons/vue";
</script>

<template>
  <ChakraUiIcon :size="32" alt="Chakra UI logo" />
</template>
```

### Svelte

```svelte
<script>
  import { ChakraUiIcon } from "@dev.icons/svelte";
</script>

<ChakraUiIcon size={32} alt="Chakra UI logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/chakra-ui-icon.svg" alt="Chakra UI logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-chakra-ui-icon"></i>
```

## About the Chakra UI logo

The Chakra UI icon is a rounded hexagon split into two halves by a zigzag lightning-bolt gap, each half filled with a teal gradient from deep teal (#3585A3) to mint (#00DEAE). The lockup adds "chakra" in a lowercase sans serif. This is the current logo from chakra-ui.com. It replaces the earlier teal circle with a lightning bolt.

The teal icon reads well on light and dark backgrounds. The black wordmark disappears on dark surfaces, so use the icon or the monochrome lockup there.

## When to use this logo

Use Chakra UI in React component library comparisons, design system docs, frontend stack diagrams and starter template READMEs. It pairs naturally with React, Next.js, shadcn/ui, Tailwind and Storybook.

## Related icons

- [Radix UI](/icons/radix-ui.md)
- [shadcn/ui](/icons/shadcn-ui.md)
- [Mantine](/icons/mantine.md)
- [Material-ui](/icons/material-ui.md)
- [Ant Design](/icons/ant-design.md)
- [Evergreen](/icons/evergreen.md)
- [Bootstrap](/icons/bootstrap.md)
- [Enact](/icons/enact.md)

## Browse the catalog
- Previous: [Chai](/icons/chai.md)
- Next: [Chalk](/icons/chalk.md)
- [All icons](/icons.md)