Components
import { HomeIcon } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
const AvatarIconDemo = () => {
return (
<Avatar>
<AvatarFallback className='bg-indigo-500/10 text-indigo-500'>
<HomeIcon className='size-4' />
</AvatarFallback>
</Avatar>
)
}
export default AvatarIconDemo
More examples
DefaultOpen page →
Avatar OneOpen page →
Avatar TwoOpen page →
Avatar ThreeOpen page →
Avatar FourOpen page →
Avatar SixOpen page →
Avatar SevenOpen page →
Avatar EightOpen page →
Avatar NineOpen page →
Avatar TenOpen page →
Avatar ElevenOpen page →
Avatar TwelveOpen page →
Avatar ThirteenOpen page →
Avatar FourteenOpen page →
Avatar FifthteenOpen page →
Avatar SeventeenOpen page →
Avatar NineteenOpen page →
Avatar TwentyOpen page →
Source
Published
Similar components
Explore more
Part of ShadcnStudio — browse the full library on 21st.dev.