Shadcn.io is not affiliated with official shadcn/ui
Toast with Custom Icon
Toast notification with custom Lucide React icon replacing default icon for semantic visual reinforcement
Default toast icons are fine until they're not—customize with your own. This React toast uses Sonner's icon option to replace the default with CheckCircleIcon from Lucide React. Built with shadcn/ui Button and icon property accepting JSX, custom icons add semantic meaning beyond text—perfect for payment confirmations, status updates with specific icons, brand-aligned notifications, contextual alerts with metaphorical icons, or any toast where a tailored icon reinforces message meaning better than generic defaults.
Toast with Custom Icon preview
Installation
Related Components
Toast with Description
Toast with title and description context
Standard Toast
Basic toast with default styling
Success Toast
Semantic success toast with green styling
Toast with Rich HTML
Toast with complex custom content
Success Alert
Alert with success icon and styling
Standard Badge
Badge component with status indicators
FAQ
Was this page helpful?
Sign in to leave feedback.