# NotificationIcon

`NotificationIcon` maps a notification's `severity` to an icon. It is rendered by [`Notification`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification/) and replaceable via component overrides.

## Usage

The icon is selected automatically. You do not usually render `NotificationIcon` yourself. To customize the mapping, register a replacement with `WithComponents`:

```tsx
import { Chat, WithComponents } from "stream-chat-react-native";
import { CustomNotificationIcon } from "./CustomNotificationIcon";

<WithComponents overrides={{ NotificationIcon: CustomNotificationIcon }}>
  <Chat client={client}>{/* ... */}</Chat>
</WithComponents>;
```

## Props

| Prop                      | Description                      | Type           |
| ------------------------- | -------------------------------- | -------------- |
| `notification` (required) | The notification being rendered. | `Notification` |

## Built-in Severity Mapping

The default `NotificationIcon` maps these severities to icons. Any other severity renders no icon (the component returns `null`).

| Severity    | Icon               | Color                     |
| ----------- | ------------------ | ------------------------- |
| `'error'`   | Exclamation circle | `semantics.textOnInverse` |
| `'warning'` | Exclamation circle | `semantics.textOnInverse` |
| `'success'` | Checkmark          | `semantics.textOnInverse` |
| `'info'`    | No icon            | N/A                       |
| `'loading'` | Refresh (spinning) | `semantics.textOnInverse` |

See the [Snackbar cookbook](/chat/docs/sdk/react-native/guides/snackbar/#level-2-override-the-icon) for a working override.


---

This page was last updated at 2026-05-14T07:09:00.763Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-icon/](https://getstream.io/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-icon/).