Icon

Use the <Icon> component to easily render <svg> icons. Chakra UI provides basic interface icons, to add your icons, read the guide.

Import#

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

Usage#

Use an icon by passing the name props. This name must match an icon key in theme.icons. By default, the icon inherits the fontSize and color of it's parent.

<Stack isInline>
  {/* Default size is 1em => 16px */}
  <Icon name="phone" />
  {/* Use the `size` prop to change the icon size */}
  <Icon name="check-circle" size="24px" />
  {/* Use the `color` prop to change the icon color */}
  <Icon name="warning" size="32px" color="red.500" />
</Stack>

All Icons#

Here's a list of the default icons Chakra UI comes with and their respective name. You add your own icons as well, see the guide

Using an icon library#

Most times, you might need to use icons from a popular icon library like react-icons. Here's how to go about it.

// 1. import the icon from "react-icons"
import { MdSettings } from "react-icons/md"
// 2. Use the `as` prop to render the icon
<Box as={MdSettings} />
// 3. Then you can pass all `Box` props to style the icon
<Box as={MdSettings} size="32px" color="green.400" />

Here's a working example:

<Box as={MdSettings} size="32px" color="green.400" />

Adding custom icons#

All Chakra icons are stored in the theme object under the icons key. So you can extend this object to add your own icons. Here are the steps:

• Export the icon's svg from Figma, Sketch, etc.
• Use a tool like SvgOmg to reduce the size and minify the markup.
• Add the icon to the theme object.

// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
  icon1: {
    path: <path fill="currentColor" d="..." />,
    // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
    viewBox: "0 0 40 40",
  },
  icon2: {
    path: (
      <g fill="currentColor">
        <path d="..."/>
      </g>
    )
  }
};
// Step 2: Add the custom icon to the theme
const customTheme = {
  ...theme,
  icons: {
    ...theme.icons,
    ...customIcons,
  }
}
// Step 3: Pass the new theme to the ThemeProvider
<ThemeProvider theme={customTheme}>
  {/* app goes here */}
</ThemeProvider>
// Step 4: Now you can do this
<Icon name="icon1" color="green.200"/>

Icon Fallbacks#

If you pass an icon name that doesn't exist in theme.icons , you'll see the question-outline icon.

<Icon name="naruto" />

Props#

Icon component composes Box so you can pass all Box props.