# 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 the dedicated picker stylesheet, and register `EmojiPicker` through `WithComponents`. See the [_Basic Usage_ section](/chat/docs/sdk/react/guides/customization/emoji_picker#basic-usage/).

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

## Best Practices

- Enable the picker only when emoji usage is a core part of your UX.
- Import the dedicated picker stylesheet when you use the SDK `EmojiPicker`.
- 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

## Setup

When you use the SDK picker, import its standalone stylesheet in addition to the main chat styles:

```tsx
import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/emoji-picker.css";
```

If your app uses CSS layers, import the picker stylesheet into the same layer strategy as your other chat styles:

```css
@import url("stream-chat-react/dist/css/emoji-picker.css") layer(stream-plugins);
```

Register the picker through `WithComponents`:

```tsx
import { Channel, WithComponents } from "stream-chat-react";
import { EmojiPicker } from "stream-chat-react/emojis";

<WithComponents overrides={{ EmojiPicker }}>
  <Channel>{/* ... */}</Channel>
</WithComponents>;
```

| 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-17T17:33:50.315Z.

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