Icons

Built-in icons

Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type.

toast.info("Lorem ipsum dolor"); // same as toast(message, {type: "info"});
toast.error("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor", {
  theme: "colored"
})
toast.warn("Lorem ipsum dolor")
toast.warn("Lorem ipsum dolor", {
  theme: "dark"
})

Replace default icons

You can provide a function to the icon prop of the ToastContainer to replace the built-in icons.

import { ToastContainer, toast } from 'react-toastify';
import { BadgeCheck, CircleAlert, Info, TriangleAlert } from 'lucide-react';

export default function App() {
  const notify = () => {
    toast.info('Wow so easy !');
    toast.error('Wow so easy !');
    toast.success('Wow so easy !');
    toast.warning('Wow so easy !');
  };

  return (
    <div className="grid place-items-center h-dvh bg-zinc-900/15">
      <Button onClick={notify}>Notify !</Button>
      <ToastContainer
        icon={({ type, theme }) => {
          // theme is not used in this example but you could
          switch (type) {
            case 'info':
              return <Info className="stroke-indigo-400" />;
            case 'error':
              return <CircleAlert className="stroke-red-500" />;
            case 'success':
              return <BadgeCheck className="stroke-green-500" />;
            case 'warning':
              return <TriangleAlert className="stroke-yellow-500" />;
            default:
              return null;
          }
        }}
      />
    </div>
  );
}

Disable icons

• Disable the icon per toast

toast.error("Without icon", {
  icon: false
});

• Disable the icon globally

<ToastContainer icon={false} />

Custom icons

You can provide a custom icon of your choice. Any renderable element is valid.

// With a string
toast.success("You can provide any string", {
  icon: "🚀"
});

// custom icons have access to the theme and the toast type
toast.success("And of course a component of your choice", {
  icon: MyIcon
});

toast.success("Even a function, given you return something that can be rendered", {
  icon: ({theme, type}) =>  <img src="url"/>
});

Info

If you provide a component, the current theme and type are passed as props