Custom Inbox Icons: Override ANY default icon

You can now override any default icon in the <Inbox /> component using the new icons key inside the appearanceprop.

This unlocks full visual customization of your notification Inbox—letting you align icons with your app’s design system, use your favorite icon library, and create a seamless visual experience for users.

For example, a product team using react-icons or Material Icons can now replace the default bell, settings, or dropdown icons to match their brand guidelines—without touching CSS.

To customize your icons, make sure you're using @novu/react version 3.4.0 or later.

Then, pass an icons object into the appearance prop in the <Inbox /> component. Each key represents an icon (e.g., bell, cogs, arrowDown) and maps to a function that returns your React component of choice.

const appearance = {
  icons: {
    bell: () => <RiNotification3Fill />,
    cogs: () => <RiSettings3Fill />,
    arrowDown: () => <RiArrowDownLine />
  }
};

To learn more about customizing icons, check out our docs.