# Pin Indicator

In this example, we will demonstrate how to create a custom pin indicator for pinned messages. [Pinned messages](/chat/docs/javascript/pinned-messages/) allow users to highlight important messages, make announcements, or temporarily promote content.

## Custom Pin Indicator

### CSS Based Solution

Let's start with the less invasive and fairly simple CSS based solution. All the class names you need to build this feature are in place and toggled appropriately. We'll add `::before` pseudo-class to our message bubble element with a pin (📌) icon to display whenever message has been pinned.

```css
.str-chat__message--pinned .str-chat__message-bubble::before {
  content: "📌";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: papayawhip;
  font-size: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  z-index: 1;
  top: -10px;
}

.str-chat__message--other.str-chat__message--pinned
  .str-chat__message-bubble::before {
  right: -10px;
}

.str-chat__message--me.str-chat__message--pinned
  .str-chat__message-bubble::before {
  left: -10px;
}
```

![Custom Pin Indicator - CSS Based Solution](@chat-sdk/react/v13/_assets/custom-pin-indicator-css.png)

### Component Based Solution

While CSS solution is certainly less invasive it's also less malleable when it comes to hooking some JavaScript to it. For that case the component based solution is also an option. In this example we'll build an indicator which displays the name of the user who pinned the message. We'll pass our custom component to the [`Channel`](/chat/docs/sdk/react/v11/components/core-components/channel/) prop `PinIndicator` which forwards it to [`ComponentContext`](/chat/docs/sdk/react/v11/components/contexts/component-context/) from which it'll be picked up by the [`MessageSimple`](/chat/docs/sdk/react/v11/components/message-components/message-ui/) component to render.

<Tabs>

</Tabs>

![Custom Pin Indicator](@chat-sdk/react/v13/_assets/custom-pin-indicator.png)

### Read More

See more on permissions regarding message pinning in [_Permissions v2_](/chat/docs/react/chat-permission-policies/) section of our JS documentation.


---

This page was last updated at 2026-05-22T16:32:10.964Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/guides/customization/pin-indicator/](https://getstream.io/chat/docs/sdk/react/v11/guides/customization/pin-indicator/).