Icon

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

    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:

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

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

    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 />
    Edit this page on GitHub