From 97a137944581614678b4390001f602814ccbf52c Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Wed, 15 Jul 2026 17:06:40 -0500
Subject: [PATCH 1/3] feat: allow custom icons

---
 .../Attachment/Audio/PlayPauseButton.tsx      |   8 +-
 .../src/components/Attachment/FileIcon.tsx    |  46 ++---
 .../src/components/Attachment/Giphy/Giphy.tsx |   5 +-
 .../Attachment/UrlPreview/URLPreview.tsx      |   5 +-
 .../UrlPreview/URLPreviewCompact.tsx          |   5 +-
 .../AttachmentMediaPicker.tsx                 |   5 +-
 .../AttachmentPickerItem.tsx                  |   4 +-
 .../components/AttachmentPickerContent.tsx    |  13 +-
 .../components/AttachmentTypePickerButton.tsx |  28 ++-
 .../AutoCompleteSuggestionCommandIcon.tsx     |  21 +-
 .../AutoCompleteSuggestionHeader.tsx          |   5 +-
 .../mentionItems/MentionBroadcastItem.tsx     |   5 +-
 .../mentionItems/MentionRoleItem.tsx          |   5 +-
 .../mentionItems/MentionUserGroupItem.tsx     |  23 ++-
 .../components/ChannelDetailsNavHeader.tsx    |   5 +-
 .../ChannelDetailsNavigationSection.tsx       |  12 +-
 .../components/ChannelDetailsProfile.tsx      |   5 +-
 .../ChannelEditDetailsFormHeader.tsx          |   5 +-
 .../components/ChannelEditImageSheet.tsx      |  16 +-
 .../members/ChannelAddMembersButton.tsx       |   5 +-
 .../members/ChannelAddMembersFormHeader.tsx   |   5 +-
 .../components/members/ChannelMemberItem.tsx  |   5 +-
 .../components/modal/ModalHeader.tsx          |   5 +-
 .../navigation-section/FileAttachmentList.tsx |   9 +-
 .../navigation-section/MediaItem.tsx          |   5 +-
 .../navigation-section/MediaList.tsx          |   5 +-
 .../navigation-section/PinnedMessageList.tsx  |   5 +-
 .../hooks/useChannelDetailsNavigationItems.ts |  25 ++-
 .../ChannelMessagePreviewDeliveryStatus.tsx   |  21 +-
 .../ChannelPreview/ChannelPreviewMessage.tsx  |   4 +-
 .../ChannelPreviewMutedStatus.tsx             |   5 +-
 .../ChannelPreviewPinnedStatus.tsx            |   5 +-
 .../ChannelPreview/ChannelSwipableWrapper.tsx |   4 +-
 .../components/ImageGalleryFooter.tsx         |   9 +-
 .../components/ImageGalleryHeader.tsx         |   5 +-
 .../components/ImageGalleryVideoControl.tsx   |  10 +-
 .../Indicators/EmptyStateIndicator.tsx        |   9 +-
 .../Headers/MessagePinnedHeader.tsx           |   5 +-
 .../Headers/MessageReminderHeader.tsx         |   5 +-
 .../Headers/MessageSavedForLaterHeader.tsx    |   5 +-
 .../Headers/SentToChannelHeader.tsx           |   5 +-
 .../MessageItemView/MessageDeleted.tsx        |   5 +-
 .../MessageItemView/MessageReplies.tsx        |   8 +-
 .../Message/MessageItemView/MessageStatus.tsx |  23 ++-
 .../MessageItemView/MessageSwipeContent.tsx   |   5 +-
 .../ReactionList/ReactionListClustered.tsx    |   6 +-
 .../ReactionList/ReactionListItem.tsx         |   6 +-
 .../Message/hooks/useMessageActions.tsx       |  49 ++---
 .../ShowThreadMessageInChannelButton.tsx      |  10 +-
 .../StopMessageStreamingButton.tsx            |   5 +-
 .../AttachmentRemoveControl.tsx               |   5 +-
 .../AttachmentUploadProgressIndicator.tsx     |  11 +-
 .../VideoAttachmentUploadPreview.tsx          |   5 +-
 .../AudioRecorder/AudioRecorder.tsx           |  27 ++-
 .../AudioRecorder/AudioRecordingButton.tsx    |   5 +-
 .../AudioRecordingInProgress.tsx              |   5 +-
 .../AudioRecordingLockIndicator.tsx           |  11 +-
 .../AudioRecorder/AudioRecordingPreview.tsx   |   8 +-
 .../components/InputButtons/AttachButton.tsx  |   5 +-
 .../components/LinkPreviewList.tsx            |   5 +-
 .../components/OutputButtons/EditButton.tsx   |   5 +-
 .../components/OutputButtons/SendButton.tsx   |   5 +-
 .../MessageList/ScrollToBottomButton.tsx      |   5 +-
 .../UnreadMessagesNotification.tsx            |   8 +-
 .../MessageMenu/MessageReactionPicker.tsx     |   5 +-
 .../MessageMenu/MessageUserReactions.tsx      |   7 +-
 .../MessageMenu/MessageUserReactionsItem.tsx  |   5 +-
 .../MessageUserReactionsItem.test.tsx         |   2 +-
 .../components/Notifications/Notification.tsx |  35 ++--
 .../Poll/components/CreatePollHeader.tsx      |  11 +-
 .../Poll/components/CreatePollOptions.tsx     |  11 +-
 .../Poll/components/MultipleVotesSettings.tsx |   7 +-
 .../Poll/components/PollModalHeader.tsx       |   5 +-
 .../components/Poll/components/PollOption.tsx |   4 +-
 .../ThreadList/ThreadListUnreadBanner.tsx     |  10 +-
 .../ThreadMessagePreviewDeliveryStatus.tsx    |  16 +-
 .../UIComponents/EmptySearchResult.tsx        |   5 +-
 .../components/UIComponents/SearchInput.tsx   |  12 +-
 .../UIComponents/SelectionCircle.tsx          |   5 +-
 .../src/components/UIComponents/Spinner.tsx   |   5 +-
 .../src/components/ui/Avatar/AvatarGroup.tsx  |   7 +-
 .../src/components/ui/Avatar/UserAvatar.tsx   |  11 +-
 .../src/components/ui/Badge/ErrorBadge.tsx    |   5 +-
 .../src/components/ui/Badge/GiphyBadge.tsx    |   5 +-
 .../src/components/ui/Badge/ImgurBadge.tsx    |   5 +-
 .../src/components/ui/Badge/RetryBadge.tsx    |   5 +-
 package/src/components/ui/GiphyChip.tsx       |   8 +-
 package/src/components/ui/Input/Input.tsx     |   8 +-
 .../src/components/ui/VideoPlayIndicator.tsx  |   5 +-
 .../componentsContext/ComponentsContext.tsx   |  48 ++++-
 .../componentsContext/defaultComponents.ts    | 193 ++++++++++++++++++
 .../__tests__/useChannelActionItems.test.tsx  |  15 ++
 .../useChannelMemberActionItems.test.tsx      |   9 +
 .../hooks/actions/useChannelActionItems.tsx   |  26 ++-
 .../actions/useChannelMemberActionItems.tsx   |  17 +-
 .../messagePreview/useMessagePreviewIcon.tsx  |  28 +--
 96 files changed, 726 insertions(+), 423 deletions(-)

diff --git a/package/src/components/Attachment/Audio/PlayPauseButton.tsx b/package/src/components/Attachment/Audio/PlayPauseButton.tsx
index 5786b02bda..1e0ac70459 100644
--- a/package/src/components/Attachment/Audio/PlayPauseButton.tsx
+++ b/package/src/components/Attachment/Audio/PlayPauseButton.tsx
@@ -2,8 +2,7 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Pause } from '../../../icons/pause-fill';
-import { Play } from '../../../icons/play-fill';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';
 
@@ -31,6 +30,7 @@ export const PlayPauseButton = ({
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <Pressable
@@ -45,9 +45,9 @@ export const PlayPauseButton = ({
       {...rest}
     >
       {isPlaying ? (
-        <Pause fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
+        <icons.Pause fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
       ) : (
-        <Play fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
+        <icons.Play fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
       )}
     </Pressable>
   );
diff --git a/package/src/components/Attachment/FileIcon.tsx b/package/src/components/Attachment/FileIcon.tsx
index 8e9157e1d8..304ecde815 100644
--- a/package/src/components/Attachment/FileIcon.tsx
+++ b/package/src/components/Attachment/FileIcon.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import type { IconsMap } from '../../contexts/componentsContext/defaultComponents';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Audio } from '../../icons/filetype-audio-xl';
-import { Code } from '../../icons/filetype-code-xl';
-import { ZIP } from '../../icons/filetype-compression-xl';
-import { OtherFileIcon } from '../../icons/filetype-other-xl';
-import { PDF } from '../../icons/filetype-pdf-xl';
-import { Presentation } from '../../icons/filetype-presentation-xl';
-import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
-import { DOC } from '../../icons/filetype-text-xl';
-import { Video } from '../../icons/filetype-video-xl';
-import type { IconProps } from '../../icons/utils/base';
-
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
 const audioFileTypes = [
   'audio/1d-interleaved-parityfec',
@@ -349,49 +340,49 @@ const codeFileTypes = [
   'text/plain',
 ];
 
-const mimeTypeToIconMap: Record<string, React.ComponentType<IconProps>> = {
-  'application/pdf': PDF, // .pdf
+const mimeTypeToIconKeyMap: Record<string, keyof IconsMap> = {
+  'application/pdf': 'PDF', // .pdf
 };
 
 for (const type of audioFileTypes) {
-  mimeTypeToIconMap[type] = Audio;
+  mimeTypeToIconKeyMap[type] = 'Audio';
 }
 
 for (const type of docMimeTypes) {
-  mimeTypeToIconMap[type] = DOC;
+  mimeTypeToIconKeyMap[type] = 'DOC';
 }
 
 for (const type of excelMimeTypes) {
-  mimeTypeToIconMap[type] = SpreadSheet;
+  mimeTypeToIconKeyMap[type] = 'SpreadSheet';
 }
 
 for (const type of powerpointMimeTypes) {
-  mimeTypeToIconMap[type] = Presentation;
+  mimeTypeToIconKeyMap[type] = 'Presentation';
 }
 
 for (const type of zipFileTypes) {
-  mimeTypeToIconMap[type] = ZIP;
+  mimeTypeToIconKeyMap[type] = 'ZIP';
 }
 
 for (const type of videoFileTypes) {
-  mimeTypeToIconMap[type] = Video;
+  mimeTypeToIconKeyMap[type] = 'Video';
 }
 
 for (const type of codeFileTypes) {
-  mimeTypeToIconMap[type] = Code;
+  mimeTypeToIconKeyMap[type] = 'Code';
 }
 
-function mimeTypeToIcon(mimeType?: string): React.ComponentType<IconProps> {
+function mimeTypeToIconKey(mimeType?: string): keyof IconsMap {
   if (!mimeType) {
-    return OtherFileIcon;
+    return 'OtherFileIcon';
   }
 
-  const Icon = mimeTypeToIconMap[mimeType];
-  if (Icon) {
-    return Icon;
+  const iconKey = mimeTypeToIconKeyMap[mimeType];
+  if (iconKey) {
+    return iconKey;
   }
 
-  return OtherFileIcon;
+  return 'OtherFileIcon';
 }
 
 export type FileIconProps = {
@@ -426,8 +417,9 @@ export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
       },
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
-  const Icon = mimeTypeToIcon(mimeType);
+  const Icon = icons[mimeTypeToIconKey(mimeType)];
 
   return <Icon {...(size ? sizeToNumber(size) : {})} {...icon} />;
 };
diff --git a/package/src/components/Attachment/Giphy/Giphy.tsx b/package/src/components/Attachment/Giphy/Giphy.tsx
index 836aee2350..8c954ce7d7 100644
--- a/package/src/components/Attachment/Giphy/Giphy.tsx
+++ b/package/src/components/Attachment/Giphy/Giphy.tsx
@@ -5,6 +5,7 @@ import type { Attachment } from 'stream-chat';
 
 import { GiphyImage } from './GiphyImage';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -16,7 +17,6 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
-import { EyeOpen } from '../../../icons/EyeOpen';
 import { components, primitives } from '../../../theme';
 import { Button } from '../../ui/';
 
@@ -43,6 +43,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
 
   const { actions, image_url, thumb_url } = attachment;
 
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const {
@@ -68,7 +69,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       testID='giphy-action-attachment'
     >
       <View style={[styles.header, header]}>
-        <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
+        <icons.EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
       </View>
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
diff --git a/package/src/components/Attachment/UrlPreview/URLPreview.tsx b/package/src/components/Attachment/UrlPreview/URLPreview.tsx
index 424c2d1d1b..cac7956894 100644
--- a/package/src/components/Attachment/UrlPreview/URLPreview.tsx
+++ b/package/src/components/Attachment/UrlPreview/URLPreview.tsx
@@ -25,7 +25,6 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -67,6 +66,8 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
     styles: stylesProp = {},
   } = props;
 
+  const { icons } = useComponentsContext();
+
   const {
     theme: { semantics },
   } = useTheme();
@@ -155,7 +156,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
           </Text>
         ) : null}
         <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-          <Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+          <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
           <Text
             numberOfLines={1}
             style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}
diff --git a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
index 07a0fc9415..ed6bc35a91 100644
--- a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
+++ b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
@@ -25,7 +25,6 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -63,6 +62,8 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
     styles: stylesProp = {},
   } = props;
 
+  const { icons } = useComponentsContext();
+
   const {
     theme: { semantics },
   } = useTheme();
@@ -157,7 +158,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
             </Text>
           ) : null}
           <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-            <Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+            <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
             <Text
               numberOfLines={1}
               style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
index 161d7fc6f3..09d1ddb230 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
@@ -5,9 +5,9 @@ import { renderAttachmentPickerItem } from './AttachmentPickerItem';
 import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { useStableCallback } from '../../../../hooks';
-import { Picture } from '../../../../icons';
 
 import { NativeHandlers } from '../../../../native';
 import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
@@ -38,8 +38,9 @@ export const AttachmentMediaPickerIcon = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
-  return <Picture height={22} stroke={semantics.textTertiary} width={22} />;
+  return <icons.Picture height={22} stroke={semantics.textTertiary} width={22} />;
 };
 
 export const AttachmentMediaPicker = (props: AttachmentPickerContentProps) => {
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
index 3f6c83fdd5..2af5aed769 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx
@@ -15,7 +15,6 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../../hooks/useViewport';
-import { Plus } from '../../../../icons/plus';
 import { NativeHandlers } from '../../../../native';
 import { primitives } from '../../../../theme';
 import type { File } from '../../../../types/types';
@@ -163,6 +162,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
 
 const AttachmentIosLimited = () => {
   const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { vw } = useViewport();
   const { t } = useTranslationContext();
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
@@ -178,7 +178,7 @@ const AttachmentIosLimited = () => {
       ]}
       onPress={NativeHandlers.iOS14RefreshGallerySelection}
     >
-      <Plus width={20} height={20} stroke={styles.iosLimitedIcon.color} strokeWidth={1.5} />
+      <icons.Plus width={20} height={20} stroke={styles.iosLimitedIcon.color} strokeWidth={1.5} />
       <Text style={styles.iosLimitedText}>{t('Add more')}</Text>
     </BottomSheetTouchableOpacity>
   );
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
index 91610b5798..c02a4ad876 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
@@ -19,9 +19,9 @@ import {
   useMessageInputContext,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, PollThumbnail, VideoIcon } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
 
@@ -149,6 +149,7 @@ export const AttachmentCommandPicker = () => {
 
 export const AttachmentPollPicker = (props: AttachmentPickerContentProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height } = props;
   const { openPollCreationDialog, sendMessage } = useMessageInputContext();
 
@@ -158,7 +159,7 @@ export const AttachmentPollPicker = (props: AttachmentPickerContentProps) => {
 
   return (
     <AttachmentPickerGenericContent
-      Icon={PollThumbnail}
+      Icon={icons.PollThumbnail}
       onPress={openPollCreationModal}
       height={height}
       buttonText={t('Create Poll')}
@@ -172,6 +173,7 @@ export const AttachmentCameraPicker = (
 ) => {
   const [permissionDenied, setPermissionDenied] = useState(false);
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height, videoOnly } = props;
   const { takeAndUploadImage } = useMessageInputContext();
 
@@ -198,7 +200,7 @@ export const AttachmentCameraPicker = (
 
   return permissionDenied ? (
     <AttachmentPickerGenericContent
-      Icon={Camera}
+      Icon={icons.Camera}
       onPress={openSettings}
       height={height}
       buttonText={t('Change in Settings')}
@@ -206,7 +208,7 @@ export const AttachmentCameraPicker = (
     />
   ) : (
     <AttachmentPickerGenericContent
-      Icon={videoOnly ? VideoIcon : Camera}
+      Icon={videoOnly ? icons.VideoIcon : icons.Camera}
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}
@@ -217,12 +219,13 @@ export const AttachmentCameraPicker = (
 
 export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height } = props;
   const { pickFile } = useMessageInputContext();
 
   return (
     <AttachmentPickerGenericContent
-      Icon={FilePickerIcon}
+      Icon={icons.FilePickerIcon}
       onPress={pickFile}
       height={height}
       buttonText={t('Open Files')}
diff --git a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx
index bf2ff59a76..c2cb629b6a 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx
@@ -13,17 +13,10 @@ import {
   useMessagesContext,
   useOwnCapabilitiesContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useStableCallback } from '../../../hooks';
 import { useAttachmentPickerState } from '../../../hooks/useAttachmentPickerState';
-import {
-  Camera,
-  Picture,
-  VideoIcon,
-  FilePickerIcon,
-  PollThumbnail,
-  CommandsIcon,
-  IconProps,
-} from '../../../icons';
+import { IconProps } from '../../../icons';
 import { Button, ButtonProps } from '../../ui';
 import { BottomSheetModal } from '../../UIComponents';
 
@@ -71,6 +64,7 @@ export const AttachmentTypePickerButton = ({
 export const MediaPickerButton = () => {
   const { hasImagePicker, pickAndUploadImageFromNativePicker } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const setImagePicker = useStableCallback(() => {
@@ -85,7 +79,7 @@ export const MediaPickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open photo picker'
       testID='upload-photo-touchable'
-      Icon={Picture}
+      Icon={icons.Picture}
       selected={selectedPicker === 'images'}
       onPress={setImagePicker}
     />
@@ -94,6 +88,7 @@ export const MediaPickerButton = () => {
 
 export const CameraPickerButton = () => {
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const { hasCameraPicker, takeAndUploadImage } = useMessageInputContext();
@@ -119,14 +114,14 @@ export const CameraPickerButton = () => {
       <AttachmentTypePickerButton
         accessibilityLabelKey='a11y/Open camera'
         testID='take-photo-touchable'
-        Icon={Camera}
+        Icon={icons.Camera}
         selected={selectedPicker === 'camera-photo'}
         onPress={onCameraPickerPress}
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
           accessibilityLabelKey='a11y/Open video recorder'
-          Icon={VideoIcon}
+          Icon={icons.VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
         />
@@ -137,6 +132,7 @@ export const CameraPickerButton = () => {
 
 export const FilePickerButton = () => {
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const { hasFilePicker, pickFile } = useMessageInputContext();
@@ -152,7 +148,7 @@ export const FilePickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open file picker'
       testID='upload-file-touchable'
-      Icon={FilePickerIcon}
+      Icon={icons.FilePickerIcon}
       selected={selectedPicker === 'files'}
       onPress={openFilePicker}
     />
@@ -164,6 +160,7 @@ export const PollPickerButton = () => {
   const { selectedPicker } = useAttachmentPickerState();
 
   const { threadList } = useChannelContext();
+  const { icons } = useComponentsContext();
   const { hasCreatePoll } = useMessagesContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -180,7 +177,7 @@ export const PollPickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open poll creation'
       testID='create-poll-touchable'
-      Icon={PollThumbnail}
+      Icon={icons.PollThumbnail}
       selected={selectedPicker === 'polls'}
       onPress={openPollCreationModal}
     />
@@ -191,6 +188,7 @@ export const CommandsPickerButton = () => {
   const [showCommandsSheet, setShowCommandsSheet] = useState(false);
   const { hasCommands } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const setCommandsPicker = useStableCallback(() => {
@@ -208,7 +206,7 @@ export const CommandsPickerButton = () => {
       <AttachmentTypePickerButton
         accessibilityLabelKey='a11y/Open commands'
         testID='commands-touchable'
-        Icon={CommandsIcon}
+        Icon={icons.CommandsIcon}
         selected={selectedPicker === 'commands'}
         onPress={setCommandsPicker}
       />
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
index c14a695f1d..e457544782 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
@@ -3,32 +3,31 @@ import { StyleSheet, View } from 'react-native';
 
 import { CommandVariants } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import { Lightning } from '../../icons/bolt';
-import { Imgur } from '../../icons/imgur';
 
 export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
   if (name === 'ban') {
-    return <UserDelete height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.UserDelete height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'flag') {
-    return <Flag height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.Flag height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'giphy') {
-    return <GiphyIcon height={20} width={20} />;
+    return <icons.GiphyIcon height={20} width={20} />;
   } else if (name === 'imgur') {
-    return <Imgur height={20} width={20} />;
+    return <icons.Imgur height={20} width={20} />;
   } else if (name === 'mute') {
-    return <Mute height={20} fill={semantics.textSecondary} width={20} />;
+    return <icons.Mute height={20} fill={semantics.textSecondary} width={20} />;
   } else if (name === 'unban') {
-    return <UserAdd height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.UserAdd height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'unmute') {
-    return <Sound height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.Sound height={20} stroke={semantics.textSecondary} width={20} />;
   } else {
-    return <Lightning fill={semantics.textSecondary} height={16} width={16} />;
+    return <icons.Lightning fill={semantics.textSecondary} height={16} width={16} />;
   }
 };
 
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
index a912d5c57c..b778c5af6e 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Smile } from '../../icons/emoji';
 import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {
@@ -48,11 +48,12 @@ export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ query
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   return (
     <View style={[styles.container, container]}>
-      <Smile pathFill={semantics.accentPrimary} />
+      <icons.Smile pathFill={semantics.accentPrimary} />
       <Text accessibilityRole='header' style={[styles.title, title]} testID='emojis-header-title'>
         {`Emoji matching "${queryText}"`}
       </Text>
diff --git a/package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx b/package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx
index 5b90332e61..0a6db47aba 100644
--- a/package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx
+++ b/package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx
@@ -6,8 +6,8 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Megaphone } from '../../../icons/megaphone';
 
 export type MentionBroadcastItemProps = {
   entity: ChannelMentionSuggestion | HereMentionSuggestion;
@@ -24,8 +24,9 @@ const SUBTITLE_KEY = {
 
 export const MentionBroadcastItem = ({ entity }: MentionBroadcastItemProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   return (
-    <MentionItem leading={<EnhancedMentionIcon Icon={Megaphone} />}>
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.Megaphone} />}>
       <EnhancedMentionContent
         subtitle={t(SUBTITLE_KEY[entity.mentionType])}
         testID='mentions-item-name'
diff --git a/package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx b/package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx
index 55f0c686cc..8253924895 100644
--- a/package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx
+++ b/package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx
@@ -6,8 +6,8 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Shield } from '../../../icons/shield';
 
 export type MentionRoleItemProps = {
   entity: RoleMentionSuggestion;
@@ -15,8 +15,9 @@ export type MentionRoleItemProps = {
 
 export const MentionRoleItem = ({ entity }: MentionRoleItemProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   return (
-    <MentionItem leading={<EnhancedMentionIcon Icon={Shield} />}>
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.Shield} />}>
       <EnhancedMentionContent
         subtitle={t('Notify all {{ role }} members', { role: entity.name })}
         testID='mentions-item-name'
diff --git a/package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx b/package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx
index 67f1152a74..fc8d50193b 100644
--- a/package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx
+++ b/package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx
@@ -6,18 +6,21 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
-import { PeopleIcon } from '../../../icons/users';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 export type MentionUserGroupItemProps = {
   entity: UserGroupMentionSuggestion;
 };
 
-export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => (
-  <MentionItem leading={<EnhancedMentionIcon Icon={PeopleIcon} />}>
-    <EnhancedMentionContent
-      subtitle={entity.description}
-      testID='mentions-item-name'
-      title={`@${entity.name}`}
-    />
-  </MentionItem>
-);
+export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => {
+  const { icons } = useComponentsContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.PeopleIcon} />}>
+      <EnhancedMentionContent
+        subtitle={entity.description}
+        testID='mentions-item-name'
+        title={`@${entity.name}`}
+      />
+    </MentionItem>
+  );
+};
diff --git a/package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx b/package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx
index 439dbb30fa..9f00da6a0f 100644
--- a/package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx
+++ b/package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx
@@ -4,10 +4,10 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
-import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui/Button/Button';
 
@@ -26,6 +26,7 @@ export const ChannelDetailsNavHeader = ({
   title,
 }: ChannelDetailsNavHeaderProps) => {
   const { channel } = useChannelDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -54,7 +55,7 @@ export const ChannelDetailsNavHeader = ({
           <Button
             accessibilityLabelKey='a11y/Back'
             iconOnly
-            LeadingIcon={ChevronLeft}
+            LeadingIcon={icons.ChevronLeft}
             onPress={onBack}
             size='md'
             testID='channel-details-back-button'
diff --git a/package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx b/package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx
index 53da03cdc8..afbfad283a 100644
--- a/package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx
+++ b/package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx
@@ -8,8 +8,6 @@ import { ModalHeader } from './modal/ModalHeader';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { ChevronRight } from '../../../icons';
-import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { ImageGallery } from '../../ImageGallery/ImageGallery';
 import {
@@ -40,7 +38,7 @@ export const ChannelDetailsNavigationSection = ({
     },
   } = useTheme();
   const styles = useStyles();
-  const { FileAttachmentList, MediaList, PinnedMessageList } = useComponentsContext();
+  const { FileAttachmentList, icons, MediaList, PinnedMessageList } = useComponentsContext();
   const items = useChannelDetailsNavigationItems({ getNavigationItems });
   const [activeSection, setActiveSection] = useState<ChannelDetailsNavigationSectionType | null>(
     null,
@@ -74,15 +72,15 @@ export const ChannelDetailsNavigationSection = ({
   const chevron = useMemo(
     () => (
       <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants'>
-        <ChevronRight height={20} stroke={semantics.textTertiary} width={20} />
+        <icons.ChevronRight height={20} stroke={semantics.textTertiary} width={20} />
       </View>
     ),
-    [semantics.textTertiary],
+    [icons, semantics.textTertiary],
   );
 
   const closeButtonProps = useMemo(
-    () => ({ type: 'ghost' as const, LeadingIcon: ChevronLeft }),
-    [],
+    () => ({ type: 'ghost' as const, LeadingIcon: icons.ChevronLeft }),
+    [icons],
   );
 
   return (
diff --git a/package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx b/package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx
index 445ef7ee57..e902ad9f46 100644
--- a/package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx
+++ b/package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx
@@ -3,10 +3,10 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
 import { composeAccessibilityLabel } from '../../../a11y/a11yUtils';
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelMuteActive } from '../../../hooks/useChannelMuteActive';
-import { Mute } from '../../../icons/mute';
 import { primitives } from '../../../theme';
 import { useChannelPreviewDisplayName } from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
 import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
@@ -14,6 +14,7 @@ import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMem
 
 export const ChannelDetailsProfile = () => {
   const { channel } = useChannelDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -53,7 +54,7 @@ export const ChannelDetailsProfile = () => {
             {displayName ?? ''}
           </Text>
           {muted ? (
-            <Mute
+            <icons.Mute
               fill={semantics.textTertiary}
               height={20}
               testID='channel-details-profile-muted-indicator'
diff --git a/package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx b/package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx
index 8ec7d36dc3..126d31effe 100644
--- a/package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx
+++ b/package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx
@@ -5,9 +5,9 @@ import { ActivityIndicator, Keyboard } from 'react-native';
 import { ModalHeader } from './modal/ModalHeader';
 
 import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks/useStableCallback';
-import { Checkmark } from '../../../icons/checkmark-1';
 import { useAreChannelDetailsEdited } from '../../../state-store/edit-channel-details-store';
 import { Button } from '../../ui/Button/Button';
 
@@ -23,6 +23,7 @@ export type ChannelEditDetailsFormHeaderProps = {
 
 export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsFormHeaderProps) => {
   const { store, submit } = useChannelEditDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const [saving, setSaving] = useState(false);
   const channelDetailsEdited = useAreChannelDetailsEdited(store);
@@ -52,7 +53,7 @@ export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsForm
           accessibilityState={{ busy: saving, disabled: !confirmEnabled }}
           disabled={!confirmEnabled}
           iconOnly
-          LeadingIcon={saving ? LoadingButtonIcon : Checkmark}
+          LeadingIcon={saving ? LoadingButtonIcon : icons.Checkmark}
           onPress={handleConfirm}
           testID='channel-details-edit-confirm-button'
           type='solid'
diff --git a/package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx b/package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx
index a85c180c56..981085f982 100644
--- a/package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx
+++ b/package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx
@@ -15,11 +15,7 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Camera } from '../../../icons/camera';
-import { Delete } from '../../../icons/delete';
-import { Picture } from '../../../icons/image';
 import type { IconProps } from '../../../icons/utils/base';
-import { Cross } from '../../../icons/xmark-1';
 import type {
   EditChannelDetailsState,
   EditChannelImagePendingAction,
@@ -51,7 +47,7 @@ const keyExtractor = (item: SheetItem) => item.id;
 
 const ChannelEditImageSheetInner = () => {
   const { store } = useChannelEditDetailsContext();
-  const { ChannelDetailsActionItem } = useComponentsContext();
+  const { ChannelDetailsActionItem, icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -81,7 +77,7 @@ const ChannelEditImageSheetInner = () => {
   const items = useMemo<SheetItem[]>(() => {
     const base: SheetItem[] = [
       {
-        Icon: Camera,
+        Icon: icons.Camera,
         id: 'take-photo',
         label: t('Take Photo'),
         onPress: () => {
@@ -90,7 +86,7 @@ const ChannelEditImageSheetInner = () => {
         testID: 'channel-edit-picture-take-photo',
       },
       {
-        Icon: Picture,
+        Icon: icons.Picture,
         id: 'choose-image',
         label: t('Choose Image'),
         onPress: () => {
@@ -103,7 +99,7 @@ const ChannelEditImageSheetInner = () => {
     if (canReset) {
       base.push({
         destructive: true,
-        Icon: Delete,
+        Icon: icons.Delete,
         id: 'reset-picture',
         label: t('Reset Picture'),
         onPress: () => {
@@ -114,7 +110,7 @@ const ChannelEditImageSheetInner = () => {
     }
 
     return base;
-  }, [canReset, onSelect, t]);
+  }, [canReset, icons, onSelect, t]);
 
   const renderItem = useCallback<ListRenderItem<SheetItem>>(
     ({ item }) => (
@@ -136,7 +132,7 @@ const ChannelEditImageSheetInner = () => {
           <Button
             accessibilityLabelKey='a11y/Close edit picture sheet'
             iconOnly
-            LeadingIcon={Cross}
+            LeadingIcon={icons.Cross}
             onPress={() => close()}
             size='md'
             testID='channel-edit-picture-sheet-close-button'
diff --git a/package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx b/package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx
index dd62070650..295932df08 100644
--- a/package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx
+++ b/package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx
@@ -4,7 +4,6 @@ import { useChannelDetailsContext } from '../../../../contexts/channelDetailsCon
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useCanAddMembersToChannel } from '../../../../hooks/useCanAddMembersToChannel';
-import { UserAdd } from '../../../../icons/user-add';
 import { Button, ButtonProps } from '../../../ui/Button/Button';
 import { ChannelDetailsModal } from '../modal/Modal';
 
@@ -24,7 +23,7 @@ export const ChannelAddMembersButton = ({
   variant = 'text',
 }: ChannelAddMembersButtonProps) => {
   const { channel } = useChannelDetailsContext();
-  const { ChannelAddMembersForm } = useComponentsContext();
+  const { ChannelAddMembersForm, icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const isVisible = useCanAddMembersToChannel(channel);
   const [isAddMembersVisible, setAddMembersVisible] = useState(false);
@@ -53,7 +52,7 @@ export const ChannelAddMembersButton = ({
         <Button
           accessibilityLabelKey='a11y/Add members'
           iconOnly
-          LeadingIcon={UserAdd}
+          LeadingIcon={icons.UserAdd}
           onPress={handlePress}
           size='md'
           style={style}
diff --git a/package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx b/package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx
index bd10df0acd..55e2967334 100644
--- a/package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx
+++ b/package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx
@@ -3,10 +3,10 @@ import React, { useCallback, useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import { useChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks/useStableCallback';
-import { Checkmark } from '../../../../icons/checkmark-1';
 import { useIsSelectionEmpty } from '../../../../state-store/selection-store';
 import { Button } from '../../../ui/Button/Button';
 import { ModalHeader } from '../modal/ModalHeader';
@@ -23,6 +23,7 @@ export type ChannelAddMembersFormHeaderProps = {
 
 export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHeaderProps) => {
   const { selectionStore, submit } = useChannelAddMembersContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -63,7 +64,7 @@ export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHe
           variant='primary'
           onPress={handleConfirm}
           type='solid'
-          LeadingIcon={addingMembers ? LoadingButtonIcon : Checkmark}
+          LeadingIcon={addingMembers ? LoadingButtonIcon : icons.Checkmark}
           iconOnly
           testID='channel-details-add-members-confirm-button'
           style={confirmButtonOverride}
diff --git a/package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx b/package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx
index f987023e6e..9ab06fbde0 100644
--- a/package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx
+++ b/package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx
@@ -8,7 +8,6 @@ import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Mute } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { useUserMuteActive } from '../../../Message/hooks/useUserMuteActive';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
@@ -45,7 +44,7 @@ export const ChannelMemberItem = ({
 }: ChannelMemberItemProps) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
-  const { RoleList } = useComponentsContext();
+  const { icons, RoleList } = useComponentsContext();
   const {
     theme: {
       channelDetails: {
@@ -102,7 +101,7 @@ export const ChannelMemberItem = ({
       {isMuted || roles.length > 0 ? (
         <View style={styles.trailing}>
           {isMuted ? (
-            <Mute
+            <icons.Mute
               height={16}
               pathFill={semantics.textTertiary}
               testID='channel-member-muted-indicator'
diff --git a/package/src/components/ChannelDetails/components/modal/ModalHeader.tsx b/package/src/components/ChannelDetails/components/modal/ModalHeader.tsx
index 45fff3b0c9..8046d0060c 100644
--- a/package/src/components/ChannelDetails/components/modal/ModalHeader.tsx
+++ b/package/src/components/ChannelDetails/components/modal/ModalHeader.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Cross } from '../../../../icons/xmark-1';
 import { primitives } from '../../../../theme';
 import { Button, ButtonProps } from '../../../ui/Button/Button';
 
@@ -19,6 +19,7 @@ export const ModalHeader = ({
   title,
   additionalCloseButtonProps,
 }: ModalHeaderProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       channelDetails: {
@@ -35,7 +36,7 @@ export const ModalHeader = ({
         <Button
           accessibilityLabelKey='a11y/Close'
           iconOnly
-          LeadingIcon={Cross}
+          LeadingIcon={icons.Cross}
           onPress={onClose}
           size='md'
           type='outline'
diff --git a/package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx b/package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx
index 119a97c8be..64d5d1bf13 100644
--- a/package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx
+++ b/package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx
@@ -22,7 +22,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Folder } from '../../../../icons/folder';
 import { primitives } from '../../../../theme';
 import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 import { NotificationList } from '../../../Notifications/NotificationList';
@@ -67,7 +66,7 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
     },
   } = useTheme();
   const styles = useStyles();
-  const { FileAttachmentItem } = useComponentsContext();
+  const { FileAttachmentItem, icons } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -140,7 +139,11 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
     loading || isEmpty === undefined ? (
       <FileAttachmentListLoadingSkeleton />
     ) : (
-      <EmptyList icon={Folder} subtitle={t('Share a file to see it here')} title={t('No files')} />
+      <EmptyList
+        icon={icons.Folder}
+        subtitle={t('Share a file to see it here')}
+        title={t('No files')}
+      />
     );
 
   const loadingMoreIndicator = (
diff --git a/package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx b/package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx
index 6aff6ba539..53184ccb90 100644
--- a/package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx
+++ b/package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx
@@ -6,7 +6,6 @@ import type { Attachment, MessageResponse } from 'stream-chat';
 import { useChatConfigContext } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../../../icons/video-fill';
 import { primitives } from '../../../../theme';
 import { FileTypes } from '../../../../types/types';
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
@@ -40,7 +39,7 @@ export type MediaItemProps = {
 };
 
 export const MediaItem = (props: MediaItemProps) => {
-  const { ImageComponent: Image } = useComponentsContext();
+  const { ImageComponent: Image, icons } = useComponentsContext();
   const { attachment, message, onPress, size } = props;
   const {
     theme: {
@@ -95,7 +94,7 @@ export const MediaItem = (props: MediaItemProps) => {
             mediaItem.videoBadge,
           ]}
         >
-          <Recorder fill={semantics.badgeTextOnInverse} size={12} />
+          <icons.Recorder fill={semantics.badgeTextOnInverse} size={12} />
           <Text
             style={[
               styles.videoBadgeText,
diff --git a/package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx b/package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx
index ec08104dab..da95910d57 100644
--- a/package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx
+++ b/package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx
@@ -30,7 +30,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Picture } from '../../../../icons/image';
 import { isVideoPlayerAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
 import { FileTypes } from '../../../../types/types';
@@ -79,7 +78,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
   } = useTheme();
   const styles = useStyles();
   const { width } = useWindowDimensions();
-  const { MediaItem } = useComponentsContext();
+  const { icons, MediaItem } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -183,7 +182,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
       <MediaListLoadingSkeleton />
     ) : (
       <EmptyList
-        icon={Picture}
+        icon={icons.Picture}
         subtitle={t('Share a photo or video to see it here')}
         title={t('No photos or videos')}
       />
diff --git a/package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx b/package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx
index cbba8ae34f..bc1af167fc 100644
--- a/package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx
+++ b/package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx
@@ -15,7 +15,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 import { NotificationList } from '../../../Notifications/NotificationList';
@@ -62,7 +61,7 @@ const PinnedMessageListContent = ({
     },
   } = useTheme();
   const styles = useStyles();
-  const { PinnedMessageItem } = useComponentsContext();
+  const { icons, PinnedMessageItem } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -120,7 +119,7 @@ const PinnedMessageListContent = ({
     <PinnedMessageListLoadingSkeleton />
   ) : isEmpty ? (
     <EmptyList
-      icon={Pin}
+      icon={icons.Pin}
       subtitle={t('Long-press a message to pin it to the chat')}
       title={t('No pinned messages')}
     />
diff --git a/package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts b/package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts
index 8cb8903a0c..587e325bf1 100644
--- a/package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts
+++ b/package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts
@@ -1,11 +1,8 @@
 import React, { useMemo } from 'react';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Picture } from '../../../icons';
-import { Folder } from '../../../icons/folder';
-
-import { Pin } from '../../../icons/pin';
 import type { IconProps } from '../../../icons/utils/base';
 
 /**
@@ -37,16 +34,17 @@ export type ChannelDetailsNavigationItem = {
 };
 
 /**
- * Maps each navigation section to the icon and (translatable) label rendered for its row and,
- * when opened, its modal header. The declaration order also drives the order of the rendered rows.
+ * Maps each navigation section to the icon (by its key in the components-context icons map) and
+ * (translatable) label rendered for its row and, when opened, its modal header. The declaration
+ * order also drives the order of the rendered rows.
  */
 const SECTION_CONFIG: Record<
   'pinned-messages' | 'photos-and-videos' | 'files',
-  { Icon: React.ComponentType<IconProps>; label: string }
+  { icon: 'Pin' | 'Picture' | 'Folder'; label: string }
 > = {
-  'pinned-messages': { Icon: Pin, label: 'Pinned Messages' },
-  'photos-and-videos': { Icon: Picture, label: 'Photos & Videos' },
-  files: { Icon: Folder, label: 'Files' },
+  'pinned-messages': { icon: 'Pin', label: 'Pinned Messages' },
+  'photos-and-videos': { icon: 'Picture', label: 'Photos & Videos' },
+  files: { icon: 'Folder', label: 'Files' },
 };
 
 const SECTIONS = Object.keys(SECTION_CONFIG) as Array<keyof typeof SECTION_CONFIG>;
@@ -82,6 +80,7 @@ export const useChannelDetailsNavigationItems = ({
 }: {
   getNavigationItems?: GetChannelDetailsNavigationItems;
 } = {}): ChannelDetailsNavigationItem[] => {
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const context = useMemo<ChannelDetailsNavigationItemsContext>(() => ({ t }), [t]);
@@ -89,10 +88,10 @@ export const useChannelDetailsNavigationItems = ({
   const defaultItems = useMemo<ChannelDetailsNavigationItem[]>(
     () =>
       SECTIONS.map((section) => {
-        const { Icon, label } = SECTION_CONFIG[section];
-        return { Icon, label: t(label), section };
+        const { icon, label } = SECTION_CONFIG[section];
+        return { Icon: icons[icon], label: t(label), section };
       }),
-    [t],
+    [icons, t],
   );
 
   return useMemo(
diff --git a/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx b/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
index 1e545bcbad..96ea6dc072 100644
--- a/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
+++ b/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
@@ -7,10 +7,10 @@ import { ChannelPreviewProps } from './ChannelPreview';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
-import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
@@ -24,6 +24,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   message,
 }: ChannelMessagePreviewDeliveryStatusProps) => {
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const channelConfigExists = typeof channel?.getConfig === 'function';
   const styles = useStyles();
@@ -87,14 +88,24 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     <CompositeAccessibilityProbe label={statusLabel}>
       <View style={styles.container}>
         {message.status === MessageStatusTypes.SENDING ? (
-          <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
+          <icons.Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
         ) : message.status === MessageStatusTypes.RECEIVED &&
           status === MessageDeliveryStatus.READ ? (
-          <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            stroke={semantics.accentPrimary}
+            height={16}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : status === MessageDeliveryStatus.DELIVERED ? (
-          <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            stroke={semantics.chatTextTimestamp}
+            height={16}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : status === MessageDeliveryStatus.SENT ? (
-          <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
+          <icons.Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
         ) : null}
         <Text style={styles.text}>{t('You')}:</Text>
       </View>
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
index b086fe553e..be1eaea780 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
+++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
@@ -15,7 +15,6 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { PollIcon } from '../../icons/poll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
@@ -30,6 +29,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     ChannelPreviewTypingIndicator,
     ChannelPreviewMessageDeliveryStatus,
     ChannelPreviewLastMessage,
+    icons,
   } = useComponentsContext();
   const {
     theme: { semantics },
@@ -80,7 +80,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (pollLabel) {
     return (
       <View style={styles.container}>
-        <PollIcon height={16} width={16} stroke={semantics.textSecondary} />
+        <icons.PollIcon height={16} width={16} stroke={semantics.textSecondary} />
         <Text ellipsizeMode='tail' numberOfLines={1} style={styles.subtitle}>
           {pollLabel}
         </Text>
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx b/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx
index 0188dca1d3..bd3fe26f96 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx
+++ b/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Mute } from '../../icons';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
@@ -15,11 +15,12 @@ export const ChannelPreviewMutedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabel = useA11yLabel('a11y/Muted');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>
-      <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
+      <icons.Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
     </CompositeAccessibilityProbe>
   );
 };
diff --git a/package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx b/package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx
index 4f75599751..c12bbf990d 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx
+++ b/package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Pin } from '../../icons';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
@@ -15,11 +15,12 @@ export const ChannelPreviewPinnedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabel = useA11yLabel('a11y/Pinned');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>
-      <Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
+      <icons.Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
     </CompositeAccessibilityProbe>
   );
 };
diff --git a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx
index c23eb17c26..82c26dc822 100644
--- a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx
+++ b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx
@@ -13,7 +13,6 @@ import type {
   GetChannelActionItems,
 } from '../../hooks/actions/useChannelActionItems';
 import { useChannelActionItems } from '../../hooks/actions/useChannelActionItems';
-import { MenuPointHorizontal } from '../../icons';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
   RightActions,
@@ -26,7 +25,8 @@ export const OpenChannelDetailsButton = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return <MenuPointHorizontal stroke={semantics.textPrimary} />;
+  const { icons } = useComponentsContext();
+  return <icons.MenuPointHorizontal stroke={semantics.textPrimary} />;
 };
 
 export const ChannelSwipableWrapper = ({
diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
index 5f645d4978..c9cdb5feed 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -9,8 +9,6 @@ import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/Im
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
@@ -44,7 +42,7 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 
 export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) => {
   const { accessibilityLabel, opacity, openGridView, visible } = props;
-  const { ImageGalleryVideoControls } = useComponentsContext();
+  const { icons, ImageGalleryVideoControls } = useComponentsContext();
 
   const [height, setHeight] = useState(200);
   const [savingInProgress, setSavingInProgress] = useState(false);
@@ -139,7 +137,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
             type='ghost'
             size='md'
             onPress={openGridView}
-            LeadingIcon={ImageGrid}
+            LeadingIcon={icons.ImageGrid}
             iconOnly
           />
         </View>
@@ -155,6 +153,7 @@ type ShareButtonProps = {
 
 const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
   const styles = useStyles();
+  const { icons } = useComponentsContext();
   // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
   if (!isShareImageAvailable() || !isFileSystemAvailable()) {
     return null;
@@ -171,7 +170,7 @@ const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
       type='ghost'
       size='md'
       onPress={share}
-      LeadingIcon={ShareIconDefault}
+      LeadingIcon={icons.Share}
       iconOnly
     />
   );
diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
index 83ecb9929e..812f58071b 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -7,12 +7,12 @@ import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type { ImageGalleryHeaderProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
@@ -26,6 +26,7 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const { opacity, visible } = props;
   const [height, setHeight] = useState(200);
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   const { t, tDateTimeParser } = useTranslationContext();
   const { imageGalleryStateStore } = useImageGalleryContext();
@@ -77,7 +78,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
               type='ghost'
               size='md'
               onPress={hideOverlay}
-              LeadingIcon={ChevronLeft}
+              LeadingIcon={icons.ChevronLeft}
               iconOnly
             />
           </View>
diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
index a1c090291e..cefca4ce2e 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
@@ -3,12 +3,11 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { ImageGalleryVideoControlProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStableCallback } from '../../../hooks/useStableCallback';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/pause-fill';
-import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';
@@ -43,6 +42,7 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
 
   const progressDuration = getDurationLabelFromDuration(progressValueInSeconds);
 
+  const { icons } = useComponentsContext();
   const {
     theme: {
       imageGallery: {
@@ -56,11 +56,11 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
   const renderPlayPauseIcon = useCallback(
     (props: IconProps) =>
       isPlaying ? (
-        <Pause {...props} fill={semantics.textSecondary} />
+        <icons.Pause {...props} fill={semantics.textSecondary} />
       ) : (
-        <Play {...props} fill={semantics.textSecondary} />
+        <icons.Play {...props} fill={semantics.textSecondary} />
       ),
-    [isPlaying, semantics.textSecondary],
+    [icons, isPlaying, semantics.textSecondary],
   );
 
   const handlePlayPause = async () => {
diff --git a/package/src/components/Indicators/EmptyStateIndicator.tsx b/package/src/components/Indicators/EmptyStateIndicator.tsx
index 8ce52ddc02..6e91610c88 100644
--- a/package/src/components/Indicators/EmptyStateIndicator.tsx
+++ b/package/src/components/Indicators/EmptyStateIndicator.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { MessageBubbleEmpty } from '../../icons';
 import { primitives } from '../../theme';
 
 export type EmptyStateProps = {
@@ -17,6 +17,7 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const styles = useStyles();
 
@@ -24,7 +25,7 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
     case 'channel':
       return (
         <View style={[styles.container, channelContainer]}>
-          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
           <Text style={[styles.channelTitle, channelTitle]} testID='empty-channel-state-title'>
             {t('No conversations yet')}
           </Text>
@@ -33,14 +34,14 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
     case 'message':
       return (
         <View style={[styles.container, messageContainer]}>
-          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
           <Text style={[styles.messageTitle, messageTitle]}>{t('No chats here yet…')}</Text>
         </View>
       );
     case 'threads':
       return (
         <View style={styles.container}>
-          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
           <Text style={styles.threadText}>{t('Reply to a message to start a thread')}</Text>
         </View>
       );
diff --git a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
index 99c06bcec7..ffd0dd839a 100644
--- a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
@@ -2,13 +2,13 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
@@ -21,6 +21,7 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
   const styles = useStyles();
   const { t } = useTranslationContext();
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
 
   if (!message?.pinned) {
     return null;
@@ -28,7 +29,7 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
 
   return (
     <View accessibilityLabel='Message Pinned Header' style={styles.container}>
-      <Pin height={16} width={16} stroke={styles.label.color} />
+      <icons.Pin height={16} width={16} stroke={styles.label.color} />
       <Text style={styles.label}>
         {t('Pinned by')}{' '}
         {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
diff --git a/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
index 9b33ad7dc9..bc072faf8a 100644
--- a/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
@@ -4,12 +4,12 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { ReminderState } from 'stream-chat';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useMessageReminder } from '../../../../hooks/useMessageReminder';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Bell } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
@@ -26,10 +26,11 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
   const { timeLeftMs, isReminderTimeLeft } = props;
   const { t } = useTranslationContext();
   const styles = useStyles();
+  const { icons } = useComponentsContext();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <Bell height={16} width={16} stroke={styles.time.color} />
+      <icons.Bell height={16} width={16} stroke={styles.time.color} />
       <Text style={styles.label}>
         {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
       </Text>
diff --git a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
index 658f91c4fe..14a7eba127 100644
--- a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Bookmark } from '../../../../icons/save';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
@@ -13,10 +13,11 @@ export type MessageSavedForLaterHeaderProps = Partial<Pick<MessageContextValue,
 export const MessageSavedForLaterHeader = () => {
   const styles = useStyles();
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <Bookmark height={16} width={16} stroke={styles.label.color} />
+      <icons.Bookmark height={16} width={16} stroke={styles.label.color} />
       <Text style={styles.label}>{t('Saved For Later')}</Text>
     </View>
   );
diff --git a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
index 2f785e617a..6e28702547 100644
--- a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
@@ -8,12 +8,12 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
-import { ArrowUpRight } from '../../../../icons/arrow-up-right';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
@@ -34,10 +34,11 @@ const SentToChannelHeaderWithContext = (props: SentToChannelHeaderPropsWithConte
   const { threadList, onPress, showViewText } = props;
   const { t } = useTranslationContext();
   const styles = useStyles();
+  const { icons } = useComponentsContext();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <ArrowUpRight height={16} width={16} stroke={styles.link.color} />
+      <icons.ArrowUpRight height={16} width={16} stroke={styles.link.color} />
       <Text style={styles.label}>
         {threadList ? t('Also sent in channel') : t('Replied to a thread')}
       </Text>
diff --git a/package/src/components/Message/MessageItemView/MessageDeleted.tsx b/package/src/components/Message/MessageItemView/MessageDeleted.tsx
index 4515b5095f..1e13402997 100644
--- a/package/src/components/Message/MessageItemView/MessageDeleted.tsx
+++ b/package/src/components/Message/MessageItemView/MessageDeleted.tsx
@@ -8,7 +8,6 @@ import {
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { CircleBan } from '../../../icons/no-sign';
 import { components, primitives } from '../../../theme';
 
 type MessageDeletedComponentProps = {
@@ -21,7 +20,7 @@ type MessageDeletedPropsWithContext = Pick<MessageContextValue, 'alignment' | 'm
 
 const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
   const { alignment, date, groupStyle } = props;
-  const { MessageFooter } = useComponentsContext();
+  const { icons, MessageFooter } = useComponentsContext();
 
   const {
     theme: {
@@ -55,7 +54,7 @@ const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
           containerInner,
         ]}
       >
-        <CircleBan height={16} width={16} stroke={semantics.textSecondary} />
+        <icons.CircleBan height={16} width={16} stroke={semantics.textSecondary} />
         <Text style={[styles.deletedText, deletedText]}>{t('Message deleted')}</Text>
       </View>
       <MessageFooter date={date} />
diff --git a/package/src/components/Message/MessageItemView/MessageReplies.tsx b/package/src/components/Message/MessageItemView/MessageReplies.tsx
index 3e17926e36..c28766fdb7 100644
--- a/package/src/components/Message/MessageItemView/MessageReplies.tsx
+++ b/package/src/components/Message/MessageItemView/MessageReplies.tsx
@@ -11,8 +11,6 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
-import { ReplyConnectorLeft } from '../../../icons/ReplyConnectorLeft';
-import { ReplyConnectorRight } from '../../../icons/ReplyConnectorRight';
 import { primitives } from '../../../theme';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
@@ -43,7 +41,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     t,
     threadList,
   } = props;
-  const { MessageRepliesAvatars } = useComponentsContext();
+  const { icons, MessageRepliesAvatars } = useComponentsContext();
 
   const {
     theme: {
@@ -66,9 +64,9 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
 
   const connector =
     physicalAlignment === 'left' ? (
-      <ReplyConnectorLeft height={48} width={16} stroke={connectorStroke} />
+      <icons.ReplyConnectorLeft height={48} width={16} stroke={connectorStroke} />
     ) : (
-      <ReplyConnectorRight height={48} width={16} stroke={connectorStroke} />
+      <icons.ReplyConnectorRight height={48} width={16} stroke={connectorStroke} />
     );
 
   if (threadList || !message.reply_count) {
diff --git a/package/src/components/Message/MessageItemView/MessageStatus.tsx b/package/src/components/Message/MessageItemView/MessageStatus.tsx
index fffd49472c..db86a63105 100644
--- a/package/src/components/Message/MessageItemView/MessageStatus.tsx
+++ b/package/src/components/Message/MessageItemView/MessageStatus.tsx
@@ -3,14 +3,12 @@ import { StyleSheet, View } from 'react-native';
 
 import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Check } from '../../../icons/checkmark';
-import { CheckAll } from '../../../icons/checks';
-import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
@@ -25,6 +23,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
   const { deliveredToCount, message, readBy } = props;
 
   const styles = useStyles();
+  const { icons } = useComponentsContext();
 
   const {
     theme: {
@@ -71,13 +70,23 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         style={[styles.container, container]}
       >
         {read ? (
-          <CheckAll height={16} stroke={styles.readCheck.color} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            height={16}
+            stroke={styles.readCheck.color}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : delivered ? (
-          <CheckAll stroke={styles.deliveredCheck.color} height={16} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            stroke={styles.deliveredCheck.color}
+            height={16}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : sending ? (
-          <Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+          <icons.Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
         ) : sent ? (
-          <Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+          <icons.Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
         ) : null}
       </View>
     </>
diff --git a/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx b/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
index b1ffe3b5c9..61400c7d46 100644
--- a/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
+++ b/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { ArrowShareLeft } from '../../../icons';
 import { primitives } from '../../../theme';
 
 export const MessageSwipeContent = () => {
@@ -10,10 +10,11 @@ export const MessageSwipeContent = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
   return (
     <View style={styles.container}>
-      <ArrowShareLeft stroke={semantics.buttonSecondaryTextOnAccent} height={20} width={20} />
+      <icons.ArrowShareLeft stroke={semantics.buttonSecondaryTextOnAccent} height={20} width={20} />
     </View>
   );
 };
diff --git a/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
index 3203f2fe8d..1bf56a2491 100644
--- a/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
@@ -4,6 +4,7 @@ import { StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
 import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -14,8 +15,6 @@ import {
 } from '../../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 
-import { Unknown } from '../../../../icons/Unknown';
-
 import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
@@ -29,8 +28,9 @@ type Props = Pick<IconProps, 'pathFill' | 'style'> & {
 };
 
 const Icon = ({ size, style, supportedReactions, type }: Props) => {
+  const { icons } = useComponentsContext();
   const ReactionIcon =
-    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || Unknown;
+    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || icons.Unknown;
 
   return <ReactionIcon size={size} style={style} />;
 };
diff --git a/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
index 5d1b49159c..39ac490907 100644
--- a/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
@@ -4,12 +4,11 @@ import { StyleSheet, Text } from 'react-native';
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
 import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { MessagesContextValue } from '../../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 
-import { Unknown } from '../../../../icons/Unknown';
-
 import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
@@ -24,8 +23,9 @@ type Props = Pick<IconProps, 'pathFill' | 'style'> & {
 };
 
 const Icon = ({ size, style, supportedReactions, type }: Props) => {
+  const { icons } = useComponentsContext();
   const ReactionIcon =
-    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || Unknown;
+    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || icons.Unknown;
 
   return <ReactionIcon size={size} style={style} />;
 };
diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx
index a1451d4b65..3f6a2b62ed 100644
--- a/package/src/components/Message/hooks/useMessageActions.tsx
+++ b/package/src/components/Message/hooks/useMessageActions.tsx
@@ -9,6 +9,7 @@ import { useUserMuteActive } from './useUserMuteActive';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
@@ -16,22 +17,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks';
-import {
-  BlockUser,
-  Copy,
-  CurveLineLeftUp,
-  Delete,
-  Edit,
-  MessageFlag,
-  Mute,
-  Pin,
-  Resend,
-  Sound,
-  ThreadReply,
-  Unpin,
-  UnreadIndicator,
-  UserDelete,
-} from '../../../icons';
 
 import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
@@ -105,6 +90,7 @@ export const useMessageActions = ({
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const {
     handleCopyMessage,
     handleDeleteMessage,
@@ -288,7 +274,7 @@ export const useMessageActions = ({
     const banUser: MessageActionType = {
       action: onBanUser,
       actionType: 'banUser',
-      icon: <UserDelete width={20} height={20} stroke={semantics.accentError} />,
+      icon: <icons.UserDelete width={20} height={20} stroke={semantics.accentError} />,
       title: message.user?.banned ? t('Unban User') : t('Ban User'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
@@ -297,7 +283,7 @@ export const useMessageActions = ({
     const copyMessage: MessageActionType = {
       action: onCopyMessage,
       actionType: 'copyMessage',
-      icon: <Copy width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.Copy width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Copy Message'),
       type: 'standard',
     };
@@ -305,7 +291,7 @@ export const useMessageActions = ({
     const deleteMessage: MessageActionType = {
       action: onDeleteMessage,
       actionType: 'deleteMessage',
-      icon: <Delete stroke={semantics.accentError} width={20} height={20} />,
+      icon: <icons.Delete stroke={semantics.accentError} width={20} height={20} />,
       title: t('Delete Message'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
@@ -314,7 +300,7 @@ export const useMessageActions = ({
     const deleteForMeMessage: MessageActionType = {
       action: onDeleteForMeMessage,
       actionType: 'deleteForMeMessage',
-      icon: <Delete stroke={semantics.accentError} width={20} height={20} />,
+      icon: <icons.Delete stroke={semantics.accentError} width={20} height={20} />,
       title: t('Delete for me'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
@@ -323,7 +309,7 @@ export const useMessageActions = ({
     const editMessage: MessageActionType = {
       action: onEditMessage,
       actionType: 'editMessage',
-      icon: <Edit width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.Edit width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Edit Message'),
       type: 'standard',
     };
@@ -331,7 +317,7 @@ export const useMessageActions = ({
     const flagMessage: MessageActionType = {
       action: onFlagMessage,
       actionType: 'flagMessage',
-      icon: <MessageFlag width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.MessageFlag width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Flag Message'),
       type: 'standard',
     };
@@ -339,7 +325,7 @@ export const useMessageActions = ({
     const markUnread: MessageActionType = {
       action: onMarkUnread,
       actionType: 'markUnread',
-      icon: <UnreadIndicator width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.UnreadIndicator width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Mark as Unread'),
       type: 'standard',
     };
@@ -347,7 +333,7 @@ export const useMessageActions = ({
     const pinMessage: MessageActionType = {
       action: onTogglePinMessage,
       actionType: 'pinMessage',
-      icon: <Pin width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.Pin width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Pin to Conversation'),
       type: 'standard',
     };
@@ -355,7 +341,7 @@ export const useMessageActions = ({
     const unpinMessage: MessageActionType = {
       action: onTogglePinMessage,
       actionType: 'unpinMessage',
-      icon: <Unpin width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <icons.Unpin width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Unpin from Conversation'),
       type: 'standard',
     };
@@ -364,9 +350,9 @@ export const useMessageActions = ({
       action: onMuteUser,
       actionType: 'muteUser',
       icon: isMuted ? (
-        <Sound height={20} stroke={semantics.textSecondary} width={20} />
+        <icons.Sound height={20} stroke={semantics.textSecondary} width={20} />
       ) : (
-        <Mute fill={semantics.textSecondary} height={20} width={20} />
+        <icons.Mute fill={semantics.textSecondary} height={20} width={20} />
       ),
       title: isMuted ? t('Unmute User') : t('Mute User'),
       type: 'standard',
@@ -375,7 +361,7 @@ export const useMessageActions = ({
     const quotedReply: MessageActionType = {
       action: onQuotedReply,
       actionType: 'quotedReply',
-      icon: <CurveLineLeftUp stroke={semantics.textSecondary} height={20} width={20} />,
+      icon: <icons.CurveLineLeftUp stroke={semantics.textSecondary} height={20} width={20} />,
       title: t('Reply'),
       type: 'standard',
     };
@@ -383,7 +369,7 @@ export const useMessageActions = ({
     const retry: MessageActionType = {
       action: onRetry,
       actionType: 'retry',
-      icon: <Resend stroke={semantics.textSecondary} height={20} width={20} />,
+      icon: <icons.Resend stroke={semantics.textSecondary} height={20} width={20} />,
       title: t('Resend'),
       type: 'standard',
     };
@@ -391,7 +377,7 @@ export const useMessageActions = ({
     const threadReply: MessageActionType = {
       action: onThreadReply,
       actionType: 'threadReply',
-      icon: <ThreadReply stroke={semantics.textSecondary} height={20} width={20} />,
+      icon: <icons.ThreadReply stroke={semantics.textSecondary} height={20} width={20} />,
       title: t('Thread Reply'),
       type: 'standard',
     };
@@ -399,7 +385,7 @@ export const useMessageActions = ({
     const blockUser: MessageActionType = {
       action: onBlockUser,
       actionType: 'blockUser',
-      icon: <BlockUser stroke={semantics.accentError} height={20} width={20} />,
+      icon: <icons.BlockUser stroke={semantics.accentError} height={20} width={20} />,
       title: isBlocked ? t('Unblock User') : t('Block User'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
@@ -424,6 +410,7 @@ export const useMessageActions = ({
     };
   }, [
     error,
+    icons,
     isBlocked,
     isMuted,
     message,
diff --git a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
index c0aaeaaa66..f2bd806ad2 100644
--- a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
+++ b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
@@ -9,6 +9,7 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
@@ -17,7 +18,6 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Check } from '../../icons';
 import { primitives } from '../../theme';
 
 const stateSelector = (state: MessageComposerState) => ({
@@ -34,6 +34,7 @@ export const ShowThreadMessageInChannelButtonWithContext = (
   props: ShowThreadMessageInChannelButtonWithContextProps,
 ) => {
   const styles = useStyles();
+  const { icons } = useComponentsContext();
   const { allowThreadMessagesInChannel, t, threadList } = props;
   const messageComposer = useMessageComposer();
   const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
@@ -83,7 +84,12 @@ export const ShowThreadMessageInChannelButtonWithContext = (
             ]}
           >
             {showReplyInChannel && (
-              <Check width={16} height={16} stroke={semantics.controlRadioCheckIcon} {...check} />
+              <icons.Check
+                width={16}
+                height={16}
+                stroke={semantics.controlRadioCheckIcon}
+                {...check}
+              />
             )}
           </View>
           <Text style={[styles.text, text]}>{t('Also send to channel')}</Text>
diff --git a/package/src/components/MessageInput/StopMessageStreamingButton.tsx b/package/src/components/MessageInput/StopMessageStreamingButton.tsx
index 7a7261669d..74d349116f 100644
--- a/package/src/components/MessageInput/StopMessageStreamingButton.tsx
+++ b/package/src/components/MessageInput/StopMessageStreamingButton.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Stop } from '../../icons';
 import { primitives } from '../../theme';
 
 export type StopMessageStreamingButtonProps = {
@@ -13,6 +13,7 @@ export type StopMessageStreamingButtonProps = {
 export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProps) => {
   const { onPress } = props;
 
+  const { icons } = useComponentsContext();
   const {
     theme: {
       semantics,
@@ -28,7 +29,7 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
       style={[styles.stopStreamingButton, stopMessageStreamingButton]}
       testID='more-options-button'
     >
-      <Stop fill={semantics.accentPrimary} size={24} {...stopMessageStreamingIcon} />
+      <icons.Stop fill={semantics.accentPrimary} size={24} {...stopMessageStreamingIcon} />
     </Pressable>
   );
 };
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
index 85951d23b1..c37f4b5740 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
@@ -3,8 +3,8 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
 import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
 type AttachmentRemoveControlProps = PressableProps & {
@@ -18,6 +18,7 @@ export const AttachmentRemoveControl = ({
   onPress,
   ...rest
 }: AttachmentRemoveControlProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       semantics,
@@ -48,7 +49,7 @@ export const AttachmentRemoveControl = ({
       testID='remove-upload-preview'
       {...rest}
     >
-      <NewClose
+      <icons.NewClose
         height={16}
         stroke={dismissIconColor || semantics.controlRemoveControlIcon}
         {...dismissIcon}
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
index c42939150a..2b091f141d 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
@@ -7,8 +7,6 @@ import { AttachmentFileUploadProgressIndicator } from '../../../../components/At
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
-import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 
@@ -44,6 +42,7 @@ export type FileUploadRetryIndicatorProps = {
 };
 
 export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       semantics,
@@ -59,7 +58,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr
       testID='inline-retry-indicator'
     >
       <View style={[styles.networkErrorContainer, fileUploadRetryIndicator.networkErrorContainer]}>
-        <Warning
+        <icons.Warning
           height={16}
           fill={semantics.accentError}
           testID='retry-upload-progress-indicator'
@@ -91,6 +90,7 @@ export type FileUploadNotSupportedIndicatorProps = {
 export const FileUploadNotSupportedIndicator = ({
   localMetadata,
 }: FileUploadNotSupportedIndicatorProps) => {
+  const { icons } = useComponentsContext();
   const styles = useFileUploadNotSupportedStyles();
   const {
     theme: {
@@ -108,7 +108,7 @@ export const FileUploadNotSupportedIndicator = ({
       style={[styles.container, fileUploadNotSupportedIndicator.container]}
       testID='inline-not-supported-indicator'
     >
-      <ExclamationCircle height={16} width={16} fill={semantics.accentError} />
+      <icons.ExclamationCircle height={16} width={16} fill={semantics.accentError} />
       <Text style={[styles.notSupportedText, fileUploadNotSupportedIndicator.notSupportedText]}>
         {message}
       </Text>
@@ -138,6 +138,7 @@ export const ImageUploadRetryIndicator = ({ onRetryHandler }: ImageUploadRetryIn
 };
 
 export const ImageUploadNotSupportedIndicator = () => {
+  const { icons } = useComponentsContext();
   const styles = useImageUploadNotSupportedIndicatorStyles();
   const {
     theme: {
@@ -150,7 +151,7 @@ export const ImageUploadNotSupportedIndicator = () => {
       style={[styles.container, imageUploadNotSupportedIndicator.container]}
       testID='inline-not-supported-indicator'
     >
-      <ExclamationCircle height={20} width={20} fill={semantics.accentError} />
+      <icons.ExclamationCircle height={20} width={20} fill={semantics.accentError} />
     </View>
   );
 };
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
index 1fb06388a4..f6b835b044 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
@@ -8,8 +8,8 @@ import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview';
 
 import { useMessageInputContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
 import { formatMsToMinSec, getDurationLabelFromDuration } from '../../../../utils/utils';
@@ -63,6 +63,7 @@ export const VideoAttachmentMetadataPill = ({
   format?: 'descriptive' | 'timer';
 }) => {
   const styles = useStyles();
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -81,7 +82,7 @@ export const VideoAttachmentMetadataPill = ({
 
   return durationLabel ? (
     <View style={styles.durationContainer}>
-      <Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
+      <icons.Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
       <Text style={styles.durationText}>{durationLabel}</Text>
     </View>
   ) : null;
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
index 9701993559..4f70894d68 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
@@ -6,6 +6,7 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 import dayjs from 'dayjs';
 
 import { Button } from '../../../../components/ui';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -14,12 +15,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Tick } from '../../../../icons/checkmark';
-import { ChevronLeft } from '../../../../icons/chevron-left';
-import { Delete } from '../../../../icons/delete';
-import { Stop } from '../../../../icons/stop-fill';
 import { IconProps } from '../../../../icons/utils/base';
-import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -45,6 +41,7 @@ const StopRecording = ({
 }: {
   stopVoiceRecordingHandler: () => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -54,8 +51,8 @@ const StopRecording = ({
   };
 
   const StopIcon = useCallback(
-    (props: IconProps) => <Stop {...props} fill={semantics.buttonDestructiveBg} />,
-    [semantics.buttonDestructiveBg],
+    (props: IconProps) => <icons.Stop {...props} fill={semantics.buttonDestructiveBg} />,
+    [icons, semantics.buttonDestructiveBg],
   );
 
   return (
@@ -78,6 +75,7 @@ const UploadRecording = ({
   audioRecordingSendOnComplete: boolean;
   uploadVoiceRecordingHandler: (sendOnComplete: boolean) => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const onUploadVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
     uploadVoiceRecordingHandler(audioRecordingSendOnComplete);
@@ -89,7 +87,7 @@ const UploadRecording = ({
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
-      LeadingIcon={Tick}
+      LeadingIcon={icons.Tick}
       iconOnly
       size='sm'
     />
@@ -101,6 +99,7 @@ const DeleteRecording = ({
 }: {
   deleteVoiceRecordingHandler: () => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const onDeleteVoiceRecording = async () => {
@@ -120,7 +119,7 @@ const DeleteRecording = ({
       size='sm'
       iconOnly
       onPress={onDeleteVoiceRecording}
-      LeadingIcon={Delete}
+      LeadingIcon={icons.Delete}
     />
   );
 };
@@ -136,6 +135,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
     status,
     duration,
   } = props;
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const recordingStopped = status === 'stopped';
@@ -176,7 +176,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
     return (
       <>
         <View style={[styles.micContainer, micContainer]} testID='recording-active-container'>
-          <Mic height={20} width={20} stroke={semantics.accentError} {...micIcon} />
+          <icons.Mic height={20} width={20} stroke={semantics.accentError} {...micIcon} />
           <Text style={[styles.durationLabel]}>
             {duration ? dayjs.duration(duration).format('mm:ss') : '00:00'}
           </Text>
@@ -187,7 +187,12 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           <Text style={[styles.slideToCancel, { color: semantics.textPrimary }]}>
             {t('Slide to Cancel')}
           </Text>
-          <ChevronLeft stroke={semantics.textTertiary} height={20} width={20} {...arrowLeftIcon} />
+          <icons.ChevronLeft
+            stroke={semantics.textTertiary}
+            height={20}
+            width={20}
+            {...arrowLeftIcon}
+          />
         </Animated.View>
       </>
     );
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
index e4e243edd6..1f404f3366 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
@@ -12,6 +12,7 @@ import Animated, {
 
 import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -20,7 +21,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -79,6 +79,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     status,
     recording,
   } = props;
+  const { icons } = useComponentsContext();
   const { micPositionX, micPositionY } = useMicPositionContext();
   const activeAudioPlayer = useActiveAudioPlayer();
   const scale = useSharedValue(1);
@@ -260,7 +261,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
         accessible
         style={[styles.container, animatedStyle, micButtonContainer]}
       >
-        <Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
+        <icons.Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
       </Animated.View>
     </GestureDetector>
   );
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
index de0e9f667c..1f7781c678 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
@@ -10,7 +10,6 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/voice';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 
@@ -27,7 +26,7 @@ type AudioRecordingInProgressPropsWithContext = Pick<
 
 const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressPropsWithContext) => {
   const { maxDataPointsDrawn = 60, duration, waveformData } = props;
-  const { AudioRecordingWaveform } = useComponentsContext();
+  const { AudioRecordingWaveform, icons } = useComponentsContext();
 
   const styles = useStyles();
 
@@ -44,7 +43,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
     <View style={[styles.container, container]}>
       {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
       <View style={styles.micContainer}>
-        <Mic height={20} width={20} stroke={semantics.accentError} />
+        <icons.Mic height={20} width={20} stroke={semantics.accentError} />
         <Text style={[styles.durationText, durationText]}>
           {duration ? dayjs.duration(duration).format('mm:ss') : null}
         </Text>
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
index 015cdce5fa..ad633918a9 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
@@ -3,10 +3,8 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import Animated, { type AnimatedStyle, LinearTransition } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronUp } from '../../../../icons/chevron-up';
-import { Lock } from '../../../../icons/lock';
-import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 
@@ -31,6 +29,7 @@ export const AudioRecordingLockIndicator = ({
 }: AudioRecordingLockIndicatorProps) => {
   const [visible, setVisible] = useState(true);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   useEffect(() => {
@@ -64,12 +63,12 @@ export const AudioRecordingLockIndicator = ({
       style={[styles.container, style, { bottom: messageInputHeight }, container]}
     >
       {micLocked ? (
-        <Lock stroke={semantics.accentPrimary} height={20} width={20} />
+        <icons.Lock stroke={semantics.accentPrimary} height={20} width={20} />
       ) : (
-        <Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
+        <icons.Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
       )}
       {!micLocked && (
-        <ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
+        <icons.ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
       )}
     </Animated.View>
   );
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
index ae0fc18fb6..4ed6f2d978 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
@@ -3,14 +3,13 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Pause } from '../../../../icons/pause-fill';
-import { Play } from '../../../../icons/play-fill';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -48,6 +47,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
  */
 export const AudioRecordingPreview = () => {
   const { audioRecorderManager } = useMessageInputContext();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   const {
@@ -122,9 +122,9 @@ export const AudioRecordingPreview = () => {
       <View style={[styles.infoContainer, infoContainer]}>
         <Pressable onPress={handlePlayPause} hitSlop={15}>
           {!isPlaying ? (
-            <Play fill={semantics.textPrimary} height={20} width={20} {...playIcon} />
+            <icons.Play fill={semantics.textPrimary} height={20} width={20} {...playIcon} />
           ) : (
-            <Pause fill={semantics.textPrimary} height={20} width={20} {...pauseIcon} />
+            <icons.Pause fill={semantics.textPrimary} height={20} width={20} {...pauseIcon} />
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
diff --git a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
index 59fe362ab8..d9f1d3c5a8 100644
--- a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
+++ b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
@@ -5,13 +5,13 @@ import {
   AttachmentPickerContextValue,
   useAttachmentPickerContext,
 } from '../../../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
 import { useAttachmentPickerState } from '../../../../hooks/useAttachmentPickerState';
-import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &
@@ -23,6 +23,7 @@ type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttach
   } & { toggleAttachmentPicker: () => void };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
+  const { icons } = useComponentsContext();
   const {
     disabled = false,
     handleAttachButtonPress,
@@ -55,7 +56,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
       type='outline'
       size='lg'
       iconOnly
-      LeadingIcon={Plus}
+      LeadingIcon={icons.Plus}
       onPress={onPressHandler}
       disabled={disabled}
       testID='attach-button'
diff --git a/package/src/components/MessageInput/components/LinkPreviewList.tsx b/package/src/components/MessageInput/components/LinkPreviewList.tsx
index a4e9bed9de..b5e335b60a 100644
--- a/package/src/components/MessageInput/components/LinkPreviewList.tsx
+++ b/package/src/components/MessageInput/components/LinkPreviewList.tsx
@@ -11,7 +11,6 @@ import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveCon
 
 import { useMessageComposer, useTheme } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
-import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
 
@@ -39,7 +38,7 @@ type LinkPreviewProps = {
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const styles = useStyles();
-  const { ImageComponent } = useComponentsContext();
+  const { icons, ImageComponent } = useComponentsContext();
   const { linkPreviewsManager } = useMessageComposer();
   const { image_url, thumb_url, title, text, og_scrape_url } = linkPreview;
 
@@ -74,7 +73,7 @@ export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
           ) : null}
           {og_scrape_url ? (
             <View style={styles.linkContainer}>
-              <Link
+              <icons.Link
                 height={styles.text.fontSize}
                 stroke={styles.text.color}
                 width={styles.text.fontSize}
diff --git a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
index fcded0bacd..f77334fe6f 100644
--- a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
@@ -14,6 +14,7 @@ export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
 
 export const EditButton = (props: EditButtonProps) => {
   const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { icons } = useComponentsContext();
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
@@ -29,7 +30,7 @@ export const EditButton = (props: EditButtonProps) => {
       accessibilityLabelKey='a11y/Save edited message'
       variant='primary'
       type='solid'
-      LeadingIcon={Tick}
+      LeadingIcon={icons.Tick}
       iconOnly
       onPress={onPressHandler}
       size='sm'
diff --git a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
index 968191bbe2..151b6e9dc0 100644
--- a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
@@ -14,6 +14,7 @@ export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
 
 export const SendButton = (props: SendButtonProps) => {
   const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { icons } = useComponentsContext();
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
@@ -30,7 +31,7 @@ export const SendButton = (props: SendButtonProps) => {
       variant='primary'
       type='solid'
       disabled={disabled}
-      LeadingIcon={SendRight}
+      LeadingIcon={icons.SendRight}
       onPress={onPressHandler}
       size='sm'
       testID='send-button'
diff --git a/package/src/components/MessageList/ScrollToBottomButton.tsx b/package/src/components/MessageList/ScrollToBottomButton.tsx
index 40e89d862d..e31f92c34d 100644
--- a/package/src/components/MessageList/ScrollToBottomButton.tsx
+++ b/package/src/components/MessageList/ScrollToBottomButton.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';
@@ -26,6 +26,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabelParams = React.useMemo(
     () => (unreadCount ? { count: unreadCount } : undefined),
     [unreadCount],
@@ -58,7 +59,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
           accessibilityLabelParams={accessibilityLabelParams}
           variant='secondary'
           type='outline'
-          LeadingIcon={Down}
+          LeadingIcon={icons.Down}
           onPress={onPress}
           size='md'
           testID='scroll-to-bottom-button'
diff --git a/package/src/components/MessageList/UnreadMessagesNotification.tsx b/package/src/components/MessageList/UnreadMessagesNotification.tsx
index a43555f71c..73e6575d54 100644
--- a/package/src/components/MessageList/UnreadMessagesNotification.tsx
+++ b/package/src/components/MessageList/UnreadMessagesNotification.tsx
@@ -5,11 +5,10 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { ArrowUp } from '../../icons/arrow-up';
-import { NewClose } from '../../icons/xmark';
 import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';
@@ -39,6 +38,7 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
 export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProps) => {
   const { onCloseHandler, onPressHandler, unreadCount, channelUnreadStateStore } = props;
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { loadChannelAtFirstUnreadMessage, markRead, setChannelUnreadState, setTargetedMessage } =
     useChannelContext();
   const { unread_messages } = useStateStore(
@@ -76,7 +76,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
         <Button
           variant='secondary'
           type='ghost'
-          LeadingIcon={ArrowUp}
+          LeadingIcon={icons.ArrowUp}
           label={count ? t('{{count}} unread', { count }) : t('Unread Messages')}
           onPress={handleOnPress}
           size='md'
@@ -88,7 +88,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
           variant='secondary'
           type='ghost'
           iconOnly
-          LeadingIcon={NewClose}
+          LeadingIcon={icons.NewClose}
           onPress={handleClose}
           size='md'
         />
diff --git a/package/src/components/MessageMenu/MessageReactionPicker.tsx b/package/src/components/MessageMenu/MessageReactionPicker.tsx
index bfdc318d1b..5c1d6b4e9d 100644
--- a/package/src/components/MessageMenu/MessageReactionPicker.tsx
+++ b/package/src/components/MessageMenu/MessageReactionPicker.tsx
@@ -6,6 +6,7 @@ import { EmojiPickerList } from './EmojiPickerList';
 import { useMessageOwnReactions } from './hooks/useMessageOwnReactions';
 import { ReactionButton } from './ReactionButton';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import {
   MessagesContextValue,
@@ -15,7 +16,6 @@ import {
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
-import { Plus } from '../../icons/plus';
 import { NativeHandlers } from '../../native';
 import { scheduleActionOnClose } from '../../state-store';
 
@@ -90,6 +90,7 @@ export const EmojiViewerButton = ({
 }) => {
   const styles = useStyles();
   const [emojiViewerOpened, setEmojiViewerOpened] = React.useState<boolean>(false);
+  const { icons } = useComponentsContext();
 
   const {
     theme: {
@@ -120,7 +121,7 @@ export const EmojiViewerButton = ({
           type='outline'
           size='sm'
           iconOnly
-          LeadingIcon={Plus}
+          LeadingIcon={icons.Plus}
           onPress={onOpenEmojiViewer}
           testID='more-reactions-button'
         />
diff --git a/package/src/components/MessageMenu/MessageUserReactions.tsx b/package/src/components/MessageMenu/MessageUserReactions.tsx
index 0a001c9b8e..2d6f6513e3 100644
--- a/package/src/components/MessageMenu/MessageUserReactions.tsx
+++ b/package/src/components/MessageMenu/MessageUserReactions.tsx
@@ -24,7 +24,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
 import { IconProps } from '../../icons';
-import { MoreEmojis } from '../../icons/emoji-add-1';
 import { primitives } from '../../theme';
 import { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
@@ -104,7 +103,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   );
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const { supportedReactions: contextSupportedReactions } = useMessagesContext();
-  const { MessageUserReactionsItem } = useComponentsContext();
+  const { icons, MessageUserReactionsItem } = useComponentsContext();
   const { handleReaction } = useMessageContext();
   const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
 
@@ -226,10 +225,10 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const MoreEmojisIcon = useCallback(
     (props: IconProps) => (
       <View style={styles.showMoreReactionsButton}>
-        <MoreEmojis {...props} />
+        <icons.MoreEmojis {...props} />
       </View>
     ),
-    [styles.showMoreReactionsButton],
+    [icons, styles.showMoreReactionsButton],
   );
 
   const ShowMoreReactionsButton = useCallback(
diff --git a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
index dea19586fc..66fcbbc97a 100644
--- a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
+++ b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
@@ -8,7 +8,6 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
-import { Unknown } from '../../icons';
 
 import { primitives } from '../../theme';
 import type { Reaction } from '../../types/types';
@@ -29,7 +28,7 @@ export const MessageUserReactionsItem = ({
   reaction,
   supportedReactions,
 }: MessageUserReactionsItemProps) => {
-  const { MessageUserReactionsAvatar } = useComponentsContext();
+  const { icons, MessageUserReactionsAvatar } = useComponentsContext();
   const { id, name, type } = reaction;
   const {
     theme: {
@@ -52,7 +51,7 @@ export const MessageUserReactionsItem = ({
     }
   });
 
-  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? Unknown;
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? icons.Unknown;
 
   return (
     <Pressable
diff --git a/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx
index 4074f877fb..19a1582676 100644
--- a/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx
+++ b/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx
@@ -11,7 +11,7 @@ import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { MessageUserReactionsItem } from '../MessageUserReactionsItem';
 
-jest.mock('../../../icons', () => ({
+jest.mock('../../../icons/Unknown', () => ({
   Unknown: () => {
     const { Text } = require('react-native');
     return <Text testID='unknown-icon'>unknown</Text>;
diff --git a/package/src/components/Notifications/Notification.tsx b/package/src/components/Notifications/Notification.tsx
index 262d9c35e1..39cdc79245 100644
--- a/package/src/components/Notifications/Notification.tsx
+++ b/package/src/components/Notifications/Notification.tsx
@@ -11,11 +11,7 @@ import { getNotificationDisplayMessage } from './notificationTranslations';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Check } from '../../icons/checkmark';
-import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
-import { Reload } from '../../icons/refresh';
 import { IconProps } from '../../icons/utils/base';
-import { NewClose } from '../../icons/xmark';
 import { primitives } from '../../theme';
 import { Button } from '../ui/Button';
 
@@ -35,23 +31,27 @@ export type NotificationVariant = 'default' | NotificationSeverity;
 export const getNotificationVariant = (notification: NotificationType): NotificationVariant =>
   notification.severity ?? 'default';
 
-const IconsByVariant: Partial<Record<NotificationVariant, ComponentType<IconProps> | null>> = {
-  error: ExclamationCircle,
-  info: null,
-  loading: Reload,
-  success: Check,
-  warning: ExclamationCircle,
-};
-
-const getNotificationIconComponent = (notification: NotificationType) => {
+const getNotificationIconComponent = (
+  notification: NotificationType,
+  icons: ReturnType<typeof useComponentsContext>['icons'],
+) => {
   const variant = getNotificationVariant(notification);
   if (variant === 'default') return undefined;
 
+  const IconsByVariant: Partial<Record<NotificationVariant, ComponentType<IconProps> | null>> = {
+    error: icons.ExclamationCircle,
+    info: null,
+    loading: icons.Reload,
+    success: icons.Check,
+    warning: icons.ExclamationCircle,
+  };
+
   return IconsByVariant[variant] ?? undefined;
 };
 
 export const NotificationIcon = ({ notification }: NotificationIconProps) => {
-  const Icon = getNotificationIconComponent(notification);
+  const { icons } = useComponentsContext();
+  const Icon = getNotificationIconComponent(notification, icons);
   const { iconColor, styles } = useNotificationIconStyles();
   if (!Icon) return null;
 
@@ -84,14 +84,15 @@ export const Notification = ({
   onDismiss,
   showClose = false,
 }: NotificationProps) => {
-  const { NotificationIcon: NotificationIconComponent = NotificationIcon } = useComponentsContext();
+  const { icons, NotificationIcon: NotificationIconComponent = NotificationIcon } =
+    useComponentsContext();
   const { removeNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const displayMessage = getNotificationDisplayMessage({ notification, t });
   const ResolvedIcon = Icon ?? NotificationIconComponent;
   const hasResolvedIcon =
     ResolvedIcon === NotificationIcon
-      ? !!getNotificationIconComponent(notification)
+      ? !!getNotificationIconComponent(notification, icons)
       : !!ResolvedIcon;
   const { closeIconColor, styles } = useNotificationStyles({ hasResolvedIcon });
   const isPersistent = !notification.duration;
@@ -142,7 +143,7 @@ export const Notification = ({
           style={({ pressed }) => (pressed ? styles.closeButtonPressed : styles.closeButton)}
           testID='notification-close-button'
         >
-          <NewClose height={20} stroke={closeIconColor} width={20} />
+          <icons.NewClose height={20} stroke={closeIconColor} width={20} />
         </Pressable>
       ) : null}
     </View>
diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index fe5d31086b..a23f7c7b17 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Check, IconProps } from '../../../icons';
-import { Cross } from '../../../icons/xmark-1';
+import { IconProps } from '../../../icons';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
@@ -27,6 +27,7 @@ export const CreatePollHeader = ({
   onCreatePollPressHandler,
 }: CreatePollHeaderProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
 
   const canCreatePoll = useCanCreatePoll();
 
@@ -44,7 +45,7 @@ export const CreatePollHeader = ({
   const renderSendPollIcon = useCallback(
     (props: IconProps) => {
       return (
-        <Check
+        <icons.Check
           {...props}
           height={18}
           stroke={canCreatePoll ? semantics.textOnAccent : semantics.textDisabled}
@@ -52,7 +53,7 @@ export const CreatePollHeader = ({
         />
       );
     },
-    [canCreatePoll, semantics.textOnAccent, semantics.textDisabled],
+    [canCreatePoll, icons, semantics.textOnAccent, semantics.textDisabled],
   );
 
   return (
@@ -63,7 +64,7 @@ export const CreatePollHeader = ({
         onPress={onBackPressHandler}
         type='outline'
         size='md'
-        LeadingIcon={Cross}
+        LeadingIcon={icons.Cross}
         iconOnly
       />
 
diff --git a/package/src/components/Poll/components/CreatePollOptions.tsx b/package/src/components/Poll/components/CreatePollOptions.tsx
index 8d83891a58..cd36172bc2 100644
--- a/package/src/components/Poll/components/CreatePollOptions.tsx
+++ b/package/src/components/Poll/components/CreatePollOptions.tsx
@@ -25,11 +25,9 @@ import Animated, {
 import { PollComposerOption, PollComposerState } from 'stream-chat';
 
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { InfoTooltip } from '../../../icons/info';
-import { CircleMinus } from '../../../icons/minus-circle';
-import { DotGrid } from '../../../icons/reorder';
 import { primitives } from '../../../theme';
 
 export type CurrentOptionPositionsCache = {
@@ -285,6 +283,7 @@ export const CreatePollOption = ({
   onRemoveOption,
 }: CreatePollOptionType) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { createPollOptionGap = 8 } = useCreatePollContentContext();
   const normalizedCreatePollOptionGap =
     Number.isFinite(createPollOptionGap) && createPollOptionGap > 0 ? createPollOptionGap : 0;
@@ -510,7 +509,7 @@ export const CreatePollOption = ({
       <Animated.View layout={LayoutTransition} style={[styles.optionContent, optionStyle.content]}>
         <GestureDetector gesture={gesture}>
           <Animated.View>
-            <DotGrid height={20} width={20} stroke={semantics.inputTextIcon} />
+            <icons.DotGrid height={20} width={20} stroke={semantics.inputTextIcon} />
           </Animated.View>
         </GestureDetector>
         <TextInput
@@ -521,7 +520,7 @@ export const CreatePollOption = ({
           style={[styles.optionInput, optionStyle.input]}
         />
         <Pressable onPress={onRemoveOptionHandler}>
-          <CircleMinus height={20} width={20} stroke={semantics.inputTextIcon} />
+          <icons.CircleMinus height={20} width={20} stroke={semantics.inputTextIcon} />
         </Pressable>
       </Animated.View>
 
@@ -530,7 +529,7 @@ export const CreatePollOption = ({
           onLayout={onErrorLayoutHandler}
           style={[styles.optionValidationErrorContainer, optionStyle.validationErrorContainer]}
         >
-          <InfoTooltip height={20} width={20} fill={semantics.accentError} />
+          <icons.InfoTooltip height={20} width={20} fill={semantics.accentError} />
           <Text style={[styles.optionValidationError, optionStyle.validationErrorText]}>
             {t(error)}
           </Text>
diff --git a/package/src/components/Poll/components/MultipleVotesSettings.tsx b/package/src/components/Poll/components/MultipleVotesSettings.tsx
index f6eb10cab5..dc7c178714 100644
--- a/package/src/components/Poll/components/MultipleVotesSettings.tsx
+++ b/package/src/components/Poll/components/MultipleVotesSettings.tsx
@@ -6,10 +6,10 @@ import Animated, { LinearTransition, StretchInY, StretchOutY } from 'react-nativ
 import { PollComposerState } from 'stream-chat';
 
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Minus, Plus } from '../../../icons';
 import { primitives } from '../../../theme';
 import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 import { Button } from '../../ui';
@@ -96,6 +96,7 @@ const MaxVotesTextInput = () => {
 export const MultipleVotesSettings = () => {
   const [allowMaxVotesPerPerson, setAllowMaxVotesPerPerson] = useState<boolean>(false);
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { modalStateStore } = useCreatePollContentContext();
   const { isClosing = false } = useStateStore(modalStateStore, modalStateSelector) ?? {};
   const messageComposer = useMessageComposer();
@@ -168,7 +169,7 @@ export const MultipleVotesSettings = () => {
             type='outline'
             size='md'
             iconOnly
-            LeadingIcon={Minus}
+            LeadingIcon={icons.Minus}
             onPress={decrementMaxVotes}
             disabled={decrementDisabled}
             style={decrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}
@@ -181,7 +182,7 @@ export const MultipleVotesSettings = () => {
             type='outline'
             size='md'
             iconOnly
-            LeadingIcon={Plus}
+            LeadingIcon={icons.Plus}
             onPress={incrementMaxVotes}
             disabled={incrementDisabled}
             style={incrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 9bf3a3c455..ed5fd1a91f 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Cross } from '../../../icons/xmark-1';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 
@@ -12,6 +12,7 @@ export type PollModalHeaderProps = {
 };
 
 export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       poll: {
@@ -30,7 +31,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
           type='outline'
           size='md'
           iconOnly
-          LeadingIcon={Cross}
+          LeadingIcon={icons.Cross}
           onPress={onPress}
           testID='poll-results-close-button'
         />
diff --git a/package/src/components/Poll/components/PollOption.tsx b/package/src/components/Poll/components/PollOption.tsx
index b73ab07a13..e47b93c70f 100644
--- a/package/src/components/Poll/components/PollOption.tsx
+++ b/package/src/components/Poll/components/PollOption.tsx
@@ -18,7 +18,6 @@ import {
 } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
-import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
@@ -165,6 +164,7 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
 };
 
 export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
+  const { icons } = useComponentsContext();
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
   const ownCapabilities = useOwnCapabilitiesContext();
@@ -219,7 +219,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         voteButtonContainer,
       ]}
     >
-      {hasVote ? <Check height={20} stroke={semantics.textOnAccent} width={20} /> : null}
+      {hasVote ? <icons.Check height={20} stroke={semantics.textOnAccent} width={20} /> : null}
     </Pressable>
   ) : null;
 };
diff --git a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
index c06b870d34..1a2f82c6d8 100644
--- a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
+++ b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
@@ -4,9 +4,8 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { ThreadManagerState } from 'stream-chat';
 
 import { useChatContext, useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useStateStore } from '../../hooks';
-import { Loading, Reload } from '../../icons';
-import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
 import { primitives } from '../../theme';
 
 const selector = (nextValue: ThreadManagerState) =>
@@ -16,6 +15,7 @@ export const ThreadListUnreadBanner = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: { semantics },
@@ -40,7 +40,7 @@ export const ThreadListUnreadBanner = () => {
   if (loading) {
     return (
       <View style={styles.container}>
-        <Loading height={20} width={20} />
+        <icons.Loading height={20} width={20} />
         <Text style={styles.text}>{t('Loading...')}</Text>
       </View>
     );
@@ -49,7 +49,7 @@ export const ThreadListUnreadBanner = () => {
   if (error) {
     return (
       <View style={styles.container}>
-        <ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />
+        <icons.ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />
         <Text style={styles.text}>{t("Couldn't load new threads. Tap to retry")}</Text>
       </View>
     );
@@ -67,7 +67,7 @@ export const ThreadListUnreadBanner = () => {
         },
       ]}
     >
-      <Reload stroke={semantics.textSecondary} height={20} width={20} />
+      <icons.Reload stroke={semantics.textSecondary} height={20} width={20} />
       <Text style={styles.text}>
         {t('{{count}} new threads', { count: unseenThreadIds.length })}
       </Text>
diff --git a/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx b/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx
index e262ca8063..a2866e2632 100644
--- a/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx
+++ b/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx
@@ -4,10 +4,10 @@ import { StyleSheet, Text, View } from 'react-native';
 import { Channel, LocalMessage } from 'stream-chat';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
-import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 
@@ -21,6 +21,7 @@ export const ThreadMessagePreviewDeliveryStatus = ({
   message,
 }: ThreadMessagePreviewDeliveryStatusProps) => {
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const channelConfigExists = typeof channel?.getConfig === 'function';
   const styles = useStyles();
@@ -71,14 +72,19 @@ export const ThreadMessagePreviewDeliveryStatus = ({
   return (
     <View style={styles.container}>
       {message.status === MessageStatusTypes.SENDING ? (
-        <Time stroke={semantics.chatTextTimestamp} height={20} width={20} {...timeIcon} />
+        <icons.Time stroke={semantics.chatTextTimestamp} height={20} width={20} {...timeIcon} />
       ) : message.status === MessageStatusTypes.RECEIVED &&
         status === MessageDeliveryStatus.READ ? (
-        <CheckAll stroke={semantics.accentPrimary} height={20} width={20} {...checkAllIcon} />
+        <icons.CheckAll stroke={semantics.accentPrimary} height={20} width={20} {...checkAllIcon} />
       ) : status === MessageDeliveryStatus.DELIVERED ? (
-        <CheckAll stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkAllIcon} />
+        <icons.CheckAll
+          stroke={semantics.chatTextTimestamp}
+          height={20}
+          width={20}
+          {...checkAllIcon}
+        />
       ) : status === MessageDeliveryStatus.SENT ? (
-        <Check stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkIcon} />
+        <icons.Check stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkIcon} />
       ) : null}
       <Text style={styles.text}>{t('You')}:</Text>
     </View>
diff --git a/package/src/components/UIComponents/EmptySearchResult.tsx b/package/src/components/UIComponents/EmptySearchResult.tsx
index cc2f3caadc..b83ee9b80f 100644
--- a/package/src/components/UIComponents/EmptySearchResult.tsx
+++ b/package/src/components/UIComponents/EmptySearchResult.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Search } from '../../icons/search';
 import { primitives } from '../../theme';
 
 export type EmptySearchResultProps = {
@@ -10,6 +10,7 @@ export type EmptySearchResultProps = {
 };
 
 export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       emptySearchResult: { container, text },
@@ -19,7 +20,7 @@ export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
 
   return (
     <View style={[styles.container, container]} testID='empty-search-result'>
-      <Search height={24} stroke={semantics.textTertiary} width={24} />
+      <icons.Search height={24} stroke={semantics.textTertiary} width={24} />
       <Text style={[styles.text, { color: semantics.textSecondary }, text]}>{label}</Text>
     </View>
   );
diff --git a/package/src/components/UIComponents/SearchInput.tsx b/package/src/components/UIComponents/SearchInput.tsx
index 9f5bbc69c0..dbe4fe9f01 100644
--- a/package/src/components/UIComponents/SearchInput.tsx
+++ b/package/src/components/UIComponents/SearchInput.tsx
@@ -3,10 +3,9 @@ import { StyleSheet, TextInput, View } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Search } from '../../icons/search';
-import { XCircle } from '../../icons/x-circle';
 import { primitives } from '../../theme';
 import type { IconRenderer } from '../ui/Button/Button';
 import { Input, InputProps } from '../ui/Input/Input';
@@ -15,6 +14,7 @@ export type SearchInputProps = Partial<InputProps>;
 
 export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -37,8 +37,8 @@ export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
   }, [onChangeText]);
 
   const LeadingIcon: IconRenderer = useCallback(
-    () => <Search height={20} stroke={semantics.textSecondary} width={20} />,
-    [semantics.textSecondary],
+    () => <icons.Search height={20} stroke={semantics.textSecondary} width={20} />,
+    [icons, semantics.textSecondary],
   );
 
   const ClearIcon: IconRenderer = useCallback(
@@ -50,10 +50,10 @@ export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
         onPress={handleClear}
         testID='clear-search'
       >
-        <XCircle height={15} stroke={semantics.inputTextIcon} width={15} />
+        <icons.XCircle height={15} stroke={semantics.inputTextIcon} width={15} />
       </Pressable>
     ),
-    [handleClear, semantics.inputTextIcon, t],
+    [handleClear, icons, semantics.inputTextIcon, t],
   );
 
   return (
diff --git a/package/src/components/UIComponents/SelectionCircle.tsx b/package/src/components/UIComponents/SelectionCircle.tsx
index 1fb585201b..41bb36c30f 100644
--- a/package/src/components/UIComponents/SelectionCircle.tsx
+++ b/package/src/components/UIComponents/SelectionCircle.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Checkmark } from '../../icons/checkmark-1';
 import { primitives } from '../../theme';
 
 export type SelectionCircleProps = {
@@ -10,6 +10,7 @@ export type SelectionCircleProps = {
 };
 
 export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       selectionCircle: { circle, circleSelected },
@@ -26,7 +27,7 @@ export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
           circleSelected,
         ]}
       >
-        <Checkmark height={14} pathFill={semantics.textOnAccent} width={14} />
+        <icons.Checkmark height={14} pathFill={semantics.textOnAccent} width={14} />
       </View>
     );
   }
diff --git a/package/src/components/UIComponents/Spinner.tsx b/package/src/components/UIComponents/Spinner.tsx
index 51546e8cc0..a5087d9eb9 100644
--- a/package/src/components/UIComponents/Spinner.tsx
+++ b/package/src/components/UIComponents/Spinner.tsx
@@ -8,8 +8,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Loading } from '../../icons/loading';
 
 export type SpinnerProps = {
   height?: number;
@@ -19,6 +19,7 @@ export type SpinnerProps = {
 
 export const Spinner = (props: SpinnerProps) => {
   const rotation = useSharedValue(0);
+  const { icons } = useComponentsContext();
   const { height, style, width } = props;
 
   const {
@@ -46,7 +47,7 @@ export const Spinner = (props: SpinnerProps) => {
 
   return (
     <Animated.View style={[style, styles.spinner, animatedStyle, spinner, { height, width }]}>
-      <Loading
+      <icons.Loading
         height={height}
         startColor={semantics.accentPrimary}
         stopColor={semantics.accentPrimary}
diff --git a/package/src/components/ui/Avatar/AvatarGroup.tsx b/package/src/components/ui/Avatar/AvatarGroup.tsx
index aae521f752..d561cb4683 100644
--- a/package/src/components/ui/Avatar/AvatarGroup.tsx
+++ b/package/src/components/ui/Avatar/AvatarGroup.tsx
@@ -9,8 +9,8 @@ import { iconSizes } from './constants';
 
 import { UserAvatar, UserAvatarProps } from './UserAvatar';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/users';
 import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge';
 
 export type AvatarGroupProps = {
@@ -84,6 +84,7 @@ const badgeCountSize: Record<AvatarGroupProps['size'], BadgeCountProps['size']>
 
 export const AvatarGroup = (props: AvatarGroupProps) => {
   const { size, items = [] } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -99,7 +100,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
           backgroundColor={semantics.avatarBgPlaceholder}
           showBorder={true}
           placeholder={
-            <PeopleIcon
+            <icons.PeopleIcon
               stroke={semantics.avatarTextPlaceholder}
               height={iconSizes[avatarSize[size]]}
               width={iconSizes[avatarSize[size]]}
@@ -109,7 +110,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
         />,
       ]);
     },
-    [avatarGroupStyles.userAvatarWrapper, semantics, size],
+    [avatarGroupStyles.userAvatarWrapper, icons, semantics, size],
   );
 
   const buildForMore = useCallback(
diff --git a/package/src/components/ui/Avatar/UserAvatar.tsx b/package/src/components/ui/Avatar/UserAvatar.tsx
index c7265c0f49..65c93ef94a 100644
--- a/package/src/components/ui/Avatar/UserAvatar.tsx
+++ b/package/src/components/ui/Avatar/UserAvatar.tsx
@@ -13,8 +13,8 @@ import {
   numberOfInitials,
 } from './constants';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/users';
 import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils';
 import { OnlineIndicator } from '../Badge';
 
@@ -28,6 +28,7 @@ export type UserAvatarProps = {
 
 export const UserAvatar = (props: UserAvatarProps) => {
   const { user, size, showBorder = !!user.image, showOnlineIndicator, style } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -46,10 +47,14 @@ export const UserAvatar = (props: UserAvatarProps) => {
       );
     } else {
       return (
-        <PeopleIcon height={iconSizes[size]} stroke={avatarTextColor} width={iconSizes[size]} />
+        <icons.PeopleIcon
+          height={iconSizes[size]}
+          stroke={avatarTextColor}
+          width={iconSizes[size]}
+        />
       );
     }
-  }, [user?.name, size, avatarTextColor]);
+  }, [user?.name, size, avatarTextColor, icons]);
 
   return (
     <View testID='user-avatar'>
diff --git a/package/src/components/ui/Badge/ErrorBadge.tsx b/package/src/components/ui/Badge/ErrorBadge.tsx
index 02de2a4fa0..4858e0e168 100644
--- a/package/src/components/ui/Badge/ErrorBadge.tsx
+++ b/package/src/components/ui/Badge/ErrorBadge.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Exclamation } from '../../../icons/exclamation-mark-fill';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -37,13 +37,14 @@ export type ErrorBadgeProps = ViewProps & {
 
 export const ErrorBadge = (props: ErrorBadgeProps) => {
   const { size = 'md', style, ...rest } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <Exclamation
+      <icons.Exclamation
         height={sizes[size].height}
         width={sizes[size].width}
         fill={semantics.textOnAccent}
diff --git a/package/src/components/ui/Badge/GiphyBadge.tsx b/package/src/components/ui/Badge/GiphyBadge.tsx
index 7cca100bd2..21423e158f 100644
--- a/package/src/components/ui/Badge/GiphyBadge.tsx
+++ b/package/src/components/ui/Badge/GiphyBadge.tsx
@@ -1,15 +1,16 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Giphy } from '../../../icons/giphy';
 import { primitives } from '../../../theme';
 
 export const GiphyBadge = () => {
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <View style={styles.container}>
-      <Giphy height={12} width={12} />
+      <icons.Giphy height={12} width={12} />
       <Text style={styles.text}>GIPHY</Text>
     </View>
   );
diff --git a/package/src/components/ui/Badge/ImgurBadge.tsx b/package/src/components/ui/Badge/ImgurBadge.tsx
index 0ae5477b3e..06cb855acf 100644
--- a/package/src/components/ui/Badge/ImgurBadge.tsx
+++ b/package/src/components/ui/Badge/ImgurBadge.tsx
@@ -1,15 +1,16 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Imgur } from '../../../icons/imgur';
 import { primitives } from '../../../theme';
 
 export const ImgurBadge = () => {
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <View style={styles.container}>
-      <Imgur height={12} width={12} />
+      <icons.Imgur height={12} width={12} />
       <Text style={styles.text}>IMGUR</Text>
     </View>
   );
diff --git a/package/src/components/ui/Badge/RetryBadge.tsx b/package/src/components/ui/Badge/RetryBadge.tsx
index 49e7d228b8..3f8374a58c 100644
--- a/package/src/components/ui/Badge/RetryBadge.tsx
+++ b/package/src/components/ui/Badge/RetryBadge.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Reload } from '../../../icons/refresh';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -44,13 +44,14 @@ export type RetryBadgeProps = ViewProps & {
 
 export const RetryBadge = (props: RetryBadgeProps) => {
   const { size = 'md', style, ...rest } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <Reload
+      <icons.Reload
         height={iconSizes[size].height}
         width={iconSizes[size].width}
         stroke={semantics.textOnAccent}
diff --git a/package/src/components/ui/GiphyChip.tsx b/package/src/components/ui/GiphyChip.tsx
index a341111cd9..63eae2cd0c 100644
--- a/package/src/components/ui/GiphyChip.tsx
+++ b/package/src/components/ui/GiphyChip.tsx
@@ -3,11 +3,10 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 
 import { TextComposerState } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Lightning } from '../../icons/bolt';
-import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -15,6 +14,7 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const GiphyChip = () => {
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
+      <icons.Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
+        <icons.Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );
diff --git a/package/src/components/ui/Input/Input.tsx b/package/src/components/ui/Input/Input.tsx
index 5b74f66fd6..9ea14177c6 100644
--- a/package/src/components/ui/Input/Input.tsx
+++ b/package/src/components/ui/Input/Input.tsx
@@ -14,8 +14,7 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/checkmark-1';
-import { InfoTooltip } from '../../../icons/info';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -73,6 +72,7 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
   ref,
 ) {
   const [isFocused, setIsFocused] = useState(false);
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -162,9 +162,9 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
       {helperText ? (
         <View style={styles.helperContainer}>
           {state === 'success' ? (
-            <Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
+            <icons.Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
           ) : (
-            <InfoTooltip
+            <icons.InfoTooltip
               height={20}
               width={20}
               fill={state === 'error' ? semantics.accentError : semantics.textTertiary}
diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx
index da8258d598..6c1a67e215 100644
--- a/package/src/components/ui/VideoPlayIndicator.tsx
+++ b/package/src/components/ui/VideoPlayIndicator.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {
@@ -32,6 +32,7 @@ export type VideoPlayIndicatorProps = {
 
 export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
   const { size = 'md' } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -39,7 +40,7 @@ export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
 
   return (
     <View style={[styles.container, sizes[size]]}>
-      <Play
+      <icons.Play
         fill={semantics.controlPlayButtonIcon}
         height={iconSizes[size]}
         width={iconSizes[size]}
diff --git a/package/src/contexts/componentsContext/ComponentsContext.tsx b/package/src/contexts/componentsContext/ComponentsContext.tsx
index 33581f446e..9b1e69be13 100644
--- a/package/src/contexts/componentsContext/ComponentsContext.tsx
+++ b/package/src/contexts/componentsContext/ComponentsContext.tsx
@@ -6,11 +6,27 @@ import React, { PropsWithChildren, useContext, useMemo } from 'react';
  * Adding a new default automatically makes it available as an override.
  *
  * Every key is optional — only specify the components you want to override.
+ *
+ * The `icons` slot is a nested map: it is typed as a *partial* icon map so
+ * integrators can override individual icons without having to supply them all.
+ * Sibling defaults are preserved via a deep merge (see below).
  */
-export type ComponentOverrides = Partial<
-  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+export type ComponentOverrides = Omit<
+  Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>,
+  'icons'
 > &
-  import('./defaultComponents').OptionalComponentOverrides;
+  import('./defaultComponents').OptionalComponentOverrides & {
+    icons?: Partial<import('./defaultComponents').IconsMap>;
+  };
+
+/**
+ * Resolved component overrides with defaults filled in. Unlike
+ * `ComponentOverrides`, the `icons` map is guaranteed fully populated (defaults
+ * back every key), so consumers can read `icons.Mute` without a null check.
+ */
+export type ResolvedComponents = Required<Omit<ComponentOverrides, 'icons'>> & {
+  icons: import('./defaultComponents').IconsMap;
+};
 
 const ComponentsContext = React.createContext<ComponentOverrides>({});
 
@@ -33,8 +49,17 @@ export const WithComponents = ({
   overrides,
 }: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
   const parent = useContext(ComponentsContext);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  const merged = useMemo(
+    () => ({
+      ...parent,
+      ...overrides,
+      // Deep-merge the nested `icons` map so overriding one icon keeps the
+      // rest (a shallow spread would replace the whole map).
+      icons: { ...parent.icons, ...overrides.icons },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
   return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
 };
 
@@ -55,9 +80,14 @@ const getDefaults = (): ComponentOverrides => {
  */
 export const useComponentsContext = () => {
   const overrides = useContext(ComponentsContext);
-  return useMemo(
-    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+  return useMemo(() => {
+    const defaults = getDefaults();
+    return {
+      ...defaults,
+      ...overrides,
+      // Deep-merge icons so user overrides layer over the full default map.
+      icons: { ...defaults.icons, ...overrides.icons },
+    } as ResolvedComponents;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-    [],
-  );
+  }, []);
 };
diff --git a/package/src/contexts/componentsContext/defaultComponents.ts b/package/src/contexts/componentsContext/defaultComponents.ts
index b0aabf2bd6..2ac7a93a43 100644
--- a/package/src/contexts/componentsContext/defaultComponents.ts
+++ b/package/src/contexts/componentsContext/defaultComponents.ts
@@ -186,6 +186,90 @@ import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
 import { SvgAwareImage } from '../../components/UIComponents/SvgAwareImage';
 import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 import type { MessageActionsProps } from '../../contexts/overlayContext/MessageOverlayHostLayer';
+import { ArrowUp, Down } from '../../icons/arrow-up';
+import { ArrowUpRight } from '../../icons/arrow-up-right';
+import { Sound } from '../../icons/audio';
+import { Bell } from '../../icons/bell';
+import { Lightning } from '../../icons/bolt';
+import { Camera } from '../../icons/camera';
+import { Check, Tick } from '../../icons/checkmark';
+import { Checkmark } from '../../icons/checkmark-1';
+import { CheckAll } from '../../icons/checks';
+import { ChevronLeft } from '../../icons/chevron-left';
+import { ChevronRight } from '../../icons/chevron-right';
+import { ChevronUp } from '../../icons/chevron-up';
+import { Time } from '../../icons/clock';
+import { CommandsIcon } from '../../icons/command';
+import { Copy } from '../../icons/copy';
+import { Delete } from '../../icons/delete';
+import { Edit } from '../../icons/edit';
+import { Smile } from '../../icons/emoji';
+import { MoreEmojis } from '../../icons/emoji-add-1';
+import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
+import { Exclamation } from '../../icons/exclamation-mark-fill';
+import { Warning } from '../../icons/exclamation-triangle-fill';
+import { EyeOpen } from '../../icons/EyeOpen';
+import { File, FilePickerIcon } from '../../icons/file';
+import { Audio } from '../../icons/filetype-audio-xl';
+import { Code } from '../../icons/filetype-code-xl';
+import { ZIP } from '../../icons/filetype-compression-xl';
+import { OtherFileIcon } from '../../icons/filetype-other-xl';
+import { PDF } from '../../icons/filetype-pdf-xl';
+import { Presentation } from '../../icons/filetype-presentation-xl';
+import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
+import { DOC } from '../../icons/filetype-text-xl';
+import { Video } from '../../icons/filetype-video-xl';
+import { Flag, MessageFlag } from '../../icons/flag';
+import { Folder } from '../../icons/folder';
+import { ImageGrid } from '../../icons/gallery';
+import { Giphy as GiphyFiletypeIcon, GiphyIcon } from '../../icons/giphy';
+import { PhotoIcon, Picture } from '../../icons/image';
+import { Imgur } from '../../icons/imgur';
+import { InfoTooltip } from '../../icons/info';
+import { ArrowBoxLeft } from '../../icons/leave';
+import { Link } from '../../icons/link';
+import { Loading } from '../../icons/loading';
+import { MapPin } from '../../icons/location';
+import { Lock } from '../../icons/lock';
+import { Megaphone } from '../../icons/megaphone';
+import { MessageBubbleEmpty } from '../../icons/message-bubble';
+import { Minus } from '../../icons/minus';
+import { CircleMinus } from '../../icons/minus-circle';
+import { MenuPointHorizontal } from '../../icons/more';
+import { Mute } from '../../icons/mute';
+import { BlockUser, CircleBan } from '../../icons/no-sign';
+import { UnreadIndicator } from '../../icons/notification';
+import { Pause } from '../../icons/pause-fill';
+import { Pin } from '../../icons/pin';
+import { Play } from '../../icons/play-fill';
+import { Plus } from '../../icons/plus';
+import { PollIcon, PollThumbnail } from '../../icons/poll';
+import { Reload } from '../../icons/refresh';
+import { DotGrid } from '../../icons/reorder';
+import { ArrowShareLeft, CurveLineLeftUp } from '../../icons/reply';
+import { ReplyConnectorLeft } from '../../icons/ReplyConnectorLeft';
+import { ReplyConnectorRight } from '../../icons/ReplyConnectorRight';
+import { Resend } from '../../icons/Retry';
+import { Bookmark } from '../../icons/save';
+import { Search } from '../../icons/search';
+import { SendRight } from '../../icons/send';
+import { Share } from '../../icons/share';
+import { Shield } from '../../icons/shield';
+import { Stop } from '../../icons/stop-fill';
+import { ThreadReply } from '../../icons/thread';
+import { Unknown } from '../../icons/Unknown';
+import { Unlock } from '../../icons/unlock';
+import { Unpin } from '../../icons/unpin';
+import { UserAdd } from '../../icons/user-add';
+import { UserDelete } from '../../icons/user-remove';
+import { PeopleIcon } from '../../icons/users';
+import type { IconProps } from '../../icons/utils/base';
+import { VideoIcon } from '../../icons/video';
+import { Recorder } from '../../icons/video-fill';
+import { Mic } from '../../icons/voice';
+import { XCircle } from '../../icons/x-circle';
+import { NewClose } from '../../icons/xmark';
+import { Cross } from '../../icons/xmark-1';
 
 /**
  * Normalizes each component entry to React.ComponentType<P>, stripping
@@ -197,7 +281,116 @@ type NormalizeComponents<T> = {
   [K in keyof T]: T[K] extends React.ComponentType<infer P> ? React.ComponentType<P> : T[K];
 };
 
+/**
+ * All overridable icon components in the SDK, keyed by their exported name.
+ * Exposed via `WithComponents` under the nested `icons` key so integrators can
+ * swap any icon: `<WithComponents overrides={{ icons: { Mute: MyMute } }}>`.
+ *
+ * Only icons that are actually rendered by the SDK are registered here.
+ */
+export const defaultIcons = {
+  ArrowBoxLeft,
+  ArrowShareLeft,
+  ArrowUp,
+  ArrowUpRight,
+  Audio,
+  Bell,
+  BlockUser,
+  Bookmark,
+  Camera,
+  Check,
+  CheckAll,
+  Checkmark,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleBan,
+  CircleMinus,
+  Code,
+  CommandsIcon,
+  Copy,
+  Cross,
+  CurveLineLeftUp,
+  Delete,
+  DOC,
+  DotGrid,
+  Down,
+  Edit,
+  Exclamation,
+  ExclamationCircle,
+  EyeOpen,
+  File,
+  FilePickerIcon,
+  Flag,
+  Folder,
+  Giphy: GiphyFiletypeIcon,
+  GiphyIcon,
+  ImageGrid,
+  Imgur,
+  InfoTooltip,
+  Lightning,
+  Link,
+  Loading,
+  Lock,
+  MapPin,
+  Megaphone,
+  MenuPointHorizontal,
+  MessageBubbleEmpty,
+  MessageFlag,
+  Mic,
+  Minus,
+  MoreEmojis,
+  Mute,
+  NewClose,
+  OtherFileIcon,
+  Pause,
+  PDF,
+  PeopleIcon,
+  PhotoIcon,
+  Picture,
+  Pin,
+  Play,
+  Plus,
+  PollIcon,
+  PollThumbnail,
+  Presentation,
+  Recorder,
+  Reload,
+  ReplyConnectorLeft,
+  ReplyConnectorRight,
+  Resend,
+  Search,
+  SendRight,
+  Share,
+  Shield,
+  Smile,
+  Sound,
+  SpreadSheet,
+  Stop,
+  ThreadReply,
+  Tick,
+  Time,
+  Unknown,
+  Unlock,
+  Unpin,
+  UnreadIndicator,
+  UserAdd,
+  UserDelete,
+  Video,
+  VideoIcon,
+  Warning,
+  XCircle,
+  ZIP,
+} satisfies Record<string, React.ComponentType<IconProps>>;
+
+/**
+ * Map of all overridable SDK icons. Used to type the `icons` override slot
+ * and the resolved value returned by `useComponentsContext().icons`.
+ */
+export type IconsMap = typeof defaultIcons;
+
 const components = {
+  icons: defaultIcons,
   Attachment,
   AttachmentUploadIndicator,
   AttachButton,
diff --git a/package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx b/package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx
index f3bb3d4c57..b77428c9f9 100644
--- a/package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx
+++ b/package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx
@@ -5,6 +5,7 @@ import type { Channel, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import * as useIsChannelMutedModule from '../../../components/ChannelPreview/hooks/useIsChannelMuted';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelMembershipStateModule from '../../useChannelMembershipState';
@@ -219,6 +220,7 @@ describe('useChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: expect.any(Function),
         userMuteActive: false,
       },
@@ -246,6 +248,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -259,6 +262,7 @@ describe('getChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userMuteActive: false,
       },
@@ -291,6 +295,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -339,6 +344,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -356,6 +362,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -374,6 +381,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -399,6 +407,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: true,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -420,6 +429,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -439,6 +449,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'details',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -456,6 +467,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -472,6 +484,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -490,6 +503,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -516,6 +530,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
diff --git a/package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx b/package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx
index aac6326a68..3a08164972 100644
--- a/package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx
+++ b/package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx
@@ -6,6 +6,7 @@ import type { Channel, ChannelMemberResponse, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelOwnCapabilitiesModule from '../../useChannelOwnCapabilities';
@@ -227,6 +228,7 @@ describe('useChannelMemberActionItems', () => {
         channelActions,
         isBlocked: false,
         isCurrentUser: false,
+        icons: defaultIcons,
         member,
         ownCapabilities: [],
         t: expect.any(Function),
@@ -253,6 +255,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -273,6 +276,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: true,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -290,6 +294,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: ['update-channel-members'],
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -310,6 +315,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -329,6 +335,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -347,6 +354,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -360,6 +368,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
         isCurrentUser: false,
         member,
         ownCapabilities: undefined,
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userActions: actions,
         userMuteActive: false,
diff --git a/package/src/hooks/actions/useChannelActionItems.tsx b/package/src/hooks/actions/useChannelActionItems.tsx
index 4f3a868eb0..839061f722 100644
--- a/package/src/hooks/actions/useChannelActionItems.tsx
+++ b/package/src/hooks/actions/useChannelActionItems.tsx
@@ -14,9 +14,10 @@ import {
 import { useIsChannelMuted } from '../../components/ChannelPreview/hooks/useIsChannelMuted';
 import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
 import { useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import type { IconsMap } from '../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
-import { IconProps, Mute, BlockUser, Delete, Pin, Sound, Unpin } from '../../icons';
-import { ArrowBoxLeft } from '../../icons/leave';
+import { IconProps } from '../../icons';
 import { useChannelMembershipState } from '../useChannelMembershipState';
 import { useIsDirectChat } from '../useIsDirectChat';
 import { useStateStore } from '../useStateStore';
@@ -63,6 +64,7 @@ export type ChannelActionItemsParams = {
   actions: ChannelActions;
   channel: Channel;
   channelMuteActive: boolean;
+  icons: IconsMap;
   isArchived: boolean;
   isBlocked: boolean | undefined;
   isDirectChat: boolean;
@@ -104,6 +106,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       unpin,
     },
     channelMuteActive,
+    icons,
     isBlocked,
     isDirectChat,
     isPinned,
@@ -119,9 +122,9 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       action: channelMuteActive ? unmuteChannel : muteChannel,
       Icon: (props) =>
         channelMuteActive ? (
-          <Sound width={20} height={20} {...props} />
+          <icons.Sound width={20} height={20} {...props} />
         ) : (
-          <Mute
+          <icons.Mute
             width={20}
             height={20}
             {...props}
@@ -145,7 +148,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
   if (surface !== 'details') {
     actionItems.push({
       action: isPinned ? unpin : pin,
-      Icon: (props) => <ChannelActionsIcon Icon={isPinned ? Unpin : Pin} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={isPinned ? icons.Unpin : icons.Pin} {...props} />,
       id: 'pin',
       label: isDirectChat
         ? isPinned
@@ -164,10 +167,10 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       action: userMuteActive ? unmuteUser : muteUser,
       Icon: (props) =>
         userMuteActive ? (
-          <ChannelActionsIcon Icon={Sound} {...props} />
+          <ChannelActionsIcon Icon={icons.Sound} {...props} />
         ) : (
           <ChannelActionsIcon
-            Icon={Mute}
+            Icon={icons.Mute}
             {...props}
             fill={props.fill ?? props.stroke}
             stroke={undefined}
@@ -204,7 +207,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 
     actionItems.push({
       action: isBlocked ? unblockUser : blockUserWithConfirmation,
-      Icon: (props) => <ChannelActionsIcon Icon={BlockUser} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={icons.BlockUser} {...props} />,
       id: 'block',
       label: isBlocked ? t('Unblock User') : t('Block User'),
       placement: 'sheet',
@@ -245,7 +248,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 
   actionItems.push({
     action: leaveWithConfirmation,
-    Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,
+    Icon: (props) => <ChannelActionsIcon Icon={icons.ArrowBoxLeft} {...props} />,
     id: 'leave',
     label: isDirectChat ? t('Leave Chat') : t('Leave Group'),
     placement: 'sheet',
@@ -274,7 +277,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
           },
         ]);
       },
-      Icon: (props) => <ChannelActionsIcon Icon={Delete} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={icons.Delete} {...props} />,
       id: 'deleteChannel',
       label: isDirectChat ? t('Delete Chat') : t('Delete Group'),
       placement: 'sheet',
@@ -307,6 +310,7 @@ export const useChannelActionItems = ({
   getChannelActionItems: getChannelActionItemsProp = getChannelActionItems,
 }: UseChannelActionItemsParams) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const membership = useChannelMembershipState(channel);
   const channelActions = useChannelActions(channel);
   const isDirectChat = useIsDirectChat(channel);
@@ -331,6 +335,7 @@ export const useChannelActionItems = ({
       actions: channelActions,
       channel,
       channelMuteActive,
+      icons,
       isArchived,
       isBlocked,
       isDirectChat,
@@ -343,6 +348,7 @@ export const useChannelActionItems = ({
       channel,
       channelActions,
       channelMuteActive,
+      icons,
       isArchived,
       isBlocked,
       isDirectChat,
diff --git a/package/src/hooks/actions/useChannelMemberActionItems.tsx b/package/src/hooks/actions/useChannelMemberActionItems.tsx
index 25c056c550..fa78d0841b 100644
--- a/package/src/hooks/actions/useChannelMemberActionItems.tsx
+++ b/package/src/hooks/actions/useChannelMemberActionItems.tsx
@@ -9,8 +9,10 @@ import { useUserActions, UserActions } from './useUserActions';
 
 import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
 import { useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import type { IconsMap } from '../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
-import { BlockUser, IconProps, Mute, Sound, UserDelete } from '../../icons';
+import { IconProps } from '../../icons';
 import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
 import { useStateStore } from '../useStateStore';
 
@@ -19,6 +21,7 @@ export type ChannelMemberActionItem = ActionItem<'muteUser' | 'block' | string>;
 export type ChannelMemberActionItemsParams = {
   channel: Channel;
   channelActions: ChannelActions;
+  icons: IconsMap;
   isBlocked: boolean;
   isCurrentUser: boolean;
   member: ChannelMemberResponse;
@@ -48,6 +51,7 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
 ) => {
   const {
     channelActions: { removeMembers },
+    icons,
     isBlocked,
     isCurrentUser,
     member,
@@ -69,10 +73,10 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
         action: userMuteActive ? unmuteUser : muteUser,
         Icon: (props) =>
           userMuteActive ? (
-            <ChannelMemberActionsIcon Icon={Sound} {...props} />
+            <ChannelMemberActionsIcon Icon={icons.Sound} {...props} />
           ) : (
             <ChannelMemberActionsIcon
-              Icon={Mute}
+              Icon={icons.Mute}
               {...props}
               fill={props.fill ?? props.stroke}
               stroke={undefined}
@@ -106,7 +110,7 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
                 ],
               );
             },
-        Icon: (props) => <ChannelMemberActionsIcon Icon={BlockUser} {...props} />,
+        Icon: (props) => <ChannelMemberActionsIcon Icon={icons.BlockUser} {...props} />,
         id: 'block',
         label: isBlocked ? t('Unblock User') : t('Block User'),
         type: isBlocked ? 'standard' : 'destructive',
@@ -135,7 +139,7 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
             ],
           );
         },
-        Icon: (props) => <ChannelMemberActionsIcon Icon={UserDelete} {...props} />,
+        Icon: (props) => <ChannelMemberActionsIcon Icon={icons.UserDelete} {...props} />,
         id: 'removeMember',
         label: t('Remove User'),
         type: 'destructive',
@@ -169,6 +173,7 @@ export const useChannelMemberActionItems = ({
   getChannelMemberActionItems: getChannelMemberActionItemsProp = getChannelMemberActionItems,
 }: UseChannelMemberActionItemsParams) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const userActions = useUserActions(member.user);
   const channelActions = useChannelActions(channel);
 
@@ -189,6 +194,7 @@ export const useChannelMemberActionItems = ({
     () => ({
       channel,
       channelActions,
+      icons,
       isBlocked,
       isCurrentUser,
       member,
@@ -200,6 +206,7 @@ export const useChannelMemberActionItems = ({
     [
       channel,
       channelActions,
+      icons,
       isBlocked,
       isCurrentUser,
       member,
diff --git a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx
index 3136cc8f07..7ee95d5152 100644
--- a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx
+++ b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx
@@ -1,15 +1,8 @@
 import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments';
 
-import { File } from '../../icons/file';
-import { PhotoIcon } from '../../icons/image';
-import { Link } from '../../icons/link';
-import { MapPin } from '../../icons/location';
-import { CircleBan } from '../../icons/no-sign';
-import { PollIcon } from '../../icons/poll';
-import { VideoIcon } from '../../icons/video';
-import { Mic } from '../../icons/voice';
 import { FileTypes } from '../../types/types';
 
 export const useMessagePreviewIcon = ({
@@ -17,6 +10,7 @@ export const useMessagePreviewIcon = ({
 }: {
   message?: LocalMessage | MessageResponse | DraftMessage | null;
 }) => {
+  const { icons } = useComponentsContext();
   const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
     message?.attachments,
   );
@@ -36,39 +30,39 @@ export const useMessagePreviewIcon = ({
   );
 
   if (message.type === 'deleted') {
-    return CircleBan;
+    return icons.CircleBan;
   }
 
   if (message.poll_id) {
-    return PollIcon;
+    return icons.PollIcon;
   }
 
   if (message.shared_location) {
-    return MapPin;
+    return icons.MapPin;
   }
 
   if (hasLink) {
-    return Link;
+    return icons.Link;
   }
 
   if (onlyAudio || onlyVoiceRecordings) {
-    return Mic;
+    return icons.Mic;
   }
 
   if (onlyVideos) {
-    return VideoIcon;
+    return icons.VideoIcon;
   }
 
   if (onlyImages) {
-    return PhotoIcon;
+    return icons.PhotoIcon;
   }
 
   if (giphys?.length) {
-    return File;
+    return icons.File;
   }
 
   if (files?.length || images?.length || videos?.length || audios?.length) {
-    return File;
+    return icons.File;
   }
 
   return null;

From cc39913ce935132a7c4124093c4c701df0c379e8 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Thu, 16 Jul 2026 11:48:57 -0500
Subject: [PATCH 2/3] fix: avoid breaking change for getDefaultItems methods

---
 .../hooks/actions/useChannelActionItems.tsx   | 18 +++++++++++++++--
 .../actions/useChannelMemberActionItems.tsx   | 20 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/package/src/hooks/actions/useChannelActionItems.tsx b/package/src/hooks/actions/useChannelActionItems.tsx
index 839061f722..04aed4012c 100644
--- a/package/src/hooks/actions/useChannelActionItems.tsx
+++ b/package/src/hooks/actions/useChannelActionItems.tsx
@@ -22,6 +22,20 @@ import { useChannelMembershipState } from '../useChannelMembershipState';
 import { useIsDirectChat } from '../useIsDirectChat';
 import { useStateStore } from '../useStateStore';
 
+// Lazily resolved to avoid a static import cycle with defaultComponents.ts
+// (defaultComponents → ChannelDetails*/ChannelPreview* → this file). Statically
+// importing defaultIcons corrupts module-init order; require it at call time
+// instead. Same pattern as ComponentsContext's getDefaults().
+let cachedDefaultIcons: IconsMap | undefined;
+const getDefaultIcons = (): IconsMap => {
+  if (!cachedDefaultIcons) {
+    cachedDefaultIcons = (
+      require('../../contexts/componentsContext/defaultComponents') as { defaultIcons: IconsMap }
+    ).defaultIcons;
+  }
+  return cachedDefaultIcons;
+};
+
 export type ChannelActionItem = ActionItem<
   'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | 'pin' | string
 > & {
@@ -75,7 +89,7 @@ export type ChannelActionItemsParams = {
 };
 
 export type BuildDefaultChannelActionItems = (
-  channelActionItemsParams: ChannelActionItemsParams,
+  channelActionItemsParams: Omit<ChannelActionItemsParams, 'icons'> & { icons?: IconsMap },
 ) => ChannelActionItem[];
 
 const ChannelActionsIcon = ({
@@ -106,7 +120,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       unpin,
     },
     channelMuteActive,
-    icons,
+    icons = getDefaultIcons(),
     isBlocked,
     isDirectChat,
     isPinned,
diff --git a/package/src/hooks/actions/useChannelMemberActionItems.tsx b/package/src/hooks/actions/useChannelMemberActionItems.tsx
index fa78d0841b..d119d84ad8 100644
--- a/package/src/hooks/actions/useChannelMemberActionItems.tsx
+++ b/package/src/hooks/actions/useChannelMemberActionItems.tsx
@@ -16,6 +16,20 @@ import { IconProps } from '../../icons';
 import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
 import { useStateStore } from '../useStateStore';
 
+// Lazily resolved to avoid a static import cycle with defaultComponents.ts
+// (defaultComponents → ChannelDetails*/ChannelPreview* → this file). Statically
+// importing defaultIcons corrupts module-init order; require it at call time
+// instead. Same pattern as ComponentsContext's getDefaults().
+let cachedDefaultIcons: IconsMap | undefined;
+const getDefaultIcons = (): IconsMap => {
+  if (!cachedDefaultIcons) {
+    cachedDefaultIcons = (
+      require('../../contexts/componentsContext/defaultComponents') as { defaultIcons: IconsMap }
+    ).defaultIcons;
+  }
+  return cachedDefaultIcons;
+};
+
 export type ChannelMemberActionItem = ActionItem<'muteUser' | 'block' | string>;
 
 export type ChannelMemberActionItemsParams = {
@@ -32,7 +46,9 @@ export type ChannelMemberActionItemsParams = {
 };
 
 export type BuildDefaultChannelMemberActionItems = (
-  channelMemberActionItemsParams: ChannelMemberActionItemsParams,
+  channelMemberActionItemsParams: Omit<ChannelMemberActionItemsParams, 'icons'> & {
+    icons?: IconsMap;
+  },
 ) => ChannelMemberActionItem[];
 
 const ChannelMemberActionsIcon = ({
@@ -51,7 +67,7 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
 ) => {
   const {
     channelActions: { removeMembers },
-    icons,
+    icons = getDefaultIcons(),
     isBlocked,
     isCurrentUser,
     member,

From d180cf98d068deb38232ba075caac33279e5c8aa Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Thu, 16 Jul 2026 13:31:01 -0500
Subject: [PATCH 3/3] fix: remove unused ArrowLeft icon

---
 package/src/icons/arrow-left.tsx | 23 -----------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 package/src/icons/arrow-left.tsx

diff --git a/package/src/icons/arrow-left.tsx b/package/src/icons/arrow-left.tsx
deleted file mode 100644
index e39d201a97..0000000000
--- a/package/src/icons/arrow-left.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { I18nManager } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-
-import { IconProps } from './utils/base';
-
-export const ArrowLeft = ({ height, size, style, width, ...rest }: IconProps) => (
-  <Svg
-    fill='none'
-    height={height ?? size}
-    style={[style, { transform: [{ rotate: I18nManager.isRTL ? '90deg' : '-90deg' }] }]}
-    viewBox='0 0 20 20'
-    width={width ?? size}
-  >
-    <Path
-      d='M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth={1.5}
-      {...rest}
-    />
-  </Svg>
-);