Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Custom Icon
Toast notification with custom Lucide React icon replacing default icon for semantic visual reinforcement
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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