diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 45374127a..fb8ef5f3b 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -342,4 +342,8 @@ input {
 
 .module-message__text {
   white-space: pre-wrap;
+
+  svg {
+    margin-right: var(--margins-xs);
+  }
 }
diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index 7ae9f678f..9c6cf8c14 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -65,9 +65,6 @@
       flex-direction: row;
       align-items: center;
 
-      svg {
-        margin-right: var(--margins-xs);
-      }
 
       a {
         text-decoration: underline;
diff --git a/ts/components/conversation/message/message-content/MessageText.tsx b/ts/components/conversation/message/message-content/MessageText.tsx
index 4eaf83857..40866b57f 100644
--- a/ts/components/conversation/message/message-content/MessageText.tsx
+++ b/ts/components/conversation/message/message-content/MessageText.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../../../state/selectors/conversations';
 import { SessionIcon } from '../../../icon';
 import { MessageBody } from './MessageBody';
+import { useMessageDirection } from '../../../../state/selectors';
 
 type Props = {
   messageId: string;
@@ -23,6 +24,7 @@ export type MessageTextSelectorProps = Pick<
 export const MessageText = (props: Props) => {
   const selected = useSelector((state: StateType) => getMessageTextProps(state, props.messageId));
   const multiSelectMode = useSelector(isMessageSelectionMode);
+  const direction = useMessageDirection(props.messageId);
 
   if (!selected) {
     return null;
@@ -35,9 +37,14 @@ export const MessageText = (props: Props) => {
     return null;
   }
 
+  const iconColor =
+    direction === 'incoming'
+      ? 'var(--message-bubbles-received-text-color)'
+      : 'var(--message-bubbles-sent-text-color)';
+
   return (
     <div dir="auto" className={classNames('module-message__text')}>
-      {isDeleted && <SessionIcon iconType="delete" iconSize="small" />}
+      {isDeleted && <SessionIcon iconType="delete" iconSize="small" iconColor={iconColor} />}
       <MessageBody
         text={contents || ''}
         disableLinks={multiSelectMode}
diff --git a/ts/components/conversation/message/message-item/Message.tsx b/ts/components/conversation/message/message-item/Message.tsx
index 897a8cfc3..40d5709a2 100644
--- a/ts/components/conversation/message/message-item/Message.tsx
+++ b/ts/components/conversation/message/message-item/Message.tsx
@@ -1,7 +1,4 @@
-import { useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
-import { StateType } from '../../../../state/reducer';
-import { getGenericReadableMessageSelectorProps } from '../../../../state/selectors/conversations';
 import { THUMBNAIL_SIDE } from '../../../../types/attachments/VisualAttachment';
 import { GenericReadableMessage } from './GenericReadableMessage';
 
@@ -13,15 +10,7 @@ type Props = {
 };
 
 export const Message = (props: Props) => {
-  const msgProps = useSelector((state: StateType) =>
-    getGenericReadableMessageSelectorProps(state, props.messageId)
-  );
-
   const ctxMenuID = `ctx-menu-message-${uuidv4()}`;
 
-  if (msgProps?.isDeleted && msgProps.direction === 'outgoing') {
-    return null;
-  }
-
   return <GenericReadableMessage ctxMenuID={ctxMenuID} messageId={props.messageId} />;
 };