Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Icon

Used to display an svg icon

SourceStorybook

Usage

import { Icon } from "@chakra-ui/react"
<Icon />
warning
Chakra doesn't provide any icons out of the box. Use popular icon libraries like react-icons or lucide-react

Examples

React Icons

Integrate with popular react icon libraries like react-icons

Custom svg

Use the asChild prop to render custom svg icons within the Icon component

Create Icon

Use the createIcon utility to create custom icons

Previous

Hover Card

Next

Icon Button