Icon
Chakra provides a set of commonly used interface icons you can use in your project
Props#
Icon props#
| Name | Type | Default | Description | 
|---|---|---|---|
| viewBox | string | 0 0 24 24 | The viewBox of the icon. | 
| boxSize | string | 1em | The size (width and height) of the icon. | 
| color | string | currentColor | The color of the icon. | 
| focusable | boolean | false | Denotes that the icon is not an interactive element, and only used for presentation. | 
| role | presentation,img | The html role of the icon. | |
| children | React.ReactNode | The Path or Group of the icon | 
createIcon options#
Props#
Icon props#
| Name | Type | Default | Description | 
|---|---|---|---|
| viewBox | string | 0 0 24 24 | The viewBox of the icon. | 
| boxSize | string | 1em | The size (width and height) of the icon. | 
| color | string | currentColor | The color of the icon. | 
| focusable | boolean | false | Denotes that the icon is not an interactive element, and only used for presentation. | 
| role | presentation,img | The html role of the icon. | |
| children | React.ReactNode | The Path or Group of the icon |