---
url: https://talkjs.com/docs/UI_Components/React_Native/Object_Types/CustomEmojis
---

# CustomEmojis

Configure custom emojis for messages and reactions.

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/React_Native/Object_Types/CustomEmojis.md)
Allows users to send and receive custom emojis.

This adds a set of custom emoji images to the emoji picker, the emoji autocompleter, and emoji reactions.

Every emoji name *must* start and end with a colon, for example `:lol:`.

Make sure you always specify a consistent, backward-compatible set of custom emojis. If an existing message contains a custom emoji that is not specified in `customEmojis` here, then the emoji cannot be displayed and the textual name will be displayed instead (including colons).

If you want to allow an emoji to be displayed if it's used in existing data, but not let users select it in new messages or reactions, set the `hidden` option to `true` for that emoji.

## Example

```typescript
{
  ":lol:": { url: "https://example.com/images/emoji-lol.svg" },
  ":roomba-cat:": { url: "https://example.com/images/roomba-cat.gif" },
  ":alert:": { url: "https://example.com/images/alert.gif", hidden: true },
}
```

## Properties

| Field | Type | Description |
| --- | --- | --- |
| `[key: string]` | [`CustomEmojiDefinition`](#customemojidefinition) | A set of custom emoji images |

## Type Definitions

### CustomEmojiDefinition

Defines a custom emoji.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **url** | `string` | Image file URL

Must be a fully-qualified URL of an image file, such as an SVG, GIF or PNG. The image must be square (same width and height) and is always scaled down to the size of an emoji. |
| **hidden** | `boolean` | Hides this emoji from the emoji picker and autocompleter

Hidden emojis can't be sent in new messages, or used in new emoji reactions, but they still display properly in existing messages and reactions. This lets you safely remove previously used custom emoji from the chat UI. |

## Used by

- [`Chatbox`](/docs/UI_Components/React_Native/Components/Chatbox/#customEmojis)
- [`ConversationList`](/docs/UI_Components/React_Native/Components/ConversationList/#customEmojis)