import { Icon } from '@chakra-ui/react'
import { HiHeart } from 'react-icons/hi'
export const IconBasic = () => (
<Icon fontSize="2xl" color="pink.700">
<HiHeart />
</Icon>
)
Anatomy
import { IconBadge } from '#components/ui/icon-badge'<Icon as={LuUser} />
<Icon><User /></Icon>warning
When rendering an icon as a child, the component needs to have a ref forwarded.Built-in Icons
Saas UI uses Lucide icons by default, but you can use any icon library.
import { LuChevronUp } from 'react-icons/lu'Examples
React Icons
Integrate with popular react icon libraries like react-icons
import { Icon } from "@chakra-ui/react"
import { Md3dRotation } from "react-icons/md"
export const IconWithReactIcon = () => (
<Icon fontSize="40px" color="tomato">
<Md3dRotation />
</Icon>
)
Custom svg
Use the asChild prop to render custom svg icons within the Icon component
import { Icon } from "@chakra-ui/react"
export const IconWithCustomSvg = () => {
return (
<Icon fontSize="40px" color="red.500">
<svg viewBox="0 0 32 32">
<g fill="currentColor">
<path d="M16,11.5a3,3,0,1,0-3-3A3,3,0,0,0,16,11.5Z" />
<path d="M16.868.044A8.579,8.579,0,0,0,16,0a15.99,15.99,0,0,0-.868,31.956A8.579,8.579,0,0,0,16,32,15.99,15.99,0,0,0,16.868.044ZM16,26.5a3,3,0,1,1,3-3A3,3,0,0,1,16,26.5ZM16,15A8.483,8.483,0,0,0,8.788,27.977,13.986,13.986,0,0,1,16,2a6.5,6.5,0,0,1,0,13Z" />
</g>
</svg>
</Icon>
)
}
Create Icon
Use the createIcon utility to create custom icons
"use client"
import { createIcon } from "@chakra-ui/react"
const HeartIcon = createIcon({
displayName: "HeartIcon",
path: (
<>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
/>
</>
),
})
export const IconWithCreateIcon = () => (
<HeartIcon boxSize="40px" color="blue.400" />
)