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#

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.

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

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

email

phone

spinner

drag-handle

close

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.

Here's a working example:

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.

Icon Fallbacks#

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

Editable Example

Props#

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

NameTypeDefaultDescription
sizestring1emThe size of the icon.
namestringThe name of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interative element, and only used for presentation.
rolepresentation, imgpresentationThe html role of the icon.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo