diff --git a/js/modules/signal.js b/js/modules/signal.js
index 45a78f0f13e4..24513205e270 100644
--- a/js/modules/signal.js
+++ b/js/modules/signal.js
@@ -31,7 +31,6 @@ const {
 const {
   ContactDetail,
 } = require('../../ts/components/conversation/ContactDetail');
-const { ContactListItem } = require('../../ts/components/ContactListItem');
 const {
   ContactModal,
 } = require('../../ts/components/conversation/ContactModal');
@@ -329,7 +328,6 @@ exports.setup = (options = {}) => {
     ChatColorPicker,
     ConfirmationDialog,
     ContactDetail,
-    ContactListItem,
     ContactModal,
     Emojify,
     ErrorModal,
diff --git a/ts/components/ContactListItem.stories.tsx b/ts/components/ContactListItem.stories.tsx
deleted file mode 100644
index 0f218bc7c47b..000000000000
--- a/ts/components/ContactListItem.stories.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-// Copyright 2020-2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { gifUrl } from '../storybook/Fixtures';
-import { setupI18n } from '../util/setupI18n';
-import enMessages from '../../_locales/en/messages.json';
-import { ContactListItem } from './ContactListItem';
-import { getRandomColor } from '../test-both/helpers/getRandomColor';
-
-const i18n = setupI18n('en', enMessages);
-const onClick = action('onClick');
-
-storiesOf('Components/ContactListItem', module)
-  .add("It's me!", () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe
-        title="Someone 🔥 Somewhere"
-        name="Someone 🔥 Somewhere"
-        phoneNumber="(202) 555-0011"
-        profileName="🔥Flames🔥"
-        sharedGroupNames={[]}
-        avatarPath={gifUrl}
-        onClick={onClick}
-      />
-    );
-  })
-  .add('With name and profile (note vertical spacing)', () => {
-    return (
-      <div>
-        <ContactListItem
-          type="direct"
-          acceptedMessageRequest
-          i18n={i18n}
-          isMe={false}
-          title="Someone 🔥 Somewhere"
-          name="Someone 🔥 Somewhere"
-          phoneNumber="(202) 555-0011"
-          profileName="🔥Flames🔥"
-          sharedGroupNames={[]}
-          about="👍 Free to chat"
-          avatarPath={gifUrl}
-          onClick={onClick}
-        />
-        <ContactListItem
-          type="direct"
-          acceptedMessageRequest
-          i18n={i18n}
-          isMe={false}
-          title="Another ❄️ Yes"
-          name="Another ❄️ Yes"
-          phoneNumber="(202) 555-0011"
-          profileName="❄️Ice❄️"
-          sharedGroupNames={[]}
-          about="🙏 Be kind"
-          avatarPath={gifUrl}
-          onClick={onClick}
-        />
-      </div>
-    );
-  })
-  .add('With name and profile, admin', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        isAdmin
-        title="Someone 🔥 Somewhere"
-        name="Someone 🔥 Somewhere"
-        phoneNumber="(202) 555-0011"
-        profileName="🔥Flames🔥"
-        sharedGroupNames={[]}
-        about="👍 This is my really long status message that I have in order to test line breaking"
-        avatarPath={gifUrl}
-        onClick={onClick}
-      />
-    );
-  })
-  .add('With a group with no avatarPath', () => {
-    return (
-      <ContactListItem
-        type="group"
-        i18n={i18n}
-        isMe={false}
-        isAdmin
-        title="Group!"
-        sharedGroupNames={[]}
-        acceptedMessageRequest
-        about="👍 Free to chat"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('With just number, admin', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        isAdmin
-        title="(202) 555-0011"
-        phoneNumber="(202) 555-0011"
-        sharedGroupNames={[]}
-        about="👍 Free to chat"
-        avatarPath={gifUrl}
-        onClick={onClick}
-      />
-    );
-  })
-  .add('With name and profile, no avatar', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        title="Someone 🔥 Somewhere"
-        name="Someone 🔥 Somewhere"
-        color={getRandomColor()}
-        phoneNumber="(202) 555-0011"
-        profileName="🔥Flames🔥"
-        sharedGroupNames={[]}
-        about="👍 Free to chat"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('Profile, no name, no avatar', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        color={getRandomColor()}
-        i18n={i18n}
-        isMe={false}
-        phoneNumber="(202) 555-0011"
-        title="🔥Flames🔥"
-        profileName="🔥Flames🔥"
-        sharedGroupNames={[]}
-        about="👍 Free to chat"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('No name, no profile, no avatar, no about', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        phoneNumber="(202) 555-0011"
-        sharedGroupNames={[]}
-        title="(202) 555-0011"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('No name, no profile, no avatar', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        title="(202) 555-0011"
-        about="👍 Free to chat"
-        sharedGroupNames={[]}
-        phoneNumber="(202) 555-0011"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('No name, no profile, no number', () => {
-    return (
-      <ContactListItem
-        type="direct"
-        acceptedMessageRequest
-        i18n={i18n}
-        isMe={false}
-        title="Unknown contact"
-        sharedGroupNames={[]}
-        onClick={onClick}
-      />
-    );
-  });
diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx
deleted file mode 100644
index 3acb12857730..000000000000
--- a/ts/components/ContactListItem.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-// Copyright 2018-2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-import classNames from 'classnames';
-
-import { About } from './conversation/About';
-import { Avatar } from './Avatar';
-import { Emojify } from './conversation/Emojify';
-import { InContactsIcon } from './InContactsIcon';
-
-import type { LocalizerType } from '../types/Util';
-import type { ConversationType } from '../state/ducks/conversations';
-import { isInSystemContacts } from '../util/isInSystemContacts';
-
-type Props = {
-  i18n: LocalizerType;
-  isAdmin?: boolean;
-  onClick?: () => void;
-} & Pick<
-  ConversationType,
-  | 'about'
-  | 'acceptedMessageRequest'
-  | 'avatarPath'
-  | 'color'
-  | 'isMe'
-  | 'name'
-  | 'phoneNumber'
-  | 'profileName'
-  | 'sharedGroupNames'
-  | 'title'
-  | 'type'
-  | 'unblurredAvatarPath'
->;
-
-export class ContactListItem extends React.Component<Props> {
-  public renderAvatar(): JSX.Element {
-    const {
-      acceptedMessageRequest,
-      avatarPath,
-      color,
-      i18n,
-      isMe,
-      name,
-      phoneNumber,
-      profileName,
-      sharedGroupNames,
-      title,
-      type,
-      unblurredAvatarPath,
-    } = this.props;
-
-    return (
-      <Avatar
-        acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
-        color={color}
-        conversationType={type}
-        i18n={i18n}
-        isMe={isMe}
-        name={name}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
-        title={title}
-        sharedGroupNames={sharedGroupNames}
-        size={52}
-        unblurredAvatarPath={unblurredAvatarPath}
-      />
-    );
-  }
-
-  public override render(): JSX.Element {
-    const { about, i18n, isAdmin, isMe, name, onClick, title, type } =
-      this.props;
-
-    const displayName = isMe ? i18n('you') : title;
-
-    return (
-      <button
-        onClick={onClick}
-        className={classNames(
-          'module-contact-list-item',
-          onClick ? 'module-contact-list-item--with-click-handler' : null
-        )}
-        type="button"
-      >
-        {this.renderAvatar()}
-        <div className="module-contact-list-item__text">
-          <div className="module-contact-list-item__left">
-            <div className="module-contact-list-item__text__name">
-              <Emojify text={displayName} />
-              {isInSystemContacts({ name, type }) ? (
-                <span>
-                  {' '}
-                  <InContactsIcon i18n={i18n} />
-                </span>
-              ) : null}
-            </div>
-            <div className="module-contact-list-item__text__additional-data">
-              <About text={about} />
-            </div>
-          </div>
-          {isAdmin ? (
-            <div className="module-contact-list-item__admin">
-              {i18n('GroupV2--admin')}
-            </div>
-          ) : null}
-        </div>
-      </button>
-    );
-  }
-}