Icon

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

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

Import#

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

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>

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

Editable Example

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

copy

search-2

moon

sun

add

small-add

settings

check-circle

lock

unlock

view

view-off

download

delete

repeat

repeat-clock

edit

chevron-right

chevron-left

chevron-down

chevron-up

arrow-forward

arrow-up

arrow-down

arrow-back

external-link

link

plus-square

chat

calendar

time

attachment

up-down

at-sign

arrow-left

arrow-right

star

phone

spinner

drag-handle

small-close

not-allowed

triangle-down

triangle-up

bell

info-outline

info

question

question-outline

warning

warning-2

arrow-up-down

check

minus

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

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

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

Editable Example

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.

Add the fill=currentColor attribute to the path or g so that when you this <Icon color="gray.200"/>, it works correctly.

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

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

<Icon name="naruto" />

Editable Example

Props#

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

Name	Type	Default	Description
`size`	`string`	`1em`	The size of the icon.
`name`	`string`		The name of the icon.
`color`	`string`	`currentColor`	The color of the icon.
`focusable`	`boolean`	`false`	Denotes that the icon is not an interative element, and only used for presentation.
`role`	`presentation`, `img`	`presentation`	The html role of the icon.

Proudly made in 🇳🇬

Released under the MIT License.

Icon

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

All Icons#

Using an icon library#

Adding custom icons#

Icon Fallbacks#

Props#

Import#