# 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/v14/components/core-components/channel/). See the [_Basic Usage_ section](/chat/docs/sdk/react/v14/guides/customization/emoji_picker#basic-usage/).

![Default Emoji Picker](/data/docs/chat-sdk/react/v14/_assets/default-emoji-picker.png)

## Best Practices

- Enable the picker only when emoji usage is a core part of your UX.
- Keep picker placement 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

| Prop                       | Description                                                                                                                                                                                         | Type                                                                        |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `buttonClassName`          | Class name for the open/close button. Defaults to `str-chat__emoji-picker-button`.                                                                                                                  | `string`                                                                    |
| `ButtonIconComponent`      | Icon component rendered inside the open/close button. Defaults to [`EmojiPickerIcon`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/icons.tsx#L38-L49). | `React.ComponentType`                                                       |
| `closeOnEmojiSelect`       | Whether the picker closes after selecting an emoji. Defaults to `false`.                                                                                                                            | `boolean`                                                                   |
| `pickerContainerClassName` | Class name for the picker container. Defaults to `str-chat__message-textarea-emoji-picker-container`.                                                                                               | `string`                                                                    |
| `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).           | `Partial<{ theme: 'auto' \| 'light' \| 'dark' } & Record<string, unknown>>` |
| `placement`                | Floating UI placement for the picker popover. Defaults to `"top-end"`.                                                                                                                              | `PopperLikePlacement`                                                       |
| `wrapperClassName`         | Class name for the wrapper element. Defaults to `str-chat__message-textarea-emoji-picker`.                                                                                                          | `string`                                                                    |


---

This page was last updated at 2026-04-13T07:26:58.213Z.

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