# Providing Custom Reactions

By default, the UI Components SDK provides the following reaction options and corresponding icons for them:

- `like`
- `love`
- `haha`
- `wow`
- `sad`

![The Default Message Options Overlay](/data/docs/chat-sdk/android/v5/_assets/custom_reactions_message_options_overlay_before.png)

If you want to override the supported set of reactions, you'll need provide you custom set of reactions using the `ChatUI.supportedReactions` property.

<tabs>

<tabs-item value="kotlin" label="Kotlin">

```kotlin
val reactions = mapOf(
    "thumbs_up" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(this, R.drawable.ic_thumb_up)!!,
        activeDrawable = ContextCompat.getDrawable(this, R.drawable.ic_thumb_up_selected)!!
    ),
    "thumbs_down" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(this, R.drawable.ic_thumb_down)!!,
        activeDrawable = ContextCompat.getDrawable(this, R.drawable.ic_thumb_down_selected)!!
    ),
    "mood_good" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(this, R.drawable.ic_mood_good)!!,
        activeDrawable = ContextCompat.getDrawable(this, R.drawable.ic_mood_good_selected)!!
    ),
    "mood_bad" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(this, R.drawable.ic_mood_bad)!!,
        activeDrawable = ContextCompat.getDrawable(this, R.drawable.ic_mood_bad_selected)!!
    ),
)
ChatUI.supportedReactions = SupportedReactions(this, reactions)
```

</tabs-item>

<tabs-item value="java" label="Java">

```java
Map<String, SupportedReactions.ReactionDrawable> reactions = new HashMap<>();
reactions.put(
        "thumbs_up", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up_selected)
        )
);

reactions.put(
        "thumbs_down", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down_selected)
        )
);

reactions.put(
        "mood_good", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good_selected)
        )
);

reactions.put(
        "mood_bad", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad_selected)
        )
);

ChatUI.setSupportedReactions(new SupportedReactions(context, reactions));
```

</tabs-item>

</tabs>

In the example above, we defined a set of 4 custom reactions and provided corresponding icons for them. Notice that you need to provide icons for both normal and selected states.

The code above will produce the following UI:

| Message Options Overlay                                                                               | Message List                                                                    |
| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| ![Message Options Overlay](/data/docs/chat-sdk/android/v5/_assets/custom_reactions_message_options_overlay.png) | ![Message List](/data/docs/chat-sdk/android/v5/_assets/custom_reactions_message_list.png) |


---

This page was last updated at 2026-03-05T19:01:46.576Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v5/ui/guides/providing-custom-reactions/](https://getstream.io/chat/docs/sdk/android/v5/ui/guides/providing-custom-reactions/).