# Custom Inbox Icons: Override ANY default icon

> Novu changelog: Custom Inbox Icons: Override ANY default icon. Learn about the latest updates, features, and improvements to the Novu notification infra...

Canonical: https://novu.co/changelog/custom-inbox-icons-override-any-default-icon/

Markdown: https://novu.co/changelog/custom-inbox-icons-override-any-default-icon.md

Last updated: 2025-05-19T21:00:00.000Z

Published: 2025-05-19T21:00:00.000Z

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

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](<https://docs.novu.co/platform/inbox/react/styling#customizing-icons>).