# Emoji Picker

The SDK includes an `EmojiPicker` built on [`emoji-mart`](https://github.com/missive/emoji-mart). It’s disabled by default. To enable it, install the emoji-mart packages, import `EmojiPicker` from `stream-chat-react/emojis`, and pass it to [`Channel`](/chat/docs/sdk/react/v13/components/core-components/channel/). See the [_Basic Usage_ section](/chat/docs/sdk/react/v13/guides/customization/emoji_picker#basic-usage/).

![Default Emoji Picker](@chat-sdk/react/v13/_assets/default-emoji-picker.png)

## Best Practices

- Enable the picker only when emoji usage is a core part of your UX.
- Keep popper options aligned with your app’s z-index and overflow rules.
- Set `closeOnEmojiSelect` based on input density and user flow.
- Avoid heavy picker props that slow input responsiveness.
- Ensure emoji fonts render consistently across platforms.

## Props

### ButtonIconComponent

Icon component rendered inside the open/close button.

| Type                | Default                                                                                                                       |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| React.ComponentType | [`EmojiPickerIcon`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx#L38-L49) |

### buttonClassName

Class name for the open/close button.

| Type   | Default                           |
| ------ | --------------------------------- |
| string | 'str-chat\_\_emoji-picker-button' |

### pickerContainerClassName

Class name for the picker container.

| Type   | Default                                               |
| ------ | ----------------------------------------------------- |
| string | 'str-chat\_\_message-textarea-emoji-picker-container' |

### wrapperClassName

Class name for the wrapper element.

| Type   | Default                                     |
| ------ | ------------------------------------------- |
| string | 'str-chat\_\_message-textarea-emoji-picker' |

### closeOnEmojiSelect

Whether the picker closes after selecting an emoji.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### pickerProps

Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) forwarded to the [emoji-mart `Picker`](https://github.com/missive/emoji-mart/tree/v5.5.2#-picker).

| Type                                                                        |
| --------------------------------------------------------------------------- |
| `Partial<{ theme: 'auto' \| 'light' \| 'dark' } & Record<string, unknown>>` |

### popperOptions

[React Popper options](https://popper.js.org/docs/v2/constructors/#options) forwarded to the [react-popper `usePopper`](https://popper.js.org/react-popper/v2/hook/) hook.

| Type               |
| ------------------ |
| `Partial<Options>` |


---

This page was last updated at 2026-04-21T07:55:47.366Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/message-input-components/emoji-picker/](https://getstream.io/chat/docs/sdk/react/v13/components/message-input-components/emoji-picker/).