stream-chat-react-native-core 9.6.2-beta.4 → 9.7.0-beta.1

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>
   );

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>

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} />

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) {

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>
     </>

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>
   );
 };

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} />;
 };

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} />;
 };

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,

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>

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>
   );
 };

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}

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>
   );
 };

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;