# Pin Indicator

This example shows how to create a custom pin indicator for pinned messages. [Pinned messages](/chat/docs/javascript/pinned_messages/) highlight important content.

## Best Practices

- Use CSS-only pins for simple visuals; use components for richer data.
- Ensure pinned indicators don’t obscure message content.
- Respect permission rules for who can pin/unpin.
- Keep pin UI consistent between channel and thread views.
- Test pinned messages in grouped and quoted contexts.

## Custom Pin Indicator

### CSS Based Solution

Start with a simple CSS-only approach. The required classes are already toggled. Add a `::before` pseudo-element with a pin icon when a message is 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

CSS is less flexible for JS interactions, so a component-based solution is useful. Here we show the user who pinned the message. Pass your component to `Channel` via `PinIndicator`, which injects it into [`ComponentContext`](/chat/docs/sdk/react/v13/components/contexts/component_context/) and is rendered by the [Message UI component](/chat/docs/sdk/react/v13/components/message-components/message_ui/).

<Tabs>

</Tabs>

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

### Read More

See [_Permissions v2_](/chat/docs/react/chat_permission_policies/) for pinning permissions.


---

This page was last updated at 2026-04-21T09:53:42.167Z.

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