diff --git a/web/CommIcon.react.js b/web/CommIcon.react.js
--- a/web/CommIcon.react.js
+++ b/web/CommIcon.react.js
@@ -17,7 +17,8 @@
   | 'copy-filled'
   | 'emote-smile-filled'
   | 'pin'
-  | 'unpin';
+  | 'unpin'
+  | 'pin-mirror';
 
 type CommIconProps = {
   +icon: CommIcons,
diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -236,3 +236,16 @@
 div.avatarOffset {
   width: 40px;
 }
+
+.pinIconContainer {
+  position: absolute;
+  top: 1px;
+}
+
+.pinIconLeft {
+  left: -20px;
+}
+
+.pinIconRight {
+  right: -20px;
+}
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -17,6 +17,7 @@
 import css from './chat-message-list.css';
 import FailedSend from './failed-send.react.js';
 import InlineEngagement from './inline-engagement.react.js';
+import CommIcon from '../CommIcon.react.js';
 import UserAvatar from '../components/user-avatar.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { shouldRenderAvatars } from '../utils/avatar-utils.js';
@@ -70,7 +71,7 @@
   render(): React.Node {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const { borderRadius, item, threadInfo } = this.props;
-    const { hasBeenEdited } = item;
+    const { hasBeenEdited, isPinned } = item;
     const { id, creator } = item.messageInfo;
     const threadColor = threadInfo.color;
 
@@ -163,6 +164,25 @@
       avatar = <div className={css.avatarOffset} />;
     }
 
+    const pinIconPositioning = isViewer ? 'left' : 'right';
+    const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
+    const pinIconContainerClassName = classNames({
+      [css.pinIconContainer]: true,
+      [css.pinIconLeft]: pinIconPositioning === 'left',
+      [css.pinIconRight]: pinIconPositioning === 'right',
+    });
+    let pinIcon;
+    if (isPinned) {
+      pinIcon = (
+        <div
+          className={pinIconContainerClassName}
+          style={{ color: `#${threadColor}` }}
+        >
+          <CommIcon icon={pinIconName} size={12} />
+        </div>
+      );
+    }
+
     return (
       <React.Fragment>
         {authorName}
@@ -173,6 +193,7 @@
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
           >
+            {pinIcon}
             <div className={messageBoxClassName} style={messageBoxStyle}>
               {this.props.children}
             </div>
diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js
--- a/web/modals/chat/message-results-modal.react.js
+++ b/web/modals/chat/message-results-modal.react.js
@@ -116,6 +116,7 @@
             modifiedItem = {
               ...item,
               startsConversation: false,
+              isPinned: false,
               messageInfo: {
                 ...item.messageInfo,
                 creator: {
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -69,6 +69,7 @@
       threadCreatedFromMessage: undefined,
       reactions: {},
       startsConversation: false,
+      isPinned: false,
       messageInfo: {
         ...item.messageInfo,
         creator: {