> ## Documentation Index
> Fetch the complete documentation index at: https://docs.worldvisagroup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Bell Icon

> Fully customize the WorldVisa Inbox bell icon using your own React components or third-party icon libraries to match your product branding and design system.

The WorldVisa Inbox includes a default bell icon that triggers the notification popover when clicked. You can use this bell as a standalone component or customize it to match your application's design system.

> [!NOTE]
>
> Use your application’s existing connection and authentication settings with these examples. [Set up Inbox](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md) covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

## Bell component

The Bell component displays WorldVisa's default Inbox bell icon. It's designed to be used as a standalone trigger when you want to build your own custom Inbox UI, such as a custom popover or a full-page view.

By using Bell component, you separate the trigger (the icon) from the content (the notification list), giving you full control over the layout and behavior of your application's Inbox.

```tsx theme={null}
import { Inbox, Bell } from '@wv/react';
 
function BellComponent() {
  return (
      <Inbox
        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
        subscriber="YOUR_SUBSCRIBER_ID"
      >
        <Bell/>
      </Inbox>
  );
}
export default BellComponent;
```

> [!NOTE]
>
> See the [Custom Popover documentation](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-popover.md) for how to use the Bell component with third party library like Radix UI to trigger a custom popover that contains the notification list.

## Replace the default Bell Icon

Replace the default bell icon that comes with the Inbox component with your own custom React component or a third-party UI library component to match your application's design. You can do this using the `renderBell` prop.

<video controls muted playsInline preload="metadata" src="https://mintcdn.com/wv-enterprise/nfMqNpG3TRk8Yj_D/videos/developers/inbox/custom-bell.mp4?fit=max&auto=format&n=nfMqNpG3TRk8Yj_D&q=85&s=ba08a47617e95566365ec353fc3eb297" />

> [tab] Custom component
>
> ```tsx theme={null}
> import { Inbox } from '@wv/react';
>
> function CustomBell() {
>   return (
>       <Inbox
>         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>         subscriber="YOUR_SUBSCRIBER_ID"
>         renderBell={() => {
>           return (
>             <div className="bg-blue-300 p-4 inline-flex">
>               New notifications
>             </div>
>           );
>         }}
>       />
>   );
> }
> export default CustomBell;
> ```

> [tab] Unread count
>
> ```tsx theme={null}
> import { Inbox } from '@wv/react';
>
> function CustomBell() {
>   return (
>     <Inbox 
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       renderBell={(unreadCount) => {
>           return (
>             <div className="bg-blue-300 p-4 inline-flex">
>             New {unreadCount.total} notifications
>             </div>
>           );
>         }}
>     />
>   );
> }
> export default CustomBell;
> ```

> [tab] High severity
>
> ```tsx theme={null}
> import { Inbox, SeverityLevelEnum } from '@wv/react';
>
> function CustomBell() {
>   return (
>     <Inbox 
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       renderBell={(unreadCount) => {
>           return (
>             <div className="bg-blue-300 p-4 inline-flex">
>               High severity
>               {unreadCount.severity[SeverityLevelEnum.HIGH]}{' '}
>               notifications
>             </div>
>           );
>         }}
>     />
>   );
> }
> export default CustomBell;
> ```


## Related topics

- [Styling and Theming](https://docs.worldvisagroup.com/developers/inbox/configuration/styling.md)
- [Icons](https://docs.worldvisagroup.com/developers/inbox/configuration/icons.md)
- [Customize Popover](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-popover.md)
- [WorldVisa Inbox](https://docs.worldvisagroup.com/developers/inbox.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.