Icon

Chakra provides a set of commonly used interface icons you can use in your project

    Source@chakra-ui/icon

Props#

Icon props#

NameTypeDefaultDescription
viewBoxstring0 0 24 24The viewBox of the icon.
boxSizestring1emThe size (width and height) of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interactive element, and only used for presentation.
rolepresentation, imgThe html role of the icon.
childrenReact.ReactNodeThe Path or Group of the icon

createIcon options#

d

Description

If the svg has a single path, simply copy the path's d attribute

Type
string

defaultProps

Description

Default props automatically passed to the component; overwritable

Type
IconProps

displayName

Description

The display name useful in the dev tools

Type
string

path

Description

The svg path or group element

Type
React.ReactElement | React.ReactElement[]

viewBox

Description

The icon svg viewBox

Type
string
Default
"0 0 24 24"
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel