<Icon> component to easily render
<svg> icons. Chakra UI provides
basic interface icons, to add your icons,
read the guide.
onClick handlers to the
Icon component. If you need a
clickable icon, use IconButton instead.
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
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.
Here's a working 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
svgfrom Figma, Sketch, etc.
- Use a tool like SvgOmg to reduce the size and minify the markup.
- Add the icon to the theme object.
fill=currentColor attribute to the
g so that when you
<Icon color="gray.200"/>, it works correctly.
If you pass an icon name that doesn't exist in
theme.icons , you'll see the
Icon component composes
Box so you can pass all
|The size of the icon.|
|The name of the icon.|
|The color of the icon.|
|Denotes that the icon is not an interative element, and only used for presentation.|
|The html role of the icon.|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo