# 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](https://getstream.io/docs-assets/images/5f08cfd3c4e3.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.

**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)
```

**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));
```

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](https://getstream.io/docs-assets/images/8cda4941b6ff.png) | ![Message List](https://getstream.io/docs-assets/images/8a64cf73daaf.png) |

---

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/).