Icon

Chakra provides multiple ways to use icons in your project:

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

Using Chakra UI icons#

Chakra provides a set of commonly used interface icons you can use in your project. To use these icons, install @chakra-ui/icons, import the icons you need and style them.

Installation#

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

Usage#

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:

AddIcon

ArrowBackIcon

ArrowDownIcon

ArrowForwardIcon

ArrowLeftIcon

ArrowRightIcon

ArrowUpIcon

ArrowUpDownIcon

AtSignIcon

AttachmentIcon

BellIcon

CalendarIcon

ChatIcon

CheckIcon

CheckCircleIcon

ChevronDownIcon

ChevronLeftIcon

ChevronRightIcon

ChevronUpIcon

CloseIcon

CopyIcon

DeleteIcon

DownloadIcon

DragHandleIcon

EditIcon

EmailIcon

ExternalLinkIcon

HamburgerIcon

InfoIcon

InfoOutlineIcon

LinkIcon

LockIcon

MinusIcon

MoonIcon

NotAllowedIcon

PhoneIcon

PlusSquareIcon

QuestionIcon

QuestionOutlineIcon

RepeatIcon

RepeatClockIcon

SearchIcon

Search2Icon

SettingsIcon

SmallAddIcon

SmallCloseIcon

SpinnerIcon

StarIcon

SunIcon

TimeIcon

TriangleDownIcon

TriangleUpIcon

UnlockIcon

UpDownIcon

ViewIcon

ViewOffIcon

WarningIcon

WarningTwoIcon

Using a third-party icon library#

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

  1. Import the Icon component from @chakra-ui/react
  2. 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#

Editable Example

Creating your custom icons#

Chakra provides two methods for creating your custom icons:

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.

Editable Example

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:

Editable Example

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.

Editable Example

Props#

Icon props#

NameTypeDefaultDescription
viewBoxstring0 0 24 24The viewBox of the icon.
boxSizestring1emThe size (width and height) of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interative element, and only used for presentation.
rolepresentation, imgpresentationThe html role of the icon.
childrenReact.ReactNodeThe Path or Group of the icon

createIcon options#

NameTypeDescriptionDefault
defaultPropsIconPropsDefault props automatically passed to the component; overwriteable-
displayNamestringThe display name useful in the dev tools-
pathReact.ReactElement | React.ReactElement[]The `svg` path or group element-
viewBoxstringThe icon `svg` viewBox"0 0 24 24"
Edit this page