# Pin Indicator

> **Info:** This is documentation for **Stream Chat React SDK v14**, which is no longer actively maintained. For up-to-date documentation, see the [latest version (v15)](https://getstream.io/chat/docs/sdk/react/).

This example shows how to create a custom pin indicator for pinned messages. [Pinned messages](https://getstream.io/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](https://getstream.io/docs-assets/images/d18b18056061.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. Register your component with [`WithComponents`](https://getstream.io/chat/docs/sdk/react/v14/components/contexts/component-context/) so the nested message UI can read it from `ComponentContext`.

![Custom Pin Indicator](https://getstream.io/docs-assets/images/f049b5e8b301.png)

### Read More

See [_Permissions v2_](https://getstream.io/chat/docs/node/chat-permission-policies/) for pinning permissions.

---

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