diff --git a/web/navigation-sidebar/community-list-item.css b/web/navigation-sidebar/community-list-item.css
new file mode 100644
index 000000000..cea9a01e4
--- /dev/null
+++ b/web/navigation-sidebar/community-list-item.css
@@ -0,0 +1,3 @@
+.container:hover {
+  cursor: pointer;
+}
diff --git a/web/navigation-sidebar/community-list-item.react.js b/web/navigation-sidebar/community-list-item.react.js
new file mode 100644
index 000000000..c804bdcc4
--- /dev/null
+++ b/web/navigation-sidebar/community-list-item.react.js
@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './community-list-item.css';
+import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
+
+type Props = {
+  +threadInfo: ResolvedThreadInfo,
+};
+
+function CommunityListItem(props: Props): React.Node {
+  const { threadInfo } = props;
+
+  const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
+    tooltipLabel: threadInfo.uiName,
+  });
+
+  return (
+    <div
+      className={css.container}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <ThreadAvatar size="S" threadInfo={threadInfo} />
+    </div>
+  );
+}
+
+export default CommunityListItem;