Icon

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

    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

Usage#

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.

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 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:

  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#

<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} w={8} h={8} color='red.500' />
</HStack>

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.

<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 />

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel