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

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>

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

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>

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}

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

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

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>

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>

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

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 (

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

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}

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(

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

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}

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

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

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}