Icon

Chakra provides multiple ways to use icons in your project:

• Using the official 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.

Using the official Chakra UI icons library#

Chakra maintains an official library of icons for you to use in your project!

Installation#

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

Usage#

Import the icons from @chakra-ui/icons and style them with style props.

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 boxSize={6} />
// Use the `color` prop to change the icon color
<WarningIcon boxSize={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#

Chakra makes it easy to use third-party icon libraries like react-icons.

Import#

import { Icon } from "@chakra-ui/core"

Usage#

Wrap your third-party icon of choice with the Icon component using the as prop and style them using style props.

<HStack>
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />
  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} boxSize={6} />
  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} boxSize={8} color="red.500" />
</HStack>

Creating your own icons#

Chakra provides two methods for creating your own icons:

• the Icon component
• the createIcon function

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

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

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

Creating icons 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>

Creating icons 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/icon"
// 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#

createIcon options#