Icon

Chakra provides a set of commonly used interface icons you can use in your project

View source View theme source @chakra-ui/icon

Installation

Chakra provides a set of commonly used interface icons you can use them in your project.

These icons are published into a separate package that is not part of @chakra-ui/react by default.

npm i @chakra-ui/icons
# or
yarn add @chakra-ui/icons

Usage

Chakra provides multiple ways to use icons in your project:

Using Chakra UI icon library
Using a third-party icon library
Creating your own icons

🚨 Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead.

import { PhoneIcon, AddIcon, WarningIcon } from '@chakra-ui/icons'

// The default icon size is 1em (16px)
<PhoneIcon />

// Use the `boxSize` prop to change the icon size
<AddIcon w={6} h={6} />

// Use the `color` prop to change the icon color
<WarningIcon w={8} h={8} color="red.500" />

All icons

Below is a list of all of the icons in the library, along with the corresponding component names:

Using a third-party icon library

To use third-party icon libraries like react-icons, here are the steps:

Import the Icon component from @chakra-ui/react
Pass the desired third party icon into the as prop

// 1. Import
import { Icon } from "@chakra-ui/react";
import { MdSettings } from "react-icons/md";

// 2. Use the `as` prop
function Example() {
  return <Icon as={MdSettings} />;
}

Some examples

<HStack>
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />

  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} w={6} h={6} />

  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} w={8} h={8} color="red.500" />
</HStack>

Creating your custom icons

Chakra provides two methods for creating your custom icons:

Using the Icon component
Using the createIcon function

They can be imported from @chakra-ui/react:

import { Icon, createIcon } from "@chakra-ui/react";

Both Icon and createIcon enable you to style the icon using style props.

Using the `Icon` component

The Icon component renders as an svg element.

<Icon viewBox="0 0 200 200" color="red.500">
  <path
    fill="currentColor"
    d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
  />
</Icon>

This enables you to define your own custom icon components:

const CircleIcon = (props) => (
  <Icon viewBox="0 0 200 200" {...props}>
    <path
      fill="currentColor"
      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
    />
  </Icon>
);

And style them with style props:

<HStack>
  {/* The default icon size is 1em (16px) */}
  <CircleIcon />

  {/* Use the `boxSize` prop to change the icon size */}
  <CircleIcon boxSize={6} />

  {/* Use the `color` prop to change the icon color */}
  <CircleIcon boxSize={8} color="red.500" />
</HStack>

Using the `createIcon` function

The createIcon function is a convenience wrapper around the process of generating icons with Icon, allowing you to achieve the same functionality with less effort.

import { createIcon } from "@chakra-ui/icons";

// using `path`
export const UpDownIcon = createIcon({
  displayName: "UpDownIcon",
  viewBox: "0 0 200 200",
  // path can also be an array of elements, if you have multiple paths, lines, shapes, etc.
  path: (
    <path
      fill="currentColor"
      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
    />
  ),
});

// OR using the `d` value of a path (the path definition) directly
export const UpDownIcon = createIcon({
  displayName: "UpDownIcon",
  viewBox: "0 0 200 200",
  d: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
});

Tips for generating your own icons

Export icons as svg from Figma, Sketch, etc.
Use a tool like SvgOmg to reduce the size and minify the markup.

Fallback Icon

When children is not provided, the Icon component renders a fallback icon.

<Icon />

Props

`Icon` props

Name	Type	Default	Description
`viewBox`	`string`	`0 0 24 24`	The viewBox of the icon.
`boxSize`	`string`	`1em`	The size (width and height) of the icon.
`color`	`string`	`currentColor`	The color of the icon.
`focusable`	`boolean`	`false`	Denotes that the icon is not an interactive element, and only used for presentation.
`role`	`presentation`, `img`		The html role of the icon.
`children`	`React.ReactNode`		The Path or Group of the icon

string

Default

"0 0 24 24"

Icon

Installation​

Usage​

All icons​

Using a third-party icon library​

Some examples​

Creating your custom icons​

Using the Icon component​

Using the createIcon function​

Tips for generating your own icons​

Fallback Icon​

Props​

Icon props​

createIcon options​

d

defaultProps

displayName

path

viewBox