diff --git a/src/components/Attachment/Geolocation.tsx b/src/components/Attachment/Geolocation.tsx
index c58974217..4752cf07f 100644
--- a/src/components/Attachment/Geolocation.tsx
+++ b/src/components/Attachment/Geolocation.tsx
@@ -3,9 +3,13 @@ import { useEffect } from 'react';
 import { useRef, useState } from 'react';
 import React from 'react';
 import type { Coords, SharedLocationResponseData } from 'stream-chat';
-import { useChannel, useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconLocation } from '../Icons';
 import { Button } from '../Button';
 import { convertTimestampToDate, nowNs, nsToMs } from 'stream-chat';
 
@@ -141,6 +145,7 @@ export type GeolocationAttachmentMapPlaceholderProps = {
 const DefaultGeolocationAttachmentMapPlaceholder = ({
   location,
 }: GeolocationAttachmentMapPlaceholderProps) => {
+  const { IconLocation } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Attachment/Giphy.tsx b/src/components/Attachment/Giphy.tsx
index f226c71dd..5fe007726 100644
--- a/src/components/Attachment/Giphy.tsx
+++ b/src/components/Attachment/Giphy.tsx
@@ -3,8 +3,11 @@ import { BaseImage as DefaultBaseImage } from '../BaseImage';
 import { toGalleryItemDescriptors } from '../Gallery';
 import { getGiphyDescriptiveTitle } from './giphyAccessibility';
 import clsx from 'clsx';
-import { useComponentContext, useTranslationContext } from '../../context';
-import { IconGiphy } from '../Icons';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   type ImageAttachmentConfiguration,
@@ -79,9 +82,13 @@ export const Giphy = ({ attachment }: GiphyAttachmentProps) => {
   );
 };
 
-const GiphyBadge = () => (
-  <div className='str-chat__giphy-badge'>
-    <IconGiphy />
-    Giphy
-  </div>
-);
+const GiphyBadge = () => {
+  const { IconGiphy } = useComponentContextIcons();
+
+  return (
+    <div className='str-chat__giphy-badge'>
+      <IconGiphy />
+      Giphy
+    </div>
+  );
+};
diff --git a/src/components/Attachment/LinkPreview/Card.tsx b/src/components/Attachment/LinkPreview/Card.tsx
index a660ba6a3..979c08fa8 100644
--- a/src/components/Attachment/LinkPreview/Card.tsx
+++ b/src/components/Attachment/LinkPreview/Card.tsx
@@ -6,9 +6,9 @@ import { useAttachmentContext } from '../../../context/AttachmentContext';
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
+import { useComponentContextIcons } from '../../../context';
 
 type CardRootProps = {
   cardUrl: string | undefined;
@@ -62,6 +62,7 @@ const CardHeader = (props: CardHeaderProps) => {
 type CardContentProps = RenderAttachmentProps['attachment'];
 
 const CardContent = (props: CardContentProps) => {
+  const { IconLink } = useComponentContextIcons();
   const { og_scrape_url, text, title, title_link } = props;
   const url = title_link || og_scrape_url;
 
diff --git a/src/components/Attachment/LinkPreview/CardAudio.tsx b/src/components/Attachment/LinkPreview/CardAudio.tsx
index 28c163b99..4941b40b1 100644
--- a/src/components/Attachment/LinkPreview/CardAudio.tsx
+++ b/src/components/Attachment/LinkPreview/CardAudio.tsx
@@ -4,7 +4,7 @@ import { useStateStore } from '../../../store';
 import { PlayButton } from '../../Button';
 import type { AudioProps } from '../Audio';
 import React, { useContext } from 'react';
-import { IconLink } from '../../Icons';
+import { useComponentContextIcons } from '../../../context';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 import { useThreadContext } from '../../Threads';
@@ -22,22 +22,26 @@ const SourceLink = ({
   author_name,
   showUrl,
   url,
-}: Pick<CardProps, 'author_name'> & { url: string; showUrl?: boolean }) => (
-  <div
-    className='str-chat__message-attachment-card--source-link'
-    data-testid='card-source-link'
-  >
-    <IconLink />
-    <SafeAnchor
-      className='str-chat__message-attachment-card--url'
-      href={url}
-      rel='noopener noreferrer'
-      target='_blank'
+}: Pick<CardProps, 'author_name'> & { url: string; showUrl?: boolean }) => {
+  const { IconLink } = useComponentContextIcons();
+
+  return (
+    <div
+      className='str-chat__message-attachment-card--source-link'
+      data-testid='card-source-link'
     >
-      {showUrl ? url : author_name || getHostFromURL(url)}
-    </SafeAnchor>
-  </div>
-);
+      <IconLink />
+      <SafeAnchor
+        className='str-chat__message-attachment-card--url'
+        href={url}
+        rel='noopener noreferrer'
+        target='_blank'
+      >
+        {showUrl ? url : author_name || getHostFromURL(url)}
+      </SafeAnchor>
+    </div>
+  );
+};
 
 const audioPlayerStateSelector = (state: AudioPlayerState) => ({
   durationSeconds: state.durationSeconds,
diff --git a/src/components/Attachment/ModalGallery.tsx b/src/components/Attachment/ModalGallery.tsx
index 1e906f3c5..3e64782ad 100644
--- a/src/components/Attachment/ModalGallery.tsx
+++ b/src/components/Attachment/ModalGallery.tsx
@@ -11,9 +11,9 @@ import { GlobalModal, type ModalCloseSource } from '../Modal';
 import {
   MessageContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../context';
-import { IconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -160,6 +160,7 @@ const ThumbnailButton = ({
   overflowCount,
   showOverlay,
 }: ThumbnailButtonProps) => {
+  const { IconRetry } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const imageUrl = item.imageUrl;
   const [isLoadFailed, setIsLoadFailed] = useState(false);
diff --git a/src/components/Attachment/UnsupportedAttachment.tsx b/src/components/Attachment/UnsupportedAttachment.tsx
index 66adeb5b9..0cdd2732c 100644
--- a/src/components/Attachment/UnsupportedAttachment.tsx
+++ b/src/components/Attachment/UnsupportedAttachment.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import { useTranslationContext } from '../../context';
-import { IconUnsupportedAttachment } from '../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export type UnsupportedAttachmentProps = {
   attachment: Attachment;
 };
 
 export const UnsupportedAttachment = () => {
+  const { IconUnsupportedAttachment } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div
diff --git a/src/components/Attachment/VisibilityDisclaimer.tsx b/src/components/Attachment/VisibilityDisclaimer.tsx
index a3b5aabeb..c130c2050 100644
--- a/src/components/Attachment/VisibilityDisclaimer.tsx
+++ b/src/components/Attachment/VisibilityDisclaimer.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { IconEyeFill } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export const VisibilityDisclaimer = () => {
+  const { IconEyeFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__visibility-disclaimer'>
diff --git a/src/components/Attachment/__tests__/Giphy.test.tsx b/src/components/Attachment/__tests__/Giphy.test.tsx
index 27eeb75da..ce248905c 100644
--- a/src/components/Attachment/__tests__/Giphy.test.tsx
+++ b/src/components/Attachment/__tests__/Giphy.test.tsx
@@ -11,31 +11,37 @@ const { channelStateMock } = vi.hoisted(() => ({
   },
 }));
 
-vi.mock('../../../context', () => ({
-  useChannelStateContext: () => channelStateMock,
-  useComponentContext: () => ({}),
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    useChannelStateContext: () => channelStateMock,
+    useComponentContext: () => ({}),
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 describe('Giphy accessible name', () => {
   it('uses the giphy title as the image accessible name', () => {
diff --git a/src/components/Attachment/components/DownloadButton.tsx b/src/components/Attachment/components/DownloadButton.tsx
index a58b199a3..bbf938b99 100644
--- a/src/components/Attachment/components/DownloadButton.tsx
+++ b/src/components/Attachment/components/DownloadButton.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
-import { useTranslationContext } from '../../../context';
-import { IconDownload } from '../../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 
 export type DownloadButtonProps = {
   /** Attachment asset URL (e.g. `asset_url`). */
@@ -25,6 +24,7 @@ export const DownloadButton = ({
   suggestedFileName,
   tooltipTitle,
 }: DownloadButtonProps) => {
+  const { IconDownload } = useComponentContextIcons();
   const { t } = useTranslationContext();
   if (!assetUrl) return null;
   const href = sanitizeUrl(assetUrl);
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 79149a909..51a8080db 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { IconUser } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type AvatarProps = {
   /** Custom icon rendered when there is no image and no initials */
@@ -51,7 +51,7 @@ const getInitials = (name?: string) => {
  */
 export const Avatar = ({
   className,
-  FallbackIcon = IconUser,
+  FallbackIcon,
   imageUrl,
   initials: customInitials,
   isOnline,
@@ -59,6 +59,9 @@ export const Avatar = ({
   userName,
   ...rest
 }: AvatarProps) => {
+  const { IconUser } = useComponentContextIcons();
+  // The prop still wins over the context slot: it targets one avatar, the slot rebrands all of them.
+  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;
   const [error, setError] = useState(false);
 
   useEffect(() => () => setError(false), [imageUrl]);
@@ -113,7 +116,7 @@ export const Avatar = ({
               {sizeAwareInitials}
             </div>
           )}
-          {!sizeAwareInitials.length && <FallbackIcon />}
+          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}
         </>
       )}
     </div>
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 66fe564f7..2dd543c56 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { type ComponentProps } from 'react';
-import { IconExclamationMarkFill } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type BadgeVariant =
   | 'default'
@@ -47,8 +47,12 @@ export const ErrorBadge = ({
   className,
   size = 'sm',
   ...rest
-}: Omit<BadgeProps, 'variant'>) => (
-  <Badge {...rest} className={className} size={size} variant='error'>
-    <IconExclamationMarkFill />
-  </Badge>
-);
+}: Omit<BadgeProps, 'variant'>) => {
+  const { IconExclamationMarkFill } = useComponentContextIcons();
+
+  return (
+    <Badge {...rest} className={className} size={size} variant='error'>
+      <IconExclamationMarkFill />
+    </Badge>
+  );
+};
diff --git a/src/components/Badge/MediaBadge.tsx b/src/components/Badge/MediaBadge.tsx
index 3301c6e96..a91560ea2 100644
--- a/src/components/Badge/MediaBadge.tsx
+++ b/src/components/Badge/MediaBadge.tsx
@@ -1,4 +1,4 @@
-import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 import React, { type ComponentType } from 'react';
 import type { LocalAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
 import clsx from 'clsx';
@@ -10,12 +10,14 @@ export type MediaBadgeProps = {
   variant: 'video' | 'voice-recording' | string;
 };
 
-const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
-  video: IconVideoFill,
-  voiceRecording: IconMicrophoneSolid,
-};
-
 export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
+  const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();
+
+  const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
+    video: IconVideoFill,
+    voiceRecording: IconMicrophoneSolid,
+  };
+
   const Icon = MediaBadgeVariantToIcon[variant];
   const { duration } = (attachment as LocalVoiceRecordingAttachment).custom ?? {};
   return (
diff --git a/src/components/BaseImage/ImagePlaceholder.tsx b/src/components/BaseImage/ImagePlaceholder.tsx
index c1a5f6c6f..664262898 100644
--- a/src/components/BaseImage/ImagePlaceholder.tsx
+++ b/src/components/BaseImage/ImagePlaceholder.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconImage } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type ImagePlaceholderProps = {
   className?: string;
@@ -9,6 +9,8 @@ export type ImagePlaceholderProps = {
 
 export const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {
   const { t } = useTranslationContext();
+  const { IconImage } = useComponentContextIcons();
+
   return (
     <div
       aria-label={t(
diff --git a/src/components/Button/PlayButton.tsx b/src/components/Button/PlayButton.tsx
index 286867d3e..3b9ea4caa 100644
--- a/src/components/Button/PlayButton.tsx
+++ b/src/components/Button/PlayButton.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { Button } from './Button';
 import type { ComponentProps } from 'react';
 import clsx from 'clsx';
-import { IconPauseFill, IconPlayFill } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export type PlayButtonProps = ComponentProps<'button'> & {
   isPlaying: boolean;
@@ -11,6 +10,8 @@ export type PlayButtonProps = ComponentProps<'button'> & {
 
 export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {
   const { t } = useTranslationContext();
+  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
+
   return (
     <Button
       appearance='outline'
diff --git a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
index 0f9c0c787..81f14813f 100644
--- a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
+++ b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
@@ -7,18 +7,14 @@ import {
   useState,
 } from 'react';
 
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { useChannelMembershipState, useChannelMembersState } from '../ChannelList';
 import { useChannelListItemContext } from './ChannelListItem';
 import { Button } from '../Button';
-import {
-  IconArchive,
-  IconLeave,
-  IconMore,
-  IconMute,
-  IconNoSign,
-  IconPin,
-} from '../Icons';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 import {
   ContextMenuButton,
@@ -360,6 +356,7 @@ type ChannelActionItem =
 const defaultComponents = {
   dropdown: {
     Archive() {
+      const { IconArchive } = useComponentContextIcons();
       const behaviorProps = useDropdownActionButtonProps(useArchiveAction());
 
       return (
@@ -374,6 +371,7 @@ const defaultComponents = {
       );
     },
     Ban() {
+      const { IconNoSign } = useComponentContextIcons();
       const behaviorProps = useDropdownActionButtonProps(useBanAction());
 
       return (
@@ -388,6 +386,7 @@ const defaultComponents = {
       );
     },
     Leave() {
+      const { IconLeave } = useComponentContextIcons();
       const behaviorProps = useDropdownActionButtonProps(useLeaveAction());
 
       return (
@@ -403,6 +402,7 @@ const defaultComponents = {
       );
     },
     Mute() {
+      const { IconMute } = useComponentContextIcons();
       const behaviorProps = useDropdownActionButtonProps(useMuteAction());
 
       return (
@@ -417,6 +417,7 @@ const defaultComponents = {
       );
     },
     Pin() {
+      const { IconPin } = useComponentContextIcons();
       const behaviorProps = useDropdownActionButtonProps(usePinAction());
 
       return (
@@ -433,6 +434,7 @@ const defaultComponents = {
   },
   quick: {
     Archive() {
+      const { IconArchive } = useComponentContextIcons();
       const behaviorProps = useQuickActionButtonProps(useArchiveAction());
 
       return (
@@ -450,6 +452,7 @@ const defaultComponents = {
       );
     },
     Mute() {
+      const { IconMute } = useComponentContextIcons();
       const behaviorProps = useQuickActionButtonProps(useMuteAction());
 
       return (
@@ -468,6 +471,7 @@ const defaultComponents = {
     },
   },
   QuickDropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {
+    const { IconMore } = useComponentContextIcons();
     const { channel } = useChannelListItemContext();
     const { t } = useTranslationContext();
 
diff --git a/src/components/ChannelListItem/ChannelListItemUI.tsx b/src/components/ChannelListItem/ChannelListItemUI.tsx
index 414bb657a..27c00ea1a 100644
--- a/src/components/ChannelListItem/ChannelListItemUI.tsx
+++ b/src/components/ChannelListItem/ChannelListItemUI.tsx
@@ -6,11 +6,11 @@ import { ChannelListItemTimestamp } from './ChannelListItemTimestamp';
 
 import { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';
 import { Badge } from '../Badge';
-import { IconMute, IconPin } from '../Icons';
 import { useInteractionAnnouncements } from '../Accessibility';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
   useWorkspaceNavigation,
 } from '../../context';
@@ -19,6 +19,7 @@ import { composeChannelListItemAccessibleLabel } from './utils.a11y';
 import { SummarizedMessagePreview as DefaultSummarizedMessagePreview } from '../SummarizedMessagePreview';
 
 const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
+  const { IconMute, IconPin } = useComponentContextIcons();
   const {
     accessibleLabelConfig,
     active,
diff --git a/src/components/Dialog/components/Callout.tsx b/src/components/Dialog/components/Callout.tsx
index 810740c2c..d084cb087 100644
--- a/src/components/Dialog/components/Callout.tsx
+++ b/src/components/Dialog/components/Callout.tsx
@@ -3,8 +3,11 @@ import { DialogAnchor, type DialogAnchorProps } from '../service';
 import { useDialogIsOpen } from '../hooks';
 import { Button } from '../../Button';
 import clsx from 'clsx';
-import { IconXmark } from '../../Icons';
-import { useComponentContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../context';
 
 export type CalloutProps = PropsWithChildren<
   DialogAnchorProps & {
@@ -51,6 +54,7 @@ export const Callout = ({
 export type CalloutDialogProps = Pick<CalloutProps, 'children' | 'className' | 'onClose'>;
 
 const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {
+  const { IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Dialog/components/ContextMenu.tsx b/src/components/Dialog/components/ContextMenu.tsx
index 012f07a79..2d03d0d58 100644
--- a/src/components/Dialog/components/ContextMenu.tsx
+++ b/src/components/Dialog/components/ContextMenu.tsx
@@ -13,12 +13,15 @@ import React, {
   useState,
 } from 'react';
 import { type AvatarProps, Avatar as DefaultAvatar } from '../../Avatar';
-import { IconChevronLeft, IconChevronRight } from '../../Icons';
 import type { PopperLikePlacement } from '../hooks';
 import { useDialogIsOpen, useDialogOnNearestManager } from '../hooks';
 import type { DialogAnchorProps } from '../service/DialogAnchor';
 import { DialogAnchor, useDialogAnchor } from '../service/DialogAnchor';
-import { useComponentContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../context';
 import { createRovingFocusKeyDownHandler } from '../../../a11y/a11yUtils';
 import { VisuallyHidden } from '../../VisuallyHidden';
 import { useStableId } from '../../UtilityComponents/useStableId';
@@ -100,37 +103,42 @@ export const BaseContextMenuButton = ({
   Icon,
   label,
   role = 'menuitem',
-  SubmenuIcon = IconChevronRight,
+  SubmenuIcon,
   variant,
   ...props
-}: BaseContextMenuButtonProps) => (
-  <button
-    {...props}
-    className={clsx(
-      'str-chat__context-menu__button',
-      {
-        'str-chat__context-menu__button--with-submenu': hasSubMenu,
-        [`str-chat__context-menu__button--${variant}`]: typeof variant === 'string',
-      },
-      className,
-    )}
-    role={role}
-    type='button'
-  >
-    {Icon && <Icon className='str-chat__context-menu__button__icon' />}
-    {label ? (
-      <>
-        <div className='str-chat__context-menu__button__label'>{label}</div>
-        <div className='str-chat__context-menu__button__details'>{details}</div>
-      </>
-    ) : (
-      <div className='str-chat__context-menu__button__label'>{children}</div>
-    )}
-    {!!hasSubMenu && (
-      <SubmenuIcon className='str-chat__context-menu__button__submenu-icon' />
-    )}
-  </button>
-);
+}: BaseContextMenuButtonProps) => {
+  const { IconChevronRight } = useComponentContextIcons();
+  const ResolvedSubmenuIcon = SubmenuIcon ?? IconChevronRight;
+
+  return (
+    <button
+      {...props}
+      className={clsx(
+        'str-chat__context-menu__button',
+        {
+          'str-chat__context-menu__button--with-submenu': hasSubMenu,
+          [`str-chat__context-menu__button--${variant}`]: typeof variant === 'string',
+        },
+        className,
+      )}
+      role={role}
+      type='button'
+    >
+      {Icon && <Icon className='str-chat__context-menu__button__icon' />}
+      {label ? (
+        <>
+          <div className='str-chat__context-menu__button__label'>{label}</div>
+          <div className='str-chat__context-menu__button__details'>{details}</div>
+        </>
+      ) : (
+        <div className='str-chat__context-menu__button__label'>{children}</div>
+      )}
+      {!!hasSubMenu && (
+        <ResolvedSubmenuIcon className='str-chat__context-menu__button__submenu-icon' />
+      )}
+    </button>
+  );
+};
 
 export type UserContextMenuButtonProps = Pick<AvatarProps, 'imageUrl' | 'userName'> &
   ComponentProps<'button'>;
@@ -674,6 +682,7 @@ export function ContextMenuContent({
   ...props
 }: ContextMenuContentProps) {
   const { t } = useTranslationContext();
+  const { IconChevronLeft } = useComponentContextIcons();
   const resolvedBackLabel = backLabel ?? t('common.back.label', 'Back');
   const {
     ['aria-describedby']: rootAriaDescribedBy,
diff --git a/src/components/Dialog/components/Prompt.tsx b/src/components/Dialog/components/Prompt.tsx
index c488878a0..c65fece88 100644
--- a/src/components/Dialog/components/Prompt.tsx
+++ b/src/components/Dialog/components/Prompt.tsx
@@ -1,8 +1,11 @@
 import React, { type ComponentProps, type PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Button, type ButtonProps } from '../../Button';
-import { IconArrowLeft, IconXmark } from '../../Icons';
-import { useModalContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContextIcons,
+  useModalContext,
+  useTranslationContext,
+} from '../../../context';
 import { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';
 
 const PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -34,6 +37,7 @@ const PromptHeader = ({
   titleId,
   TrailingContent,
 }: PromptHeaderProps) => {
+  const { IconArrowLeft, IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { dialogId } = useModalContext();
   const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =
diff --git a/src/components/Dialog/components/Viewer.tsx b/src/components/Dialog/components/Viewer.tsx
index cf7cd93d6..83a322fae 100644
--- a/src/components/Dialog/components/Viewer.tsx
+++ b/src/components/Dialog/components/Viewer.tsx
@@ -1,8 +1,11 @@
 import React, { type ComponentProps, type PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Button, type ButtonProps } from '../../Button';
-import { IconArrowLeft, IconXmark } from '../../Icons';
-import { useModalContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContextIcons,
+  useModalContext,
+  useTranslationContext,
+} from '../../../context';
 import { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';
 
 const ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -30,6 +33,7 @@ const ViewerHeader = ({
   title,
   titleId,
 }: ViewerHeaderProps) => {
+  const { IconArrowLeft, IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { dialogId } = useModalContext();
   const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =
diff --git a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
index b4fe2ff01..cac960b14 100644
--- a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
+++ b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconMessageBubble, IconMessageBubbles } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 import { asDynamicKey } from '../../i18n/utils';
 
 export type EmptyStateIndicatorProps = {
@@ -14,6 +14,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   const { listType, messageText } = props;
 
   const { t } = useTranslationContext();
+  const { IconMessageBubble, IconMessageBubbles } = useComponentContextIcons();
 
   if (listType === 'thread') return null;
 
diff --git a/src/components/Form/NumericInput.tsx b/src/components/Form/NumericInput.tsx
index fa0bd768a..2b5a32f80 100644
--- a/src/components/Form/NumericInput.tsx
+++ b/src/components/Form/NumericInput.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx';
 import React, { forwardRef, useCallback } from 'react';
 import type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { useStableId } from '../UtilityComponents/useStableId';
-import { IconMinus, IconPlusSmall } from '../Icons';
 import { Button } from '../Button';
 
 export type NumericInputProps = Omit<
@@ -49,6 +48,7 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
     },
     ref,
   ) {
+    const { IconMinus, IconPlusSmall } = useComponentContextIcons();
     const generatedId = useStableId();
     const id = idProp ?? generatedId;
     const { t } = useTranslationContext();
diff --git a/src/components/Form/TextInput.tsx b/src/components/Form/TextInput.tsx
index cb6479f67..32695c2ae 100644
--- a/src/components/Form/TextInput.tsx
+++ b/src/components/Form/TextInput.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import { useStableId } from '../UtilityComponents/useStableId';
-import { IconCheckmark, IconExclamationMark } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type TextInputVariant = 'outline' | 'ghost';
 
@@ -79,6 +79,7 @@ type TextInputFieldMessageProps =
     };
 
 const TextInputFieldMessage = (props: TextInputFieldMessageProps) => {
+  const { IconCheckmark, IconExclamationMark } = useComponentContextIcons();
   if (props.kind === 'neutral') {
     return (
       <div
diff --git a/src/components/Gallery/GalleryHeader.tsx b/src/components/Gallery/GalleryHeader.tsx
index 6e576edc3..8d684fe89 100644
--- a/src/components/Gallery/GalleryHeader.tsx
+++ b/src/components/Gallery/GalleryHeader.tsx
@@ -3,8 +3,12 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 
 import { type GalleryItem } from './GalleryContext';
 import { Button } from '../Button';
-import { IconArrowDownCircle, IconXmark } from '../Icons';
-import { ModalContext, useChatContext, useTranslationContext } from '../../context';
+import {
+  ModalContext,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { getDateString, isDate } from '../../i18n/utils';
 
 type GalleryHeaderProps = {
@@ -45,6 +49,7 @@ const GalleryTimestamp = ({ createdAt }: Pick<GalleryItem, 'createdAt'>) => {
 };
 
 export const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => {
+  const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { client } = useChatContext();
   const modalContext = useContext(ModalContext);
diff --git a/src/components/Gallery/GalleryUI.tsx b/src/components/Gallery/GalleryUI.tsx
index e0a1688b9..b1b0d7604 100644
--- a/src/components/Gallery/GalleryUI.tsx
+++ b/src/components/Gallery/GalleryUI.tsx
@@ -4,8 +4,11 @@ import { BaseImage } from '../BaseImage';
 import { GalleryHeader } from './GalleryHeader';
 import { useGalleryContext } from './GalleryContext';
 import { Button, type ButtonProps } from '../Button';
-import { IconChevronLeft, IconChevronRight } from '../Icons';
-import { ModalContext, useTranslationContext } from '../../context';
+import {
+  ModalContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { VideoPlayer } from '../VideoPlayer';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
@@ -15,6 +18,7 @@ const SWIPE_THRESHOLD = 50;
 const TRANSITION_DURATION = 300;
 
 export const GalleryUI = () => {
+  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const {
     closeOnBackgroundClick,
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index 01f3a3b08..e27a8fbf8 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -1,2 +1,3 @@
 export { createIcon } from './createIcon';
+export type { IconComponent, IconName, IconSlots } from './slots';
 export * from './icons';
diff --git a/src/components/Icons/slots.ts b/src/components/Icons/slots.ts
new file mode 100644
index 000000000..23479af06
--- /dev/null
+++ b/src/components/Icons/slots.ts
@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react';
+
+import type { BaseIconProps } from './BaseIcon';
+import type * as icons from './icons';
+
+/**
+ * The contract an icon override must satisfy. `BaseIconProps` rather than plain SVG props, so an
+ * override still accepts `decorative` and can opt out of `aria-hidden` the same way an SDK icon
+ * does.
+ */
+export type IconComponent = ComponentType<BaseIconProps>;
+
+/**
+ * Every icon the SDK ships, derived from the icon module rather than hand-listed. A new icon in
+ * `icons.tsx` becomes overridable the moment it is exported, and a removed one stops type-checking
+ * at its call sites — neither can drift out of sync with this type.
+ */
+export type IconName = keyof typeof icons;
+
+/**
+ * Icon overrides supplied through `ComponentContext.icons`. Deep-merged with sibling entries by
+ * `WithComponents`, so a consumer can rebrand a single icon without clearing the others.
+ */
+export type IconSlots = Partial<Record<IconName, IconComponent>>;
diff --git a/src/components/Loading/LoadingIndicator.tsx b/src/components/Loading/LoadingIndicator.tsx
index 1ba631195..2c187d957 100644
--- a/src/components/Loading/LoadingIndicator.tsx
+++ b/src/components/Loading/LoadingIndicator.tsx
@@ -1,8 +1,13 @@
-import React, { type ComponentProps } from 'react';
-import { IconLoading } from '../Icons';
+import React from 'react';
+import { useComponentContextIcons } from '../../context';
+import type { BaseIconProps } from '../Icons/BaseIcon';
 
-export type LoadingIndicatorProps = ComponentProps<typeof IconLoading>;
+// Typed off the icon contract rather than off a concrete icon: the rendered icon now comes from
+// the `IconLoading` slot, which any override can replace.
+export type LoadingIndicatorProps = BaseIconProps;
 
-export const LoadingIndicator = (props: LoadingIndicatorProps) => (
-  <IconLoading {...props} className='str-chat__loading-indicator' />
-);
+export const LoadingIndicator = (props: LoadingIndicatorProps) => {
+  const { IconLoading } = useComponentContextIcons();
+
+  return <IconLoading {...props} className='str-chat__loading-indicator' />;
+};
diff --git a/src/components/Location/ShareLocationDialog.tsx b/src/components/Location/ShareLocationDialog.tsx
index f8af9596a..128b863ac 100644
--- a/src/components/Location/ShareLocationDialog.tsx
+++ b/src/components/Location/ShareLocationDialog.tsx
@@ -5,14 +5,13 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { ContextMenuBody, ContextMenuButton, ContextMenuRoot, Prompt } from '../Dialog';
 import {
   Dropdown,
   type DropdownTriggerProps,
   useDropdownContext,
 } from '../Form/Dropdown';
-import { IconChevronDown } from '../Icons';
 import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
 import { SwitchField } from '../Form/SwitchField';
 import { useNotificationApi } from '../Notifications';
@@ -65,6 +64,7 @@ export const ShareLocationDialog = ({
   GeolocationMap = DefaultGeolocationMap,
   shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS,
 }: ShareLocationDialogProps) => {
+  const { IconChevronDown } = useComponentContextIcons();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposerController();
@@ -101,7 +101,7 @@ export const ShareLocationDialog = ({
         </>
       ) : null,
     }),
-    [selectedDurationLabel],
+    [IconChevronDown, selectedDurationLabel],
   );
 
   const getPosition = useCallback(
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
index a0c758d08..cd7dbc2e1 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
@@ -1,13 +1,17 @@
 import { CheckSignIcon } from '../../MessageComposer/icons';
-import { IconDelete, IconPauseFill, IconVoice } from '../../Icons';
 import React from 'react';
-import { useMessageComposerContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContextIcons,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
 import { useNotificationApi } from '../../Notifications';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 
 const ToggleRecordingButton = () => {
+  const { IconPauseFill, IconVoice } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const {
     recordingController: { recorder, recordingState },
@@ -41,6 +45,7 @@ const ToggleRecordingButton = () => {
 };
 
 export const AudioRecorderRecordingControls = () => {
+  const { IconDelete } = useComponentContextIcons();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const {
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
index 9ecde6184..37de4a27f 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
@@ -4,12 +4,12 @@ import React, { forwardRef, useRef } from 'react';
 import { useAttachmentManagerState } from '../../MessageComposer/hooks/useAttachmentManagerState';
 import {
   useComponentContext,
+  useComponentContextIcons,
   useMessageComposerContext,
   useTranslationContext,
 } from '../../../context';
 import { Callout, useDialogOnNearestManager } from '../../Dialog';
 import { Button } from '../../Button';
-import { IconVoice } from '../../Icons';
 
 const dialogId = 'recording-permission-denied-notification';
 
@@ -68,6 +68,7 @@ export const DefaultStartRecordingAudioButton = forwardRef<
   HTMLButtonElement,
   StartRecordingAudioButtonProps
 >(function StartRecordingAudioButton(props, ref) {
+  const { IconVoice } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
index 3c95532fb..8c3f21f1c 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
@@ -3,9 +3,8 @@ import { DurationDisplay, WaveProgressBar } from '../../AudioPlayback';
 import type { AudioPlayerState } from '../../AudioPlayback/AudioPlayer';
 import { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback';
 import { useStateStore } from '../../../store';
-import { IconPauseFill, IconPlayFill } from '../../Icons';
 import { Button } from '../../Button';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import clsx from 'clsx';
 
 const audioPlayerStateSelector = (state: AudioPlayerState) => ({
@@ -27,6 +26,7 @@ export const AudioRecordingPlayback = ({
   src,
   waveformData,
 }: AudioRecordingPlayerProps) => {
+  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const audioPlayer = useAudioPlayer({
     durationSeconds,
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
index 2b929807f..a455011da 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTimeElapsed } from './hooks/useTimeElapsed';
-import { useMessageComposerContext } from '../../../context';
+import { useComponentContextIcons, useMessageComposerContext } from '../../../context';
 import { RecordingTimer } from './RecordingTimer';
-import { IconVoice } from '../../Icons';
 
 type WaveformProps = {
   maxDataPointsDrawn?: number;
@@ -47,6 +46,7 @@ const AudioRecordingWaveform = ({ maxDataPointsDrawn = 200 }: WaveformProps) =>
   );
 };
 export const AudioRecordingPreview = () => {
+  const { IconVoice } = useComponentContextIcons();
   const {
     recordingController: { recorder },
   } = useMessageComposerContext();
diff --git a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx
index b94deb35d..a0a9d5ab5 100644
--- a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx
@@ -32,10 +32,16 @@ const addNotificationSpy = vi.fn();
 const mockClient = { notifications: { addError: addNotificationSpy } };
 const tSpy = (s) => s;
 
-vi.mock('../../../../context', () => ({
-  useChatContext: () => ({ client: mockClient }),
-  useTranslationContext: () => ({ t: tSpy }),
-}));
+vi.mock('../../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../context')>();
+  return {
+    useChatContext: () => ({ client: mockClient }),
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useTranslationContext: () => ({ t: tSpy }),
+  };
+});
 
 vi.mock('../../../Notifications', async (importOriginal) => ({
   ...(await importOriginal()),
diff --git a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
index 9612ecf32..4223a716b 100644
--- a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
+++ b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { IconArrowUpRight } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { useMessageAlsoSentInChannelNavigation } from './hooks';
 
 export type MessageAlsoSentInChannelIndicatorProps = {
@@ -21,6 +20,7 @@ export type MessageAlsoSentInChannelIndicatorProps = {
 export const MessageAlsoSentInChannelIndicator = ({
   onView,
 }: MessageAlsoSentInChannelIndicatorProps = {}) => {
+  const { IconArrowUpRight } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { isInThread, isShownInChannel, viewReference } =
     useMessageAlsoSentInChannelNavigation();
diff --git a/src/components/Message/MessageDeletedBubble.tsx b/src/components/Message/MessageDeletedBubble.tsx
index 8d3103feb..437257ec1 100644
--- a/src/components/Message/MessageDeletedBubble.tsx
+++ b/src/components/Message/MessageDeletedBubble.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 
-import { IconNoSign } from '../Icons';
 import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { LocalMessage } from 'stream-chat';
 import { MessageBubble } from './MessageBubble';
+import { useComponentContextIcons } from '../../context';
 
 export type MessageDeletedProps = {
   message: LocalMessage;
 };
 
 export const MessageDeletedBubble = () => {
+  const { IconNoSign } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx
index 54a31ade2..d9fb3fe95 100644
--- a/src/components/Message/MessageStatus.tsx
+++ b/src/components/Message/MessageStatus.tsx
@@ -8,8 +8,8 @@ import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconCheckmark1Small, IconChecks, IconClock } from '../Icons';
 import { useThreadContext } from '../Threads';
+import { useComponentContextIcons } from '../../context';
 
 export type MessageStatusProps = {
   /* Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'. */
@@ -27,6 +27,7 @@ export type MessageStatusProps = {
 };
 
 const UnMemoizedMessageStatus = (props: MessageStatusProps) => {
+  const { IconCheckmark1Small, IconChecks, IconClock } = useComponentContextIcons();
   const {
     MessageDeliveredStatus,
     MessageReadStatus,
diff --git a/src/components/Message/MessageTranslationIndicator.tsx b/src/components/Message/MessageTranslationIndicator.tsx
index 810a9823f..264881e2e 100644
--- a/src/components/Message/MessageTranslationIndicator.tsx
+++ b/src/components/Message/MessageTranslationIndicator.tsx
@@ -1,8 +1,8 @@
 import type { LocalMessage } from 'stream-chat';
 import React, { useCallback, useMemo } from 'react';
-import { IconTranslate } from '../Icons';
 import {
   getTranslatedMessageText,
+  useComponentContextIcons,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
@@ -15,6 +15,7 @@ export type TranslationIndicatorProps = {
 export const MessageTranslationIndicator = ({
   message: propMessage,
 }: TranslationIndicatorProps) => {
+  const { IconTranslate } = useComponentContextIcons();
   const { t, userLanguage } = useTranslationContext();
   const {
     message: contextMessage,
diff --git a/src/components/Message/PinIndicator.tsx b/src/components/Message/PinIndicator.tsx
index 770c9d066..919fb6db6 100644
--- a/src/components/Message/PinIndicator.tsx
+++ b/src/components/Message/PinIndicator.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 
-import { IconPin } from '../Icons';
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import type { LocalMessage } from 'stream-chat';
 
 export type PinIndicatorProps = {
@@ -13,6 +16,7 @@ export type PinIndicatorProps = {
  * Name is taken from message.pinned_by (who pinned).
  */
 export const PinIndicator = ({ message }: PinIndicatorProps) => {
+  const { IconPin } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { client } = useChatContext();
 
diff --git a/src/components/Message/ReminderNotification.tsx b/src/components/Message/ReminderNotification.tsx
index 710658647..069d104e5 100644
--- a/src/components/Message/ReminderNotification.tsx
+++ b/src/components/Message/ReminderNotification.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { useStateStore } from '../../store';
 import type { Reminder, ReminderState } from 'stream-chat';
-import { IconBell, IconBookmark } from '../Icons';
 import { nsToDate, nsToMs } from 'stream-chat';
 
 export type ReminderNotificationProps = {
@@ -14,6 +13,7 @@ const reminderStateSelector = (state: ReminderState) => ({
 });
 
 function SavedForLaterContent() {
+  const { IconBookmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__message-saved-for-later'>
@@ -26,6 +26,7 @@ function SavedForLaterContent() {
 const THRESHOLD_RELATIVE_MINUTES = 59;
 
 function RemindMeContent({ reminder }: { reminder: Reminder }) {
+  const { IconBell } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
 
diff --git a/src/components/MessageActions/DownloadSubmenu.tsx b/src/components/MessageActions/DownloadSubmenu.tsx
index aa69552e6..6a899e1c3 100644
--- a/src/components/MessageActions/DownloadSubmenu.tsx
+++ b/src/components/MessageActions/DownloadSubmenu.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { useMessageContext, useTranslationContext } from '../../context';
+import {
+  useComponentContextIcons,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import {
   ContextMenuBackButton,
   ContextMenuButton,
   ContextMenuHeader,
   useContextMenuContext,
 } from '../Dialog';
-import { IconChevronLeft, IconDownload } from '../Icons';
 import {
   type DownloadableAttachment,
   downloadAllAttachments,
@@ -18,6 +21,7 @@ const msgActionsBoxButtonClassName =
   'str-chat__message-actions-list-item-button' as const;
 
 export const DownloadSubmenuHeader = () => {
+  const { IconChevronLeft } = useComponentContextIcons();
   const { returnToParentMenu: goBack } = useContextMenuContext();
   const { t } = useTranslationContext();
   return (
@@ -31,6 +35,7 @@ export const DownloadSubmenuHeader = () => {
 };
 
 export const DownloadSubmenu = () => {
+  const { IconDownload } = useComponentContextIcons();
   const { closeMenu } = useContextMenuContext();
   const { message } = useMessageContext();
   const { t } = useTranslationContext();
diff --git a/src/components/MessageActions/MessageActions.defaults.tsx b/src/components/MessageActions/MessageActions.defaults.tsx
index d5916e151..0e2648499 100644
--- a/src/components/MessageActions/MessageActions.defaults.tsx
+++ b/src/components/MessageActions/MessageActions.defaults.tsx
@@ -2,30 +2,6 @@
 import React, { forwardRef, useState } from 'react';
 
 import { GlobalModal } from '../Modal';
-import {
-  IconAudio,
-  IconBell,
-  IconBellOff,
-  IconBookmark,
-  IconBookmarkRemove,
-  IconCopy,
-  IconDelete,
-  IconDownload,
-  IconEdit,
-  IconEmoji,
-  IconFlag,
-  IconMore,
-  IconMute,
-  IconNoSign,
-  IconNotification,
-  IconPin,
-  IconQuote,
-  IconReply,
-  IconRetry,
-  IconThread,
-  IconUnpin,
-  IconUserCheck,
-} from '../Icons';
 import { isMessageDeleted, isUserMuted } from '../Message/utils';
 import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
 import { savePreEditSnapshot } from '../MessageComposer/preEditSnapshot';
@@ -36,6 +12,7 @@ import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithBut
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
@@ -77,6 +54,7 @@ const getNotificationError = (error: unknown): Error | undefined => {
 const DefaultMessageActionComponents = {
   dropdown: {
     React() {
+      const { IconEmoji } = useComponentContextIcons();
       const { ReactionSelector = DefaultReactionSelector } = useComponentContext();
       const { anchorReferenceElement } = useContextMenuContext();
       const { isMyMessage, message, threadList } = useMessageContext();
@@ -135,6 +113,7 @@ const DefaultMessageActionComponents = {
       );
     },
     ThreadReply() {
+      const { IconThread } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
@@ -155,6 +134,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Quote() {
+      const { IconQuote } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
@@ -188,6 +168,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Download() {
+      const { IconDownload } = useComponentContextIcons();
       const { closeMenu, openSubmenu } = useContextMenuContext();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
@@ -223,6 +204,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Pin() {
+      const { IconPin, IconUnpin } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handlePin, message } = useMessageContext();
       const { addNotification } = useNotificationApi();
@@ -279,6 +261,7 @@ const DefaultMessageActionComponents = {
       );
     },
     CopyMessageText() {
+      const { IconCopy } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
@@ -298,6 +281,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Resend() {
+      const { IconRetry } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handleRetry, message } = useMessageContext();
       const { t } = useTranslationContext();
@@ -317,6 +301,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Edit() {
+      const { IconEdit } = useComponentContextIcons();
       const messageComposer = useMessageComposerController();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
@@ -338,6 +323,7 @@ const DefaultMessageActionComponents = {
       );
     },
     MarkUnread() {
+      const { IconNotification } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handleMarkUnread, message } = useMessageContext();
       const { addNotification } = useNotificationApi();
@@ -392,6 +378,7 @@ const DefaultMessageActionComponents = {
       );
     },
     RemindMe() {
+      const { IconBell, IconBellOff } = useComponentContextIcons();
       const { closeMenu, openSubmenu } = useContextMenuContext();
       const { client } = useChatContext();
       const { addNotification } = useNotificationApi();
@@ -455,6 +442,7 @@ const DefaultMessageActionComponents = {
       );
     },
     SaveForLater() {
+      const { IconBookmark, IconBookmarkRemove } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { client } = useChatContext();
       const { addNotification } = useNotificationApi();
@@ -532,6 +520,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Flag() {
+      const { IconFlag } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handleFlag, message } = useMessageContext();
       const { addNotification } = useNotificationApi();
@@ -580,6 +569,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Mute() {
+      const { IconAudio, IconMute } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { handleMute, message } = useMessageContext();
       const { addNotification } = useNotificationApi();
@@ -639,6 +629,7 @@ const DefaultMessageActionComponents = {
       );
     },
     Delete() {
+      const { IconDelete } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { addNotification } = useNotificationApi();
       const { Modal = GlobalModal } = useComponentContext();
@@ -704,6 +695,7 @@ const DefaultMessageActionComponents = {
       );
     },
     BlockUser() {
+      const { IconNoSign, IconUserCheck } = useComponentContextIcons();
       const { closeMenu } = useContextMenuContext();
       const { client } = useChatContext();
       const { message } = useMessageContext();
@@ -740,6 +732,7 @@ const DefaultMessageActionComponents = {
   quick: {
     // eslint-disable-next-line react/display-name
     DropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {
+      const { IconMore } = useComponentContextIcons();
       const { t } = useTranslationContext();
       const { message, threadList } = useMessageContext();
       const dropdownDialogIsOpen = useDialogIsOpen(
@@ -779,9 +772,12 @@ const DefaultMessageActionComponents = {
       );
     }),
     React() {
-      return <ReactionSelectorWithButton ReactionIcon={IconEmoji} />;
+      // No `ReactionIcon`: the component resolves the `IconEmoji` slot itself. Passing it from
+      // here would read the same value and only add a hop that invites a direct import later.
+      return <ReactionSelectorWithButton />;
     },
     Reply() {
+      const { IconReply } = useComponentContextIcons();
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
 
diff --git a/src/components/MessageActions/RemindMeSubmenu.tsx b/src/components/MessageActions/RemindMeSubmenu.tsx
index f90c8c243..f396008d6 100644
--- a/src/components/MessageActions/RemindMeSubmenu.tsx
+++ b/src/components/MessageActions/RemindMeSubmenu.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { useChatContext, useMessageContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContextIcons,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import { useNotificationApi } from '../Notifications';
 import {
   ContextMenuBackButton,
@@ -7,7 +12,6 @@ import {
   ContextMenuHeader,
   useContextMenuContext,
 } from '../Dialog';
-import { IconChevronLeft } from '../Icons';
 
 const getErrorMessage = (error: unknown, fallback: string) =>
   error instanceof Error && error.message ? error.message : fallback;
@@ -23,6 +27,7 @@ const getNotificationError = (error: unknown): Error | undefined => {
 };
 
 export const RemindMeSubmenuHeader = () => {
+  const { IconChevronLeft } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { returnToParentMenu } = useContextMenuContext();
   return (
diff --git a/src/components/MessageBounce/MessageBouncePrompt.tsx b/src/components/MessageBounce/MessageBouncePrompt.tsx
index 528776cac..87171900b 100644
--- a/src/components/MessageBounce/MessageBouncePrompt.tsx
+++ b/src/components/MessageBounce/MessageBouncePrompt.tsx
@@ -1,12 +1,12 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 import {
+  useComponentContextIcons,
   useMessageBounceContext,
   useModalContext,
   useTranslationContext,
 } from '../../context';
 import { Button } from '../Button';
-import { IconExclamationMark } from '../Icons';
 import { Alert } from '../Dialog';
 import type { PropsWithChildrenOnly } from '../../types/types';
 
@@ -14,6 +14,7 @@ export type MessageBouncePromptProps = PropsWithChildrenOnly;
 
 // todo: shall we rename this to MessageBounceAlert?
 export function MessageBouncePrompt({ children }: MessageBouncePromptProps) {
+  const { IconExclamationMark } = useComponentContextIcons();
   const { handleDelete, handleEdit, handleRetry } = useMessageBounceContext();
   const { t } = useTranslationContext();
   const { close } = useModalContext();
diff --git a/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
index 87b766672..3cf1d4df6 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
@@ -4,13 +4,12 @@ import {
   type LocalAudioAttachment,
   type LocalVoiceRecordingAttachment,
 } from 'stream-chat';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
-import { IconExclamationMark, IconExclamationTriangleFill } from '../../Icons';
 import { PlayButton } from '../../Button';
 import {
   type AudioPlayerState,
@@ -41,6 +40,7 @@ export const AudioAttachmentPreview = ({
   handleRetry,
   removeAttachments,
 }: AudioAttachmentPreviewProps) => {
+  const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
diff --git a/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
index 65b4a4ec7..4c2bf346a 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import { FileIcon } from '../../FileIcon';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
@@ -7,7 +7,6 @@ import type { LocalAudioAttachment, LocalFileAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
-import { IconExclamationMark, IconExclamationTriangleFill } from '../../Icons';
 
 export type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> =
   UploadAttachmentPreviewProps<
@@ -19,6 +18,7 @@ export const FileAttachmentPreview = ({
   handleRetry,
   removeAttachments,
 }: FileAttachmentPreviewProps) => {
+  const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { id, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
diff --git a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
index 1c9d996a0..444dc7da8 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
@@ -2,18 +2,22 @@ import type { LiveLocationPreview, StaticLocationPreview } from 'stream-chat';
 import type { ComponentType } from 'react';
 import React from 'react';
 import { useTranslationContext } from '../../../context';
-import { IconLocation } from '../../Icons';
+import { useComponentContextIcons } from '../../../context';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 
 type GeolocationPreviewImageProps = {
   location: StaticLocationPreview | LiveLocationPreview;
 };
 
-const GeolocationPreviewImage = () => (
-  <div className='str-chat__location-preview-image'>
-    <IconLocation />
-  </div>
-);
+const GeolocationPreviewImage = () => {
+  const { IconLocation } = useComponentContextIcons();
+
+  return (
+    <div className='str-chat__location-preview-image'>
+      <IconLocation />
+    </div>
+  );
+};
 
 export type GeolocationPreviewProps = {
   location: StaticLocationPreview | LiveLocationPreview;
diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
index 951727d04..70c4cd814 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -4,7 +4,11 @@ import {
   type LocalImageAttachment,
   type LocalVideoAttachment,
 } from 'stream-chat';
-import { useComponentContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../context';
 import { BaseImage as DefaultBaseImage } from '../../BaseImage';
 import React, {
   type KeyboardEvent,
@@ -14,7 +18,6 @@ import React, {
   useState,
 } from 'react';
 import clsx from 'clsx';
-import { IconExclamationMark, IconRetry } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
@@ -34,6 +37,7 @@ export const MediaAttachmentPreview = ({
   openPreview,
   removeAttachments,
 }: MediaAttachmentPreviewProps) => {
+  const { IconExclamationMark, IconRetry } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { BaseImage = DefaultBaseImage } = useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
diff --git a/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
index 857efea57..4e16ed5d2 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type { AnyLocalAttachment, LocalUploadAttachment } from 'stream-chat';
-import { IconUnsupportedAttachment } from '../../Icons';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 
 export type UnsupportedAttachmentPreviewProps<
@@ -18,6 +17,7 @@ export const UnsupportedAttachmentPreview = ({
   attachment,
   removeAttachments,
 }: UnsupportedAttachmentPreviewProps) => {
+  const { IconUnsupportedAttachment } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { id } = attachment.localMetadata ?? {};
 
diff --git a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
index 177f40c3e..0910ac614 100644
--- a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
+++ b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
@@ -27,7 +27,12 @@ import { ShareLocationDialog as DefaultLocationDialog } from '../../Location';
 import { PollCreationDialog as DefaultPollCreationDialog } from '../../Poll';
 import { Portal } from '../../Portal/Portal';
 import { UploadFileInput } from '../../ReactFileUtilities';
-import { useChannel, useComponentContext, useTranslationContext } from '../../../context';
+import {
+  useChannel,
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../context';
 import {
   AttachmentSelectorContextProvider,
   useAttachmentSelectorContext,
@@ -38,13 +43,6 @@ import { useStateStore } from '../../../store';
 import type { TextComposerState } from 'stream-chat';
 import clsx from 'clsx';
 import { Button, type ButtonProps } from '../../Button';
-import {
-  IconAttachment,
-  IconCommand,
-  IconLocation,
-  IconPlus,
-  IconPoll,
-} from '../../Icons';
 import { useIsCooldownActive } from '../hooks/useIsCooldownActive';
 import {
   CommandsMenu,
@@ -62,6 +60,7 @@ const textComposerStateSelector = ({ command }: TextComposerState) => ({ command
 
 const AttachmentSelectorMenuInitButtonIcon = ({ className }: { className?: string }) => {
   const { AttachmentSelectorInitiationButtonContents } = useComponentContext();
+  const { IconPlus } = useComponentContextIcons();
 
   if (AttachmentSelectorInitiationButtonContents) {
     return (
@@ -175,6 +174,7 @@ export type AttachmentSelectorActionProps = {
 export const DefaultAttachmentSelectorComponents = {
   Command({ submenuHeader, submenuItems }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { IconCommand } = useComponentContextIcons();
     const { openSubmenu } = useContextMenuContext();
     const commands = useMessageComposerCommands();
     const hasEnabledCommands = commands.some(({ enabled }) => enabled);
@@ -202,6 +202,7 @@ export const DefaultAttachmentSelectorComponents = {
   },
   File() {
     const { t } = useTranslationContext();
+    const { IconAttachment } = useComponentContextIcons();
     const { fileInput } = useAttachmentSelectorContext();
     const { closeMenu } = useContextMenuContext();
 
@@ -220,6 +221,7 @@ export const DefaultAttachmentSelectorComponents = {
   },
   Location({ openModalForAction }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { IconLocation } = useComponentContextIcons();
     const { closeMenu } = useContextMenuContext();
     return (
       <ContextMenuButton
@@ -236,6 +238,7 @@ export const DefaultAttachmentSelectorComponents = {
   },
   Poll({ openModalForAction }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { IconPoll } = useComponentContextIcons();
     const { closeMenu } = useContextMenuContext();
     return (
       <ContextMenuButton
diff --git a/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx b/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
index 34969ea81..d0a3d8caa 100644
--- a/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
+++ b/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
@@ -1,6 +1,10 @@
 import React, { type ComponentProps, type ComponentType, useMemo } from 'react';
 import type { Command } from 'stream-chat';
-import { useMessageComposerContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContextIcons,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import { useMessageComposerCommands, useMessageComposerController } from '../hooks';
 import {
   ContextMenuBackButton,
@@ -8,33 +12,16 @@ import {
   ContextMenuHeader,
   useContextMenuContext,
 } from '../../Dialog';
-import {
-  IconAudio,
-  IconChevronLeft,
-  IconFlag,
-  IconGiphy,
-  IconMute,
-  IconUserAdd,
-  IconUserRemove,
-} from '../../Icons';
 import { useInteractionAnnouncements } from '../../Accessibility';
 import clsx from 'clsx';
 import { asDynamicKey } from '../../../i18n/utils';
 
-const icons: Record<string, ComponentType> = {
-  ban: IconUserRemove,
-  flag: IconFlag,
-  giphy: IconGiphy,
-  mute: IconMute,
-  unban: IconUserAdd,
-  unmute: IconAudio,
-};
-
 export const CommandsMenuClassName = 'str-chat__context-menu--commands';
 
 export const CommandsSubmenuHeader = () => {
   const { t } = useTranslationContext();
   const { returnToParentMenu } = useContextMenuContext();
+  const { IconChevronLeft } = useComponentContextIcons();
   return (
     <ContextMenuHeader className='str-chat__context-menu__header--commands str-chat__context-menu__header--submenu-commands'>
       <ContextMenuBackButton
@@ -150,6 +137,18 @@ export const CommandContextMenuItem = ({
     [description, details],
   );
 
+  const { IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove } =
+    useComponentContextIcons();
+
+  const icons: Record<string, ComponentType> = {
+    ban: IconUserRemove,
+    flag: IconFlag,
+    giphy: IconGiphy,
+    mute: IconMute,
+    unban: IconUserAdd,
+    unmute: IconAudio,
+  };
+
   return (
     <ContextMenuButton
       aria-label={ariaLabel}
diff --git a/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx b/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
index bb76d5db3..fb4dd5737 100644
--- a/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
+++ b/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
@@ -23,10 +23,16 @@ vi.mock('../../../Dialog', async (importOriginal) => ({
   useContextMenuContext: () => ({ closeMenu, returnToParentMenu }),
 }));
 
-vi.mock('../../../../context', () => ({
-  useMessageComposerContext: () => ({ textareaRef: { current: null } }),
-  useTranslationContext: () => ({ t }),
-}));
+vi.mock('../../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../context')>();
+  return {
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useMessageComposerContext: () => ({ textareaRef: { current: null } }),
+    useTranslationContext: () => ({ t }),
+  };
+});
 
 vi.mock('../../hooks', () => ({
   useMessageComposerCommands: () => commandsMock.value,
diff --git a/src/components/MessageComposer/CommandChip.tsx b/src/components/MessageComposer/CommandChip.tsx
index 33d4f6d17..440640fa4 100644
--- a/src/components/MessageComposer/CommandChip.tsx
+++ b/src/components/MessageComposer/CommandChip.tsx
@@ -1,13 +1,17 @@
 import { useMessageComposerController } from './hooks';
 import type { TextComposerState } from 'stream-chat';
-import { IconBolt, IconXmark } from '../Icons';
-import { useMessageComposerContext, useTranslationContext } from '../../context';
+import {
+  useComponentContextIcons,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 
 export type CommandChipProps = {
   command?: TextComposerState['command'];
 };
 
 export const CommandChip = ({ command }: CommandChipProps) => {
+  const { IconBolt, IconXmark } = useComponentContextIcons();
   const { textComposer } = useMessageComposerController();
   const { textareaRef } = useMessageComposerContext();
   const { t } = useTranslationContext();
diff --git a/src/components/MessageComposer/LinkPreviewList.tsx b/src/components/MessageComposer/LinkPreviewList.tsx
index 743d8e7fe..bfe57e862 100644
--- a/src/components/MessageComposer/LinkPreviewList.tsx
+++ b/src/components/MessageComposer/LinkPreviewList.tsx
@@ -8,7 +8,7 @@ import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useMessageComposerController } from './hooks';
 import { BaseImage } from '../BaseImage';
 import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';
-import { IconLink } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type LinkPreviewListProps = {
   displayLinkCount?: number;
@@ -46,6 +46,7 @@ type LinkPreviewProps = {
 };
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
+  const { IconLink } = useComponentContextIcons();
   const { linkPreviewsManager } = useMessageComposerController();
   const { handleEnter, handleLeave, tooltipVisible } =
     useEnterLeaveHandlers<HTMLDivElement>();
diff --git a/src/components/MessageComposer/MessageComposerActions.tsx b/src/components/MessageComposer/MessageComposerActions.tsx
index b1498fb34..7aa56aa09 100644
--- a/src/components/MessageComposer/MessageComposerActions.tsx
+++ b/src/components/MessageComposer/MessageComposerActions.tsx
@@ -5,6 +5,7 @@ import { SendButton as DefaultSendButton } from './SendButton';
 import {
   useChannel,
   useComponentContext,
+  useComponentContextIcons,
   useMessageComposerContext,
 } from '../../context';
 import { useAIState } from '../AIStateIndicator';
@@ -19,7 +20,6 @@ import { useIsCooldownActive } from './hooks/useIsCooldownActive';
 import { AIStates } from 'stream-chat';
 import type { AIState, MessageComposerState, TextComposerState } from 'stream-chat';
 import { useStateStore } from '../../store';
-import { IconCheckmark, IconSend } from '../Icons';
 import { useInertWhenHidden } from '../Accessibility';
 
 // `AIStates` is imported from its owner rather than through the `../AIStateIndicator` barrel: that
@@ -39,6 +39,7 @@ const textComposerStateSelector = ({ command, text }: TextComposerState) => ({
 });
 
 export const MessageComposerActions = () => {
+  const { IconCheckmark, IconSend } = useComponentContextIcons();
   const channel = useChannel();
   const { hideSendButton } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
diff --git a/src/components/MessageComposer/QuotedMessagePreview.tsx b/src/components/MessageComposer/QuotedMessagePreview.tsx
index 8e46f99b5..7b9364a1f 100644
--- a/src/components/MessageComposer/QuotedMessagePreview.tsx
+++ b/src/components/MessageComposer/QuotedMessagePreview.tsx
@@ -35,23 +35,14 @@ import {
 import { useAttachmentContext } from '../../context/AttachmentContext';
 import type { MessageContextValue } from '../../context';
 import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';
-import {
-  IconCamera,
-  IconFile,
-  IconLink,
-  IconLocation,
-  IconNoSign,
-  IconPlayFill,
-  IconPoll,
-  IconVideo,
-  IconVoice,
-} from '../Icons';
 import clsx from 'clsx';
 import { BaseImage } from '../BaseImage';
 import { FileIcon } from '../FileIcon';
 import { QuotedMessageIndicator } from './QuotedMessageIndicator';
 import { getRenderTextMentionEntities } from '../Message/renderText/rehypePlugins';
 import { isDeletedMessage } from '../MessageList';
+import { useComponentContextIcons } from '../../context';
+import type { IconSlots } from '../Icons/slots';
 
 const messageComposerStateStoreSelector = (state: MessageComposerState) => ({
   quotedMessage: state.quotedMessage,
@@ -174,12 +165,26 @@ type PreviewType =
 const getAttachmentIconWithType = (
   quotedMessage: LocalMessage | MessageResponse | null,
   giphyVersionName: GiphyVersions,
+  // Icons arrive as an argument rather than from the hook: this is a plain helper, called from a
+  // `useMemo` inside the component, so it is not a place a hook may run.
+  icons: Required<IconSlots>,
 ): {
   groupedAttachments: GroupedAttachments;
   Icon: ComponentType;
   PreviewImage: ReactElement | null;
   previewType: PreviewType | null;
 } => {
+  const {
+    IconCamera,
+    IconFile,
+    IconLink,
+    IconLocation,
+    IconNoSign,
+    IconPlayFill,
+    IconPoll,
+    IconVideo,
+    IconVoice,
+  } = icons;
   const groupedAttachments = getGroupedAttachments(quotedMessage);
   const result = {
     groupedAttachments,
@@ -341,6 +346,7 @@ export const QuotedMessagePreviewUI = ({
   // MERGE-RECONCILE: `giphyVersion` was read from the deleted ChannelStateContext;
   // migrated to the PR's source (useAttachmentContext().giphyVersion — same as Giphy.tsx).
   const { giphyVersion: giphyVersionName = 'fixed_height' } = useAttachmentContext();
+  const icons = useComponentContextIcons();
 
   const quotedMessageText = useMemo(
     () =>
@@ -374,7 +380,7 @@ export const QuotedMessagePreviewUI = ({
       Icon: AttachmentIcon,
       PreviewImage,
       previewType,
-    } = getAttachmentIconWithType(quotedMessage, giphyVersionName);
+    } = getAttachmentIconWithType(quotedMessage, giphyVersionName, icons);
 
     let renderedText: ReactNode | undefined;
 
@@ -444,6 +450,7 @@ export const QuotedMessagePreviewUI = ({
     };
   }, [
     giphyVersionName,
+    icons,
     quotedMessage,
     quotedMessageMentionEntities,
     quotedMessageText,
diff --git a/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx b/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
index 234b75ca7..34e2b2c7f 100644
--- a/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
+++ b/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import { IconXmarkSmall } from '../Icons';
 import { Button } from '../Button';
 import React, { type ComponentProps } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import type { AttachmentLoadingState } from 'stream-chat';
 
 export const RemoveAttachmentPreviewButton = ({
@@ -12,6 +11,7 @@ export const RemoveAttachmentPreviewButton = ({
 }: ComponentProps<'button'> & {
   uploadState?: AttachmentLoadingState;
 }) => {
+  const { IconXmarkSmall } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <Button
diff --git a/src/components/MessageComposer/SendButton.tsx b/src/components/MessageComposer/SendButton.tsx
index a32a86109..47d917e97 100644
--- a/src/components/MessageComposer/SendButton.tsx
+++ b/src/components/MessageComposer/SendButton.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useMessageComposerHasSendableData } from './hooks';
-import { useTranslationContext } from '../../context';
-import { IconSend } from '../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { Button } from '../Button';
 
 export type SendButtonProps = {
@@ -9,6 +8,7 @@ export type SendButtonProps = {
 } & React.ComponentProps<'button'>;
 
 export const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps) => {
+  const { IconSend } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const hasSendableData = useMessageComposerHasSendableData();
   return (
diff --git a/src/components/MessageComposer/SendToChannelCheckbox.tsx b/src/components/MessageComposer/SendToChannelCheckbox.tsx
index 621cb5b83..e7abe32de 100644
--- a/src/components/MessageComposer/SendToChannelCheckbox.tsx
+++ b/src/components/MessageComposer/SendToChannelCheckbox.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx';
 import React from 'react';
 import { useMessageComposerController } from './hooks';
-import { IconCheckmark } from '../Icons';
 import type { MessageComposerState } from 'stream-chat';
 import { useStateStore } from '../../store';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 const stateSelector = (state: MessageComposerState) => ({
   showReplyInChannel: state.showReplyInChannel,
 });
 
 export const SendToChannelCheckbox = () => {
+  const { IconCheckmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposerController();
   const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
diff --git a/src/components/MessageComposer/WithDragAndDropUpload.tsx b/src/components/MessageComposer/WithDragAndDropUpload.tsx
index ff2ed4089..951ad4654 100644
--- a/src/components/MessageComposer/WithDragAndDropUpload.tsx
+++ b/src/components/MessageComposer/WithDragAndDropUpload.tsx
@@ -4,11 +4,14 @@ import { useDropzone } from 'react-dropzone';
 import clsx from 'clsx';
 import type { MessageComposerConfig } from 'stream-chat';
 
-import { useIsWithinMessageComposerContext, useTranslationContext } from '../../context';
+import {
+  useComponentContextIcons,
+  useIsWithinMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 import { useAttachmentManagerState, useMessageComposerController } from './hooks';
 import { useStateStore } from '../../store';
 import { useIsCooldownActive } from './hooks/useIsCooldownActive';
-import { IconUpload } from '../Icons';
 
 const DragAndDropUploadContext = React.createContext<{
   subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
@@ -156,6 +159,7 @@ export type FileDragAndDropContentProps = {
 export const FileDragAndDropContent = ({
   isDragRejected,
 }: FileDragAndDropContentProps) => {
+  const { IconUpload } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__dropzone-container__content'>
diff --git a/src/components/MessageComposer/__tests__/CommandChip.test.tsx b/src/components/MessageComposer/__tests__/CommandChip.test.tsx
index 2799faf68..765c28b9c 100644
--- a/src/components/MessageComposer/__tests__/CommandChip.test.tsx
+++ b/src/components/MessageComposer/__tests__/CommandChip.test.tsx
@@ -13,36 +13,42 @@ vi.mock('../hooks', () => ({
   }),
 }));
 
-vi.mock('../../../context', () => ({
-  useMessageComposerContext: () => ({
-    textareaRef: {
-      current: {
-        focus: focusMock,
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useMessageComposerContext: () => ({
+      textareaRef: {
+        current: {
+          focus: focusMock,
+        },
       },
-    },
-  }),
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+    }),
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 describe('CommandChip', () => {
   beforeEach(() => {
diff --git a/src/components/MessageList/ScrollToLatestMessageButton.tsx b/src/components/MessageList/ScrollToLatestMessageButton.tsx
index ce0cd8062..9c8606a04 100644
--- a/src/components/MessageList/ScrollToLatestMessageButton.tsx
+++ b/src/components/MessageList/ScrollToLatestMessageButton.tsx
@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from 'react';
 
-import { useChannel, useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { useThreadContext } from '../Threads/ThreadContext';
 import { useStateStore } from '../../store';
 
 import type { EventPayload, ThreadState } from 'stream-chat';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
-import { IconArrowDown } from '../Icons';
 
 export type ScrollToLatestMessageButtonProps = {
   /** When true, user has jumped to an older message set and newer messages can be loaded */
@@ -23,6 +27,7 @@ const threadStateSelector = ({ parentMessage }: ThreadState) => ({
 const UnMemoizedScrollToLatestMessageButton = (
   props: ScrollToLatestMessageButtonProps,
 ) => {
+  const { IconArrowDown } = useComponentContextIcons();
   const {
     isMessageListScrolledToBottom,
     isNotAtLatestMessageSet = false,
diff --git a/src/components/MessageList/UnreadMessagesNotification.tsx b/src/components/MessageList/UnreadMessagesNotification.tsx
index a36cdba3d..b8f67a924 100644
--- a/src/components/MessageList/UnreadMessagesNotification.tsx
+++ b/src/components/MessageList/UnreadMessagesNotification.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
-import { useChannel, useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { useMessagePaginator } from '../../hooks';
 import { Button } from '../Button';
-import { IconArrowUp, IconXmark } from '../Icons';
 import clsx from 'clsx';
 import { useThreadContext } from '../Threads';
 import type { UnreadSnapshotState } from 'stream-chat';
@@ -29,6 +33,7 @@ export const UnreadMessagesNotification = ({
   queryMessageLimit,
   showCount = true,
 }: UnreadMessagesNotificationProps) => {
+  const { IconArrowUp, IconXmark } = useComponentContextIcons();
   // todo: move into a hook dedicated to unread count from the snapshot
   const channel = useChannel();
   const { client } = useChatContext();
diff --git a/src/components/MessageList/UnreadMessagesSeparator.tsx b/src/components/MessageList/UnreadMessagesSeparator.tsx
index 54f3f4ba4..8c0a3fcbf 100644
--- a/src/components/MessageList/UnreadMessagesSeparator.tsx
+++ b/src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { useChannel, useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
 import { useMessagePaginator } from '../../hooks';
 
 export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
@@ -21,6 +25,7 @@ export const UnreadMessagesSeparator = ({
   showCount = true,
   unreadCount,
 }: UnreadMessagesSeparatorProps) => {
+  const { IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const channel = useChannel();
   const { client } = useChatContext();
diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx
index 330c8f191..8adbb2ce0 100644
--- a/src/components/Modal/CloseButtonOnModalOverlay.tsx
+++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx
@@ -1,5 +1,5 @@
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 import type { ComponentProps } from 'react';
 import clsx from 'clsx';
 
@@ -8,13 +8,17 @@ export const CloseButtonOnModalOverlay = ({
   children,
   className,
   ...props
-}: ComponentProps<'button'>) => (
-  <Button
-    appearance='ghost'
-    circular
-    className={clsx('str-chat__modal__overlay__close-button', className)}
-    {...props}
-  >
-    {children ?? <IconXmark />}
-  </Button>
-);
+}: ComponentProps<'button'>) => {
+  const { IconXmark } = useComponentContextIcons();
+
+  return (
+    <Button
+      appearance='ghost'
+      circular
+      className={clsx('str-chat__modal__overlay__close-button', className)}
+      {...props}
+    >
+      {children ?? <IconXmark />}
+    </Button>
+  );
+};
diff --git a/src/components/Notifications/Notification.tsx b/src/components/Notifications/Notification.tsx
index 2707c247e..e0c4b87e4 100644
--- a/src/components/Notifications/Notification.tsx
+++ b/src/components/Notifications/Notification.tsx
@@ -3,13 +3,7 @@ import clsx from 'clsx';
 import type { NotificationSeverity } from 'stream-chat';
 import { type Notification as NotificationType } from 'stream-chat';
 
-import {
-  IconCheckmark,
-  IconExclamationMark,
-  IconExclamationTriangleFill,
-  IconRefresh,
-  IconXmark,
-} from '../../components/Icons';
+import { useComponentContextIcons } from '../../context';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { Button } from '../Button';
 import { useNotificationApi } from './hooks/useNotificationApi';
@@ -21,15 +15,18 @@ export type NotificationIconProps = {
   notification: NotificationType;
 };
 
-const IconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {
-  error: IconExclamationMark,
-  info: null,
-  loading: IconRefresh,
-  success: IconCheckmark,
-  warning: IconExclamationTriangleFill,
-};
-
 const DefaultNotificationIcon = ({ notification }: NotificationIconProps) => {
+  const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } =
+    useComponentContextIcons();
+
+  const IconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {
+    error: IconExclamationMark,
+    info: null,
+    loading: IconRefresh,
+    success: IconCheckmark,
+    warning: IconExclamationTriangleFill,
+  };
+
   if (!notification.severity) return null;
 
   const Icon = IconsBySeverity[notification.severity] ?? null;
@@ -74,6 +71,7 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
   ) => {
     const { removeNotification } = useNotificationApi();
     const { t } = useTranslationContext();
+    const { IconXmark } = useComponentContextIcons();
 
     const displayMessage = t('translationBuilderTopic.notification', {
       notification,
diff --git a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
index af4d42b26..a81e2052f 100644
--- a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import { useStateStore } from '../../../../store';
-import { usePollContext, useTranslationContext } from '../../../../context';
+import {
+  useComponentContextIcons,
+  usePollContext,
+  useTranslationContext,
+} from '../../../../context';
 import type { PollOptionResponseData, PollState } from 'stream-chat';
-import { IconTrophy } from '../../../Icons';
 
 type PollStateSelectorReturnValue = {
   maxVotedOptionIds: string[];
@@ -20,6 +23,7 @@ export type PollResultOptionVoteCounterProps = {
 export const PollResultOptionVoteCounter = ({
   optionId,
 }: PollResultOptionVoteCounterProps) => {
+  const { IconTrophy } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { poll } = usePollContext();
   const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(
diff --git a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
index d2ecba5d4..570ca0aab 100644
--- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
+++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
@@ -10,7 +10,7 @@ import type {
   PollComposerState,
   PollComposerValidationCode,
 } from 'stream-chat';
-import { IconMinusCircle } from '../../Icons';
+import { useComponentContextIcons } from '../../../context';
 import { Button, type ButtonProps } from '../../Button';
 import { TextInputFieldSet } from '../../Form/TextInputFieldSet';
 import { VisuallyHidden } from '../../VisuallyHidden';
@@ -308,15 +308,19 @@ export const OptionFieldSet = () => {
   );
 };
 
-const RemoveOptionButton = ({ className, ...props }: ButtonProps) => (
-  <Button
-    appearance='ghost'
-    circular
-    className={clsx('str-chat__form__remove-option-button', className)}
-    size='xs'
-    variant='secondary'
-    {...props}
-  >
-    <IconMinusCircle />
-  </Button>
-);
+const RemoveOptionButton = ({ className, ...props }: ButtonProps) => {
+  const { IconMinusCircle } = useComponentContextIcons();
+
+  return (
+    <Button
+      appearance='ghost'
+      circular
+      className={clsx('str-chat__form__remove-option-button', className)}
+      size='xs'
+      variant='secondary'
+      {...props}
+    >
+      <IconMinusCircle />
+    </Button>
+  );
+};
diff --git a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
index 46be807d0..89de0588d 100644
--- a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
+++ b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import { flushSync } from 'react-dom';
 import { useCanCreatePoll } from '../../MessageComposer/hooks/useCanCreatePoll';
 import { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';
-import { useMessageComposerContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContextIcons,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import clsx from 'clsx';
-import { IconSend } from '../../Icons';
 import { Prompt } from '../../Dialog';
 import { useSendMessageFn } from '../../MessageComposer/hooks/useSendMessageFn';
 import { useNotificationApi } from '../../Notifications';
@@ -16,6 +19,7 @@ export type PollCreationDialogControlsProps = {
 export const PollCreationDialogControls = ({
   close,
 }: PollCreationDialogControlsProps) => {
+  const { IconSend } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { textareaRef } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
diff --git a/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx b/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
index f2fdecaaa..bd68bd3df 100644
--- a/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
+++ b/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
@@ -2,9 +2,8 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import React, { useEffect, useRef } from 'react';
 import type { PollComposerOption } from 'stream-chat';
 
-import { IconReorder } from '../../Icons';
 import { useAriaLiveAnnouncer } from '../../Accessibility';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 
 type PollOptionReorderHandleProps = {
   index: number;
@@ -30,6 +29,7 @@ export const PollOptionReorderHandle = ({
   registerRef,
   totalOptionCount,
 }: PollOptionReorderHandleProps) => {
+  const { IconReorder } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const announce = useAriaLiveAnnouncer();
   const hasAnnouncedFocusRef = useRef(false);
diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index c37a40ba0..2266ed995 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -10,12 +10,12 @@ import type { MessageContextValue } from '../../context';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
 import { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';
 import type { useProcessReactions } from './hooks/useProcessReactions';
-import { IconEmojiAdd } from '../Icons';
 import { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';
 
 export type MessageReactionsDetailProps = Partial<
@@ -65,6 +65,7 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
   selectedReactionType,
   totalReactionCount,
 }) => {
+  const { IconEmojiAdd } = useComponentContextIcons();
   const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
   const { client } = useChatContext();
   const {
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index 0aaa65763..90b07f063 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -7,9 +7,9 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { Button } from '../Button';
-import { IconPlus } from '../Icons';
 
 import type { ReactionResponse } from 'stream-chat';
+import { useComponentContextIcons } from '../../context';
 
 export type ReactionSelectorProps = {
   /** Override dialog id used by the selector popover. */
@@ -33,6 +33,7 @@ interface ReactionSelectorInterface {
 const stableOwnReactions: ReactionResponse[] = [];
 
 export const ReactionSelector: ReactionSelectorInterface = (props) => {
+  const { IconPlus } = useComponentContextIcons();
   const {
     dialogId: propDialogId,
     handleReaction: propHandleReaction,
diff --git a/src/components/Reactions/ReactionSelectorWithButton.tsx b/src/components/Reactions/ReactionSelectorWithButton.tsx
index 3ad3fdcc5..64e800869 100644
--- a/src/components/Reactions/ReactionSelectorWithButton.tsx
+++ b/src/components/Reactions/ReactionSelectorWithButton.tsx
@@ -4,6 +4,7 @@ import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector'
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import {
   useComponentContext,
+  useComponentContextIcons,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
@@ -12,8 +13,8 @@ import type { IconProps } from '../../types/types';
 import { QuickMessageActionsButton } from '../MessageActions';
 
 type ReactionSelectorWithButtonProps = {
-  /* Custom component rendering the icon used in a button invoking reactions selector for a given message. */
-  ReactionIcon: React.ComponentType<IconProps>;
+  /* Custom component rendering the icon used in a button invoking reactions selector for a given message. Defaults to the `icons.IconEmoji` slot on `ComponentContext`. */
+  ReactionIcon?: React.ComponentType<IconProps>;
 };
 
 /**
@@ -26,6 +27,9 @@ export const ReactionSelectorWithButton = ({
   const { t } = useTranslationContext();
   const { isMyMessage, message, threadList } = useMessageContext();
   const { ReactionSelector = DefaultReactionSelector } = useComponentContext();
+  const { IconEmoji } = useComponentContextIcons();
+  // The prop still wins: it targets one message's reaction button, the slot rebrands all of them.
+  const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;
   const buttonRef = useRef<ComponentRef<'button'>>(null);
   // MUST match the id `MessageActions` derives via `ReactionSelector.getDialogId` — it
   // uses that to keep `.str-chat__message-options--active` applied while the reaction
@@ -60,7 +64,7 @@ export const ReactionSelectorWithButton = ({
         onClick={() => dialog?.toggle()}
         ref={buttonRef}
       >
-        <ReactionIcon className='str-chat__message-action-icon' />
+        <ResolvedReactionIcon className='str-chat__message-action-icon' />
       </QuickMessageActionsButton>
     </>
   );
diff --git a/src/components/Reactions/__tests__/ReactionSelectorWithButton.test.tsx b/src/components/Reactions/__tests__/ReactionSelectorWithButton.test.tsx
index a2ea1a239..86f81b875 100644
--- a/src/components/Reactions/__tests__/ReactionSelectorWithButton.test.tsx
+++ b/src/components/Reactions/__tests__/ReactionSelectorWithButton.test.tsx
@@ -13,35 +13,41 @@ import { ReactionSelector } from '../ReactionSelector';
 
 const capturedDialogIds: string[] = [];
 
-vi.mock('../../../context', () => ({
-  useComponentContext: () => ({}),
-  useMessageContext: () => ({
-    isMyMessage: () => false,
-    message: { id: 'message-1' },
-    threadList: false,
-  }),
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    useComponentContext: () => ({}),
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useMessageContext: () => ({
+      isMyMessage: () => false,
+      message: { id: 'message-1' },
+      threadList: false,
+    }),
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 vi.mock('../../Dialog', () => ({
   DialogAnchor: () => null,
diff --git a/src/components/Search/SearchBar/SearchBar.tsx b/src/components/Search/SearchBar/SearchBar.tsx
index 56283d5ff..47e6e4eb3 100644
--- a/src/components/Search/SearchBar/SearchBar.tsx
+++ b/src/components/Search/SearchBar/SearchBar.tsx
@@ -4,9 +4,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useSearchContext } from '../SearchContext';
 import { useSearchQueriesInProgress } from '../hooks';
 import { useInteractionAnnouncements } from '../../Accessibility';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
-import { Button, IconSearch, IconXCircle } from '../../../components';
+import { Button } from '../../../components';
 
 import type { SearchControllerState } from 'stream-chat';
 
@@ -17,6 +17,7 @@ const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
 
 export const SearchBar = () => {
   const { t } = useTranslationContext();
+  const { IconSearch, IconXCircle } = useComponentContextIcons();
   const { announceInteraction } = useInteractionAnnouncements();
   const {
     containerRef,
diff --git a/src/components/Search/__tests__/Search.test.tsx b/src/components/Search/__tests__/Search.test.tsx
index b2d6e5db3..22c0a4e8c 100644
--- a/src/components/Search/__tests__/Search.test.tsx
+++ b/src/components/Search/__tests__/Search.test.tsx
@@ -7,8 +7,10 @@ import { Search } from '../Search';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../../context';
+import * as DEFAULT_ICONS from '../../Icons/icons';
 import type {
   ChatContextValue,
   ComponentContextValue,
@@ -72,6 +74,9 @@ describe('Search', () => {
       searchSourceTypes: [],
       sources: [],
     });
+    // The module is auto-mocked, so the icon hook would return undefined; hand back the real
+    // icons rather than stubs, so these tests keep asserting against what users actually see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
   });
 
   it('renders search container with default built-in components', () => {
diff --git a/src/components/Search/__tests__/SearchBar.test.tsx b/src/components/Search/__tests__/SearchBar.test.tsx
index 4699bbb40..f340d96b3 100644
--- a/src/components/Search/__tests__/SearchBar.test.tsx
+++ b/src/components/Search/__tests__/SearchBar.test.tsx
@@ -7,7 +7,8 @@ import { useSearchContext } from '../SearchContext';
 import type { SearchContextValue } from '../SearchContext';
 import { useSearchQueriesInProgress } from '../hooks';
 import type { TranslationContextValue } from '../../../context';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
+import * as DEFAULT_ICONS from '../../Icons/icons';
 import { useStateStore } from '../../../store';
 import { axe } from '../../../../axe-helper';
 import { mockT } from '../../../mock-builders/translator';
@@ -59,6 +60,9 @@ describe('SearchBar', () => {
       isActive: false,
       searchQuery: '',
     });
+    // The module is auto-mocked, so the icon hook would return undefined; hand back the real
+    // icons rather than stubs, so these tests keep asserting against what users actually see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
   });
 
   it('renders with default state', () => {
diff --git a/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
index 9944918c6..36ed4f4f5 100644
--- a/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
+++ b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
@@ -6,21 +6,7 @@ import {
   useLatestMessagePreview,
   type UseLatestMessagePreviewParams,
 } from './hooks/useLatestMessagePreview';
-import {
-  IconCamera,
-  IconCheckmark1Small,
-  IconChecks,
-  IconClock,
-  IconExclamationCircleFill,
-  IconFile,
-  IconGiphy,
-  IconLink,
-  IconLocation,
-  IconNoSign,
-  IconUnsupportedAttachment,
-  IconVideo,
-  IconVoice,
-} from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 /**
  * Props for {@link SummarizedMessagePreview}. Override the component via `ComponentContext`
@@ -29,33 +15,50 @@ import {
  */
 export type SummarizedMessagePreviewProps = UseLatestMessagePreviewParams;
 
-const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> = {
-  delivered: IconChecks,
-  read: IconChecks,
-  sending: IconClock,
-  sent: IconCheckmark1Small,
-};
-
-const contentTypeIconMap: Partial<
-  Record<ChannelPreviewMessageType, React.ComponentType>
-> = {
-  deleted: IconNoSign,
-  error: IconExclamationCircleFill,
-  file: IconFile,
-  giphy: IconGiphy,
-  image: IconCamera,
-  link: IconLink,
-  location: IconLocation,
-  unsupported: IconUnsupportedAttachment,
-  video: IconVideo,
-  voice: IconVoice,
-};
-
 export const SummarizedMessagePreview = ({
   latestMessage,
   messageDeliveryStatus,
   participantCount,
 }: UseLatestMessagePreviewParams) => {
+  const {
+    IconCamera,
+    IconCheckmark1Small,
+    IconChecks,
+    IconClock,
+    IconExclamationCircleFill,
+    IconFile,
+    IconGiphy,
+    IconLink,
+    IconLocation,
+    IconNoSign,
+    IconUnsupportedAttachment,
+    IconVideo,
+    IconVoice,
+  } = useComponentContextIcons();
+
+  const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> =
+    {
+      delivered: IconChecks,
+      read: IconChecks,
+      sending: IconClock,
+      sent: IconCheckmark1Small,
+    };
+
+  const contentTypeIconMap: Partial<
+    Record<ChannelPreviewMessageType, React.ComponentType>
+  > = {
+    deleted: IconNoSign,
+    error: IconExclamationCircleFill,
+    file: IconFile,
+    giphy: IconGiphy,
+    image: IconCamera,
+    link: IconLink,
+    location: IconLocation,
+    unsupported: IconUnsupportedAttachment,
+    video: IconVideo,
+    voice: IconVoice,
+  };
+
   const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({
     latestMessage,
     messageDeliveryStatus,
diff --git a/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx b/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
index f9e0aedca..7e4dc26cf 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';
-import { IconMegaphone } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
-import { useTranslationContext } from '../../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../../context';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
 
@@ -16,6 +15,7 @@ export const BroadcastMentionItem = ({
   focused,
   ...buttonProps
 }: BroadcastMentionItemProps) => {
+  const { IconMegaphone } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const description =
     entity.mentionType === 'channel'
diff --git a/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx b/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
index 3d5604bd4..3c83727bf 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { RoleMentionSuggestion } from 'stream-chat';
-import { IconShield } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
-import { useTranslationContext } from '../../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../../context';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
 import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
@@ -11,6 +10,7 @@ import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
 export type RoleItemProps = MentionItemComponentProps<RoleMentionSuggestion>;
 
 export const RoleItem = ({ entity, focused, ...buttonProps }: RoleItemProps) => {
+  const { IconShield } = useComponentContextIcons();
   void focused;
   const { t } = useTranslationContext();
   const role = entity.name;
diff --git a/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx b/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
index cad38aca7..8b2b970c9 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { UserGroupMentionSuggestion } from 'stream-chat';
-import { IconUsers } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
 import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
+import { useComponentContextIcons } from '../../../../context';
 
 export type UserGroupItemProps = MentionItemComponentProps<UserGroupMentionSuggestion>;
 
@@ -14,6 +14,7 @@ export const UserGroupItem = ({
   focused,
   ...buttonProps
 }: UserGroupItemProps) => {
+  const { IconUsers } = useComponentContextIcons();
   void focused;
 
   return (
diff --git a/src/components/TextareaComposer/__tests__/CommandItem.test.tsx b/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
index df239d7db..bac43363d 100644
--- a/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
+++ b/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
@@ -21,29 +21,35 @@ vi.mock('../../MessageComposer/hooks', () => ({
   }),
 }));
 
-vi.mock('../../../context', () => ({
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 afterEach(cleanup);
 
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index 7bc165de6..8c9b6ec88 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useChannel } from '../../context';
+import { useChannel, useComponentContextIcons } from '../../context';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useStateStore } from '../../store';
 import { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';
@@ -13,7 +13,6 @@ import { useComponentContext } from '../../context/ComponentContext';
 import type { EventPayload, LocalMessage } from 'stream-chat';
 import type { TextComposerState, ThreadState } from 'stream-chat';
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
 import { useWorkspaceNavigation } from '../../context';
 import type { ChannelConfig } from 'stream-chat';
 
@@ -85,6 +84,7 @@ export type ThreadHeaderProps = {
 };
 
 export const ThreadHeader = ({ overrideTitle }: ThreadHeaderProps) => {
+  const { IconXmark } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const channel = useChannel();
   const { HeaderStartContent } = useComponentContext();
diff --git a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
index e8d9ca67e..9a8e1b633 100644
--- a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
+++ b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { useTranslationContext } from '../../../context';
-import { IconMessageBubbles } from '../../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 
 export const ThreadListEmptyPlaceholder = () => {
+  const { IconMessageBubbles } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
index cc8286116..f03c5e367 100644
--- a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
+++ b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
@@ -3,8 +3,11 @@ import clsx from 'clsx';
 
 import type { ThreadManagerState } from 'stream-chat';
 
-import { IconRefresh } from '../../Icons';
-import { useChatContext, useTranslationContext } from '../../../context';
+import {
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../context';
 import { useStateStore } from '../../../store';
 import { LoadingIndicator } from '../../Loading';
 
@@ -14,6 +17,7 @@ const selector = (nextValue: ThreadManagerState) => ({
 });
 
 export const ThreadListUnseenThreadsBanner = () => {
+  const { IconRefresh } = useComponentContextIcons();
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const { isLoading, unseenThreadIds } = useStateStore(client.threads.state, selector);
diff --git a/src/components/VideoPlayer/VideoThumbnail.tsx b/src/components/VideoPlayer/VideoThumbnail.tsx
index 8b0471071..2674ee382 100644
--- a/src/components/VideoPlayer/VideoThumbnail.tsx
+++ b/src/components/VideoPlayer/VideoThumbnail.tsx
@@ -1,9 +1,8 @@
 import { BaseImage, type BaseImageProps } from '../BaseImage';
 import { Button } from '../Button';
 import clsx from 'clsx';
-import { IconPlayFill } from '../Icons';
 import React from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export type VideoThumbnailProps = BaseImageProps & {
   onPlay?: () => void;
@@ -14,6 +13,7 @@ export const VideoThumbnail = ({
   onPlay,
   ...imageProps
 }: VideoThumbnailProps) => {
+  const { IconPlayFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 0ea7b66b3..0ee07bdbc 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -81,6 +81,7 @@ import type { UploadedSizeIndicatorProps } from '../components/Loading/UploadedS
 import type { NotificationAnnouncerProps } from '../components/Accessibility';
 import type { SummarizedMessagePreviewProps } from '../components/SummarizedMessagePreview';
 import type { TypingIndicatorProps } from '../components/TypingIndicator';
+import type { IconSlots } from '../components/Icons/slots';
 
 export type ComponentContextValue = {
   /** Custom UI component rendered when a paginated list (e.g. the channel list) is empty. */
@@ -167,6 +168,8 @@ export type ComponentContextValue = {
   GiphyPreviewMessage?: React.ComponentType<GiphyPreviewMessageProps>;
   /** Custom UI component to render at the top of the `MessageList` */
   HeaderComponent?: React.ComponentType;
+  /** Overrides for the SDK's own icons, keyed by icon name. Merged per slot with the defaults, so overriding one icon leaves the rest intact. Read through [useComponentContextIcons](https://github.com/GetStream/stream-chat-react/blob/master/src/context/useComponentContextIcons.ts) */
+  icons?: IconSlots;
   /** Custom UI component handling how the message composer is rendered, defaults to and accepts the same props as [MessageComposerUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerUI.tsx) */
   MessageComposerUI?: React.ComponentType<MessageComposerProps>;
   /** Custom component to render link previews in message composer **/
diff --git a/src/context/WithComponents.tsx b/src/context/WithComponents.tsx
index 621d6fcb0..8ac2d4db0 100644
--- a/src/context/WithComponents.tsx
+++ b/src/context/WithComponents.tsx
@@ -14,7 +14,13 @@ export function WithComponents({
   // `useComponentContext()` consumer below it, which would defeat the per-message
   // memoization in `areMessagePropsEqual`.
   const actualOverrides: ComponentContextValue = useMemo(
-    () => ({ ...parentOverrides, ...overrides }),
+    () => ({
+      ...parentOverrides,
+      ...overrides,
+      // `icons` merges per slot rather than being replaced wholesale: a nested provider that
+      // rebrands one icon must not clear the ones an ancestor supplied.
+      icons: { ...parentOverrides?.icons, ...overrides?.icons },
+    }),
     [parentOverrides, overrides],
   );
   return (
diff --git a/src/context/__tests__/iconSlotIntegration.test.tsx b/src/context/__tests__/iconSlotIntegration.test.tsx
new file mode 100644
index 000000000..85978ed05
--- /dev/null
+++ b/src/context/__tests__/iconSlotIntegration.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { WithComponents } from '../WithComponents';
+import { ErrorBadge } from '../../components/Badge/Badge';
+import { LoadingIndicator } from '../../components/Loading/LoadingIndicator';
+import { CloseButtonOnModalOverlay } from '../../components/Modal/CloseButtonOnModalOverlay';
+import { ChannelDetailEmptyList } from '../../plugins/ChannelDetail/ChannelDetailEmptyList';
+
+/**
+ * R1 proves the hook merges correctly. This proves the other half: that converted call sites
+ * actually read through it, rather than still importing an icon directly.
+ */
+describe('icon slots reach converted call sites', () => {
+  const Custom = () => <svg data-testid='custom-icon' />;
+
+  it('renders the SDK icon with no override', () => {
+    render(<LoadingIndicator data-testid='loading' />);
+
+    expect(screen.getByTestId('loading')).toHaveClass('str-chat__loading-indicator');
+    expect(screen.queryByTestId('custom-icon')).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ['LoadingIndicator', 'IconLoading', <LoadingIndicator key='l' />],
+    ['ErrorBadge', 'IconExclamationMarkFill', <ErrorBadge key='e' />],
+    ['CloseButtonOnModalOverlay', 'IconXmark', <CloseButtonOnModalOverlay key='c' />],
+    // a v15-only plugin component, converted in R3
+    ['ChannelDetailEmptyList', 'IconSearch', <ChannelDetailEmptyList key='d' />],
+  ])('%s honours an %s override', (_name, slot, element) => {
+    render(
+      <WithComponents overrides={{ icons: { [slot]: Custom } }}>
+        {element}
+      </WithComponents>,
+    );
+
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  it('an override for one slot does not leak into a component using another', () => {
+    render(
+      <WithComponents overrides={{ icons: { IconLoading: Custom } }}>
+        <ErrorBadge />
+      </WithComponents>,
+    );
+
+    expect(screen.queryByTestId('custom-icon')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/context/__tests__/useComponentContextIcons.test.tsx b/src/context/__tests__/useComponentContextIcons.test.tsx
new file mode 100644
index 000000000..f116ac31d
--- /dev/null
+++ b/src/context/__tests__/useComponentContextIcons.test.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { render, renderHook, screen } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+
+import { useComponentContextIcons } from '../useComponentContextIcons';
+import { WithComponents } from '../WithComponents';
+import * as DEFAULT_ICONS from '../../components/Icons/icons';
+import type { IconSlots } from '../../components/Icons/slots';
+
+const CustomFlag = () => <svg data-testid='custom-flag' />;
+const CustomSend = () => <svg data-testid='custom-send' />;
+
+const withIcons = (icons: IconSlots) =>
+  function Wrapper({ children }: PropsWithChildren) {
+    return <WithComponents overrides={{ icons }}>{children}</WithComponents>;
+  };
+
+describe('useComponentContextIcons', () => {
+  it('returns the SDK icons when nothing is overridden', () => {
+    const { result } = renderHook(() => useComponentContextIcons());
+
+    expect(result.current.IconFlag).toBe(DEFAULT_ICONS.IconFlag);
+    expect(result.current.IconSend).toBe(DEFAULT_ICONS.IconSend);
+  });
+
+  it('covers every icon the SDK exports, so call sites can destructure without fallbacks', () => {
+    const { result } = renderHook(() => useComponentContextIcons());
+
+    const exported = Object.keys(DEFAULT_ICONS).sort();
+    expect(Object.keys(result.current).sort()).toEqual(exported);
+    expect(Object.values(result.current).every(Boolean)).toBe(true);
+  });
+
+  it('overriding one icon leaves its siblings intact', () => {
+    const { result } = renderHook(() => useComponentContextIcons(), {
+      wrapper: withIcons({ IconFlag: CustomFlag }),
+    });
+
+    expect(result.current.IconFlag).toBe(CustomFlag);
+    expect(result.current.IconSend).toBe(DEFAULT_ICONS.IconSend);
+  });
+
+  it('a nested provider merges with an ancestor rather than clearing it', () => {
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <WithComponents overrides={{ icons: { IconFlag: CustomFlag } }}>
+        <WithComponents overrides={{ icons: { IconSend: CustomSend } }}>
+          {children}
+        </WithComponents>
+      </WithComponents>
+    );
+
+    const { result } = renderHook(() => useComponentContextIcons(), { wrapper });
+
+    expect(result.current.IconFlag).toBe(CustomFlag);
+    expect(result.current.IconSend).toBe(CustomSend);
+  });
+
+  it('a nested provider wins for a slot the ancestor also set', () => {
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <WithComponents overrides={{ icons: { IconFlag: CustomFlag } }}>
+        <WithComponents overrides={{ icons: { IconFlag: CustomSend } }}>
+          {children}
+        </WithComponents>
+      </WithComponents>
+    );
+
+    const { result } = renderHook(() => useComponentContextIcons(), { wrapper });
+
+    expect(result.current.IconFlag).toBe(CustomSend);
+  });
+
+  it('a slot explicitly set to undefined falls back to the SDK icon', () => {
+    const { result } = renderHook(() => useComponentContextIcons(), {
+      wrapper: withIcons({ IconFlag: undefined }),
+    });
+
+    expect(result.current.IconFlag).toBe(DEFAULT_ICONS.IconFlag);
+  });
+
+  it('keeps each icon component stable across re-renders, so icon subtrees are not remounted', () => {
+    // What React compares when deciding to remount is the element type — the icon component
+    // itself — not the object holding it. That stays stable even when a consumer passes
+    // `overrides` inline and the containing object is rebuilt.
+    const { rerender, result } = renderHook(() => useComponentContextIcons(), {
+      wrapper: withIcons({ IconFlag: CustomFlag }),
+    });
+
+    const { IconFlag: firstFlag, IconSend: firstSend } = result.current;
+    rerender();
+
+    expect(result.current.IconFlag).toBe(firstFlag);
+    expect(result.current.IconSend).toBe(firstSend);
+  });
+
+  it('returns the same object across re-renders when the consumer memoizes its overrides', () => {
+    const overrides = { icons: { IconFlag: CustomFlag } };
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <WithComponents overrides={overrides}>{children}</WithComponents>
+    );
+    const { rerender, result } = renderHook(() => useComponentContextIcons(), {
+      wrapper,
+    });
+
+    const first = result.current;
+    rerender();
+
+    expect(result.current).toBe(first);
+  });
+
+  it('picks up an override swapped at runtime', () => {
+    // The reason this hook keys its memo on `icons` rather than on `[]`: a consumer that swaps an
+    // icon after mount must see the new one. Keyed on `[]` this assertion fails.
+    const Probe = () => {
+      const { IconFlag } = useComponentContextIcons();
+      return <IconFlag />;
+    };
+    const Tree = ({ icons }: { icons: IconSlots }) => (
+      <WithComponents overrides={{ icons }}>
+        <Probe />
+      </WithComponents>
+    );
+
+    const { rerender } = render(<Tree icons={{ IconFlag: CustomFlag }} />);
+    expect(screen.getByTestId('custom-flag')).toBeInTheDocument();
+
+    rerender(<Tree icons={{ IconFlag: CustomSend }} />);
+
+    expect(screen.queryByTestId('custom-flag')).not.toBeInTheDocument();
+    expect(screen.getByTestId('custom-send')).toBeInTheDocument();
+  });
+
+  it('a non-component override does not overwrite the SDK icon', () => {
+    const { result } = renderHook(() => useComponentContextIcons(), {
+      // a consumer computing overrides dynamically can hand us a hole
+      wrapper: withIcons({ IconFlag: null as unknown as IconSlots['IconFlag'] }),
+    });
+
+    expect(result.current.IconFlag).toBe(DEFAULT_ICONS.IconFlag);
+  });
+});
diff --git a/src/context/index.ts b/src/context/index.ts
index 803a0dc71..73a783e47 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -14,6 +14,7 @@ export * from './ModalContext';
 export * from './PollContext';
 export * from './TranslationContext';
 export * from './useChannel';
+export * from './useComponentContextIcons';
 export * from './VirtualizedMessageListContext';
 export * from './WithComponents';
 export * from './WorkspaceNavigationContext';
diff --git a/src/context/useComponentContextIcons.ts b/src/context/useComponentContextIcons.ts
new file mode 100644
index 000000000..6bec3739a
--- /dev/null
+++ b/src/context/useComponentContextIcons.ts
@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+import { useComponentContext } from './ComponentContext';
+import * as DEFAULT_ICONS from '../components/Icons/icons';
+import type { IconSlots } from '../components/Icons/slots';
+
+/**
+ * Reads the `icons` override from `ComponentContext` and merges it over the SDK's own icons. Every
+ * slot is guaranteed defined, so callers destructure without fallbacks:
+ *
+ * ```tsx
+ * const { IconFlag } = useComponentContextIcons();
+ * ```
+ *
+ * Overrides supplied via `<WithComponents overrides={{ icons: { … } }} />` win per slot; slots the
+ * consumer did not provide fall back to the SDK icon.
+ */
+export const useComponentContextIcons = (): Required<IconSlots> => {
+  const { icons } = useComponentContext();
+
+  // Keyed on `icons`, not on `[]`: `WithComponents` already memoizes the merged context value, so
+  // this identity is stable across renders and an override swapped at runtime is still picked up.
+  // Entries are filtered because a slot explicitly set to `undefined` must fall back to the SDK
+  // icon rather than spread a hole over it.
+  return useMemo(
+    () => ({
+      ...DEFAULT_ICONS,
+      ...Object.fromEntries(Object.entries(icons ?? {}).filter(([, Icon]) => !!Icon)),
+    }),
+    [icons],
+  );
+};
diff --git a/src/plugins/ChannelDetail/ChannelDetail.tsx b/src/plugins/ChannelDetail/ChannelDetail.tsx
index 05c2f3614..665e737e1 100644
--- a/src/plugins/ChannelDetail/ChannelDetail.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetail.tsx
@@ -18,33 +18,37 @@ import { ChannelMediaView } from './Views/ChannelMediaView';
 import { ChannelMembersView } from './Views/ChannelMembersView';
 import { PinnedMessagesView } from './Views/PinnedMessagesView';
 import { Prompt } from '../../components/Dialog';
-import {
-  IconFolder,
-  IconImage,
-  IconInfo,
-  IconPin,
-  IconUser,
-} from '../../components/Icons';
-
-const ChannelManagementNavButtonIcon = () => (
-  <IconInfo className='str-chat__channel-detail__action-icon' />
-);
+import { useComponentContextIcons } from '../../context';
 
-const ChannelMembersNavButtonIcon = () => (
-  <IconUser className='str-chat__channel-detail__action-icon' />
-);
+const ChannelManagementNavButtonIcon = () => {
+  const { IconInfo } = useComponentContextIcons();
 
-const PinnedMessagesNavButtonIcon = () => (
-  <IconPin className='str-chat__channel-detail__action-icon' />
-);
+  return <IconInfo className='str-chat__channel-detail__action-icon' />;
+};
 
-const ChannelMediaNavButtonIcon = () => (
-  <IconImage className='str-chat__channel-detail__action-icon' />
-);
+const ChannelMembersNavButtonIcon = () => {
+  const { IconUser } = useComponentContextIcons();
 
-const ChannelFilesNavButtonIcon = () => (
-  <IconFolder className='str-chat__channel-detail__action-icon' />
-);
+  return <IconUser className='str-chat__channel-detail__action-icon' />;
+};
+
+const PinnedMessagesNavButtonIcon = () => {
+  const { IconPin } = useComponentContextIcons();
+
+  return <IconPin className='str-chat__channel-detail__action-icon' />;
+};
+
+const ChannelMediaNavButtonIcon = () => {
+  const { IconImage } = useComponentContextIcons();
+
+  return <IconImage className='str-chat__channel-detail__action-icon' />;
+};
+
+const ChannelFilesNavButtonIcon = () => {
+  const { IconFolder } = useComponentContextIcons();
+
+  return <IconFolder className='str-chat__channel-detail__action-icon' />;
+};
 
 export const ChannelManagementNavButton = (props: SectionNavigatorNavButtonProps) => (
   <ChannelDetailNavButton
diff --git a/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx b/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
index 0991c9167..8370513d9 100644
--- a/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
@@ -1,9 +1,13 @@
-import { IconSearch } from '../../components/Icons';
+import { useComponentContextIcons } from '../../context';
 import type { PropsWithChildrenOnly } from '../../types/types';
 
-export const ChannelDetailEmptyList = ({ children }: PropsWithChildrenOnly) => (
-  <div className='str-chat__channel-detail__channel-members-view__empty-state'>
-    <IconSearch />
-    <div>{children}</div>
-  </div>
-);
+export const ChannelDetailEmptyList = ({ children }: PropsWithChildrenOnly) => {
+  const { IconSearch } = useComponentContextIcons();
+
+  return (
+    <div className='str-chat__channel-detail__channel-members-view__empty-state'>
+      <IconSearch />
+      <div>{children}</div>
+    </div>
+  );
+};
diff --git a/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx b/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
index cd2ebc126..9e988b644 100644
--- a/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 import { TextInput } from '../../components/Form';
-import { IconSearch } from '../../components/Icons';
 
 export type ChannelDetailSearchInputProps = {
   autoFocus?: boolean;
@@ -12,6 +11,7 @@ export type ChannelDetailSearchInputProps = {
 
 export const ChannelDetailSearchInput = React.memo(
   ({ autoFocus, onSearchChange, resetKey }: ChannelDetailSearchInputProps) => {
+    const { IconSearch } = useComponentContextIcons();
     const { t } = useTranslationContext();
     const [searchInput, setSearchInput] = useState('');
 
diff --git a/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx b/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
index ae60f7f95..6c1431279 100644
--- a/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
+++ b/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 
 import { SECTION_NAVIGATOR_LAYOUT, useSectionNavigatorContext } from './SectionNavigator';
-import { useTranslationContext } from '../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 import { Button } from '../../../components/Button';
 import { Prompt, type PromptHeaderProps } from '../../../components/Dialog';
-import { IconMenu } from '../../../components/Icons';
 
 export type SectionNavigatorHeaderProps = Omit<PromptHeaderProps, 'LeadingContent'>;
 
@@ -24,6 +23,7 @@ export const SectionNavigatorHeader = (props: SectionNavigatorHeaderProps) => {
     if (props.goBack) return undefined;
 
     return function SectionNavigatorHeaderMenuButton() {
+      const { IconMenu } = useComponentContextIcons();
       return (
         <Button
           appearance='ghost'
diff --git a/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx b/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
index 65eb63bcf..33a66cea5 100644
--- a/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
@@ -1,7 +1,7 @@
-import { useTranslationContext } from '../../../../context';
-import { IconFolder } from '../../../../components/Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../../../context';
 
 export const ChannelFilesEmptyList = () => {
+  const { IconFolder } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
index 305b5ac43..d111ad259 100644
--- a/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
@@ -6,9 +6,11 @@ import { fromPartial } from '@total-typescript/shoehorn';
 
 import {
   useChatContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { useStateStore } from '../../../../../store';
 import { ChannelDetailProvider } from '../../../ChannelDetailContext';
 import { ChannelFilesView } from '../ChannelFilesView';
@@ -189,6 +191,8 @@ const renderView = () =>
 
 describe('ChannelFilesView', () => {
   beforeEach(() => {
+    // Auto-mocked module: hand back the real icons rather than stubs.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
     mocks.searchSourceInstances.length = 0;
     mocks.searchSourceOptions.length = 0;
diff --git a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
index f705a5265..a2cbb246b 100644
--- a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
@@ -5,6 +5,7 @@ import type { Channel } from 'stream-chat';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../context';
@@ -14,13 +15,6 @@ import { useStateStore } from '../../../../store';
 import { Alert } from '../../../../components/Dialog';
 import { Button } from '../../../../components/Button';
 import { Switch } from '../../../../components/Form';
-import {
-  IconAudio,
-  IconDelete,
-  IconLeave,
-  IconMute,
-  IconNoSign,
-} from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { GlobalModal } from '../../../../components/Modal';
 import { useNotificationApi } from '../../../../components/Notifications';
@@ -45,21 +39,41 @@ const toError = (error: unknown) =>
 
 const getDisplayName = (name?: string, fallback?: string) => name || fallback || '';
 
-const BlockUserActionIcon = () => (
-  <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
-);
-const DeleteChatActionIcon = () => (
-  <IconDelete className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat' />
-);
-const MuteActionIcon = () => (
-  <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
-);
-const MutedActionIcon = () => (
-  <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
-);
-const LeaveChannelActionIcon = () => (
-  <IconLeave className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel' />
-);
+const BlockUserActionIcon = () => {
+  const { IconNoSign } = useComponentContextIcons();
+
+  return (
+    <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
+  );
+};
+const DeleteChatActionIcon = () => {
+  const { IconDelete } = useComponentContextIcons();
+
+  return (
+    <IconDelete className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat' />
+  );
+};
+const MuteActionIcon = () => {
+  const { IconMute } = useComponentContextIcons();
+
+  return (
+    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
+  );
+};
+const MutedActionIcon = () => {
+  const { IconAudio } = useComponentContextIcons();
+
+  return (
+    <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
+  );
+};
+const LeaveChannelActionIcon = () => {
+  const { IconLeave } = useComponentContextIcons();
+
+  return (
+    <IconLeave className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel' />
+  );
+};
 
 const channelManagementViewActionClassName = 'str-chat__channel-management-view-action';
 
diff --git a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
index 77fa47a0b..e824c3149 100644
--- a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
@@ -10,6 +10,7 @@ import React, {
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../context';
@@ -23,7 +24,6 @@ import {
   useChannelPreviewInfo,
   useIsUserMuted,
 } from '../../../../components/ChannelListItem';
-import { IconCheckmark, IconMute, IconPin } from '../../../../components/Icons';
 import { useChannelMembershipState } from '../../../../components/ChannelList';
 import { useIsChannelMuted } from '../../../../components/ChannelListItem/hooks/useIsChannelMuted';
 import { useChannelHasMembersOnline } from '../../../../components/ChannelHeader/hooks/useChannelHasMembersOnline';
@@ -55,6 +55,7 @@ export type ChannelManagementInfoBodyProps = {
 export const ChannelManagementInfoBody = ({
   actions,
 }: ChannelManagementInfoBodyProps) => {
+  const { IconMute, IconPin } = useComponentContextIcons();
   const { client } = useChatContext();
   const { channel } = useChannelDetailContext();
   const { Avatar = DefaultChannelAvatar } = useComponentContext();
@@ -326,6 +327,7 @@ const useChannelManagementEditForm = ({
 };
 
 export const ChannelManagementEditBody = (props: ChannelManagementEditBodyProps) => {
+  const { IconCheckmark } = useComponentContextIcons();
   const { Avatar = DefaultChannelAvatar } = useComponentContext();
   const {
     canSubmit,
diff --git a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
index 4b2b6d4e7..14cc1b8bb 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
@@ -1,7 +1,7 @@
-import { useTranslationContext } from '../../../../context';
-import { IconImage } from '../../../../components/Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../../../context';
 
 export const ChannelMediaEmptyList = () => {
+  const { IconImage } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
index 10cccbdcc..ccf28907d 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import {
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../context';
@@ -16,12 +17,6 @@ import {
 } from '../../../../components/BaseImage';
 import { Prompt } from '../../../../components/Dialog';
 import { Gallery as DefaultGallery, GalleryUI } from '../../../../components/Gallery';
-import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconImage,
-  IconVideoFill,
-} from '../../../../components/Icons';
 import { GlobalModal } from '../../../../components/Modal';
 import {
   SectionNavigatorHeader,
@@ -51,6 +46,7 @@ const ChannelMediaGridItem = ({
   item,
   onClick,
 }: ChannelMediaGridItemProps) => {
+  const { IconImage, IconVideoFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =
     useComponentContext();
@@ -127,6 +123,7 @@ const ChannelMediaPagination = ({
   onPrevious,
   previousDisabled,
 }: ChannelMediaPaginationProps) => {
+  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsx
index 482d6733d..8745fe5d4 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsx
@@ -7,9 +7,11 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { useStateStore } from '../../../../../store';
 import { ChannelDetailProvider } from '../../../ChannelDetailContext';
 import { ChannelMediaView } from '../ChannelMediaView';
@@ -123,6 +125,9 @@ const renderView = () =>
 
 describe('ChannelMediaView', () => {
   beforeEach(() => {
+    // The context module is auto-mocked, so the icon hook would return undefined; hand back
+    // the real icons rather than stubs, so assertions still describe what users see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
     mocks.searchSourceInstances.length = 0;
     mocks.searchSourceOptions.length = 0;
diff --git a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
index b7bbe1273..7c8eeeff3 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
@@ -13,6 +13,7 @@ import type { ChannelMemberResponse } from 'stream-chat';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../context';
@@ -22,13 +23,6 @@ import { useStateStore } from '../../../../store';
 import { Alert } from '../../../../components/Dialog';
 import { Button } from '../../../../components/Button';
 import { Switch } from '../../../../components/Form';
-import {
-  IconAudio,
-  IconMessageBubble,
-  IconMute,
-  IconNoSign,
-  IconUserRemove,
-} from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { GlobalModal } from '../../../../components/Modal';
 import { useNotificationApi } from '../../../../components/Notifications';
@@ -79,25 +73,43 @@ export const useChannelMemberActionContext = () => {
 const toError = (error: unknown) =>
   error instanceof Error ? error : new Error('An unknown error occurred');
 
-const MemberMuteActionIcon = () => (
-  <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
-);
+const MemberMuteActionIcon = () => {
+  const { IconMute } = useComponentContextIcons();
 
-const MemberUnmuteActionIcon = () => (
-  <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
-);
+  return (
+    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
+  );
+};
 
-const SendDirectMessageActionIcon = () => (
-  <IconMessageBubble className='str-chat__channel-detail__action-icon' />
-);
+const MemberUnmuteActionIcon = () => {
+  const { IconAudio } = useComponentContextIcons();
 
-const BlockUserActionIcon = () => (
-  <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
-);
+  return (
+    <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
+  );
+};
 
-const RemoveUserActionIcon = () => (
-  <IconUserRemove className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user' />
-);
+const SendDirectMessageActionIcon = () => {
+  const { IconMessageBubble } = useComponentContextIcons();
+
+  return <IconMessageBubble className='str-chat__channel-detail__action-icon' />;
+};
+
+const BlockUserActionIcon = () => {
+  const { IconNoSign } = useComponentContextIcons();
+
+  return (
+    <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
+  );
+};
+
+const RemoveUserActionIcon = () => {
+  const { IconUserRemove } = useComponentContextIcons();
+
+  return (
+    <IconUserRemove className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user' />
+  );
+};
 
 const channelMemberDetailActionClassName = 'str-chat__channel-member-detail-action';
 
diff --git a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsx
index 4ddae81f7..f183f3eee 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsx
@@ -6,9 +6,11 @@ import type { Channel, ChannelMemberResponse } from 'stream-chat';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { ChannelDetailProvider } from '../../../ChannelDetailContext';
 import { ChannelMemberDetail } from '../ChannelMemberDetail';
 import { mockT } from '../../../../../mock-builders/translator';
@@ -71,6 +73,9 @@ const otherMember = fromPartial<ChannelMemberResponse>({
 
 describe('ChannelMemberDetail', () => {
   beforeEach(() => {
+    // The context module is auto-mocked, so the icon hook would return undefined; hand back
+    // the real icons rather than stubs, so assertions still describe what users see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
 
     vi.mocked(useTranslationContext).mockReturnValue({
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
index 5454ee4d0..f06326ab7 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
@@ -10,7 +10,7 @@ import { useStateStore } from '../../../../store';
 import { Avatar as DefaultAvatar } from '../../../../components/Avatar';
 import { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';
 import { Checkbox } from '../../../../components/Form';
-import { IconMute } from '../../../../components/Icons';
+import { useComponentContextIcons } from '../../../../context';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { VirtualizedList } from '../../VirtualizedList';
 import { Prompt } from '../../../../components/Dialog';
@@ -38,9 +38,13 @@ const EMPTY_USERS: UserResponse[] = [];
 
 const computeUserItemKey = (_: number, user: UserResponse) => user.id;
 
-const MuteIndicator = () => (
-  <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
-);
+const MuteIndicator = () => {
+  const { IconMute } = useComponentContextIcons();
+
+  return (
+    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
+  );
+};
 
 const readOnlyRootProps = {
   className: 'str-chat__channel-detail__channel-members-view__list-item',
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
index 66b0131b0..9b2ad2229 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
@@ -5,11 +5,11 @@ import React, { useCallback, useMemo } from 'react';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../../../context';
 import { Avatar as DefaultAvatar } from '../../../../components/Avatar';
 import { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';
-import { IconMute } from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { VirtualizedList } from '../../VirtualizedList';
 import { Prompt } from '../../../../components/Dialog';
@@ -83,6 +83,7 @@ const ChannelMembersBrowseViewItem = ({
   const TrailingSlot = useMemo(
     () =>
       function MemberTrailingSlot() {
+        const { IconMute } = useComponentContextIcons();
         return (
           <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'>
             {roleTranslation ? (
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
index dec4cdd36..0e37e03ee 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
@@ -1,7 +1,11 @@
 import type { Channel } from 'stream-chat';
 import React, { useMemo, useState } from 'react';
 
-import { useComponentContext, useTranslationContext } from '../../../../context';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../../../context';
 import { Button } from '../../../../components/Button';
 import {
   ContextMenu,
@@ -15,7 +19,6 @@ import type {
   ChannelMembersHeaderActionsProps,
   ChannelMembersModeController,
 } from './ChannelMembersView';
-import { IconUserAdd } from '../../../../components/Icons';
 
 export type ChannelMembersHeaderActionType = 'addMembers' | (string & {});
 
@@ -93,6 +96,7 @@ const AddMembersMenuAction = ({
   closeMenu,
   modeController,
 }: ChannelMembersHeaderActionComponentProps) => {
+  const { IconUserAdd } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   if (modeController.mode !== 'browse') return null;
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx
index 3fb6a7e34..8ef750796 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx
@@ -5,8 +5,10 @@ import type { UserResponse } from 'stream-chat';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { useStateStore } from '../../../../../store';
 import { ChannelMembersAddView } from '../ChannelMembersAddView';
 import {
@@ -85,6 +87,9 @@ describe('ChannelMembersAddView', () => {
   const setMode = vi.fn();
 
   beforeEach(() => {
+    // The context module is auto-mocked, so the icon hook would return undefined; hand back
+    // the real icons rather than stubs, so assertions still describe what users see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
     mocks.virtuosoRenderCount = 0;
 
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
index 600aa080f..050902628 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
@@ -5,8 +5,10 @@ import type { ChannelMemberResponse } from 'stream-chat';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { useStateStore } from '../../../../../store';
 import { ChannelMembersBrowseView } from '../ChannelMembersBrowseView';
 import { createChannel, emitChannelEvent, renderWithChannel } from './testUtils';
@@ -112,6 +114,9 @@ const members: ChannelMemberResponse[] = [
 
 describe('ChannelMembersBrowseView', () => {
   beforeEach(() => {
+    // The context module is auto-mocked, so the icon hook would return undefined; hand back
+    // the real icons rather than stubs, so assertions still describe what users see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
     mocks.virtuosoRenderCount = 0;
     mocks.searchSourceOptions.length = 0;
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsx
index f9fdbcfa8..96d8423c0 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsx
@@ -3,9 +3,11 @@ import React from 'react';
 
 import {
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import {
   type ChannelMembersModeViewProps,
   ChannelMembersView,
@@ -207,6 +209,9 @@ describe('ChannelMembersView', () => {
   };
 
   beforeEach(() => {
+    // Auto-mocked module: hand back the real icons rather than stubs, so a converted
+    // component appearing in this tree does not start returning undefined.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
 
     vi.mocked(useTranslationContext).mockReturnValue({
diff --git a/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx b/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
index 54ca916f1..12a725f86 100644
--- a/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
@@ -1,7 +1,7 @@
-import { IconPin } from '../../../../components/Icons';
-import { useTranslationContext } from '../../../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../../../context';
 
 export const PinnedMessagesEmptyList = () => {
+  const { IconPin } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx b/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx
index f4d60279e..d713dd12d 100644
--- a/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx
@@ -16,9 +16,11 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import {
   useChatContext,
   useComponentContext,
+  useComponentContextIcons,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
+import * as DEFAULT_ICONS from '../../../../../components/Icons/icons';
 import { mockT } from '../../../../../mock-builders/translator';
 import { useStateStore } from '../../../../../store';
 import { ChannelDetailProvider } from '../../../ChannelDetailContext';
@@ -217,6 +219,9 @@ const mockSearchSourceState = (
 
 describe('PinnedMessagesView', () => {
   beforeEach(() => {
+    // The context module is auto-mocked, so the icon hook would return undefined; hand back
+    // the real icons rather than stubs, so assertions still describe what users see.
+    vi.mocked(useComponentContextIcons).mockReturnValue(DEFAULT_ICONS);
     vi.clearAllMocks();
     mocks.virtuosoRenderCount = 0;
     mocks.searchSourceFilterBuilderOptions.length = 0;
diff --git a/src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx b/src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx
index 41ca17e39..1fe89ccf5 100644
--- a/src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx
+++ b/src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx
@@ -111,31 +111,36 @@ const mocks = vi.hoisted(() => {
   };
 });
 
-vi.mock('../../../context', () => ({
-  useChatContext: () => ({
-    client: mocks.client,
-    mutes: mocks.mutes,
-  }),
-  useComponentContext: () => ({
-    Modal: ({
-      children,
-      open,
-      role,
-    }: {
-      children: React.ReactNode;
-      open: boolean;
-      role?: string;
-    }) => (open ? <div role={role}>{children}</div> : null),
-  }),
-  useModalContext: () => ({ close: mocks.close }),
-  useTranslationContext: () => ({
-    // The unstable variant must still forward the inline defaultValue, or every call would
-    // resolve to the raw key.
-    t: mocks.useStableTranslationFunction
-      ? mocks.t
-      : (...args: unknown[]) => mocks.t(...args),
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    useChatContext: () => ({
+      client: mocks.client,
+      mutes: mocks.mutes,
+    }),
+    useComponentContext: () => ({
+      Modal: ({
+        children,
+        open,
+        role,
+      }: {
+        children: React.ReactNode;
+        open: boolean;
+        role?: string;
+      }) => (open ? <div role={role}>{children}</div> : null),
+    }),
+    // The real hook: with no provider it returns the SDK icons.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useModalContext: () => ({ close: mocks.close }),
+    useTranslationContext: () => ({
+      // The unstable variant must still forward the inline defaultValue, or every call would
+      // resolve to the raw key.
+      t: mocks.useStableTranslationFunction
+        ? mocks.t
+        : (...args: unknown[]) => mocks.t(...args),
+    }),
+  };
+});
 
 vi.mock('../../../components/Notifications', () => ({
   useNotificationApi: () => ({
diff --git a/src/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsx b/src/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsx
index 180dc312a..316f26df9 100644
--- a/src/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsx
+++ b/src/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsx
@@ -29,39 +29,44 @@ const mocks = vi.hoisted(() => ({
   mutes: [] as UserMuteResponse[],
 }));
 
-vi.mock('../../../context', () => ({
-  useChatContext: () => ({
-    client: {
-      user: { id: 'own-user' },
-    },
-    mutes: mocks.mutes,
-  }),
-  useComponentContext: () => ({
-    Avatar: () => <div data-testid='channel-management-avatar' />,
-  }),
-  useModalContext: () => ({ close: mocks.close }),
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    useChatContext: () => ({
+      client: {
+        user: { id: 'own-user' },
+      },
+      mutes: mocks.mutes,
+    }),
+    useComponentContext: () => ({
+      Avatar: () => <div data-testid='channel-management-avatar' />,
+    }),
+    // The real hook: with no provider it returns the SDK icons.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useModalContext: () => ({ close: mocks.close }),
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 vi.mock('../../../context/ChatContext', () => ({
   useChatContext: () => ({
@@ -153,8 +158,10 @@ vi.mock('../../../components/Dialog', () => ({
   },
 }));
 
-vi.mock('../../../components/Icons', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../../components/Icons')>();
+// Mocks the icon module, not the barrel: icons now reach components through
+// `useComponentContextIcons`, which reads `components/Icons/icons` directly.
+vi.mock('../../../components/Icons/icons', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../components/Icons/icons')>();
 
   return {
     ...actual,
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index 3d2da2d05..0271764fe 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import PickerImport from '@emoji-mart/react';
 
-import { useMessageComposerContext, useTranslationContext } from '../../context';
+import {
+  useComponentContextIcons,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 import {
   Button,
-  IconEmoji,
   type PopperLikePlacement,
   useMessageComposerController,
 } from '../../components';
@@ -72,7 +75,10 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
 
   const { pickerContainerClassName, wrapperClassName } = classNames;
 
-  const { ButtonIconComponent = IconEmoji } = props;
+  const { ButtonIconComponent } = props;
+  const { IconEmoji } = useComponentContextIcons();
+  // The prop still wins: it targets this picker, the slot rebrands every emoji icon.
+  const ResolvedButtonIcon = ButtonIconComponent ?? IconEmoji;
   const pickerStyle = props.pickerProps?.style as React.CSSProperties | undefined;
 
   useEffect(() => {
@@ -134,7 +140,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
         type='button'
         variant='secondary'
       >
-        {ButtonIconComponent && <ButtonIconComponent />}
+        {ResolvedButtonIcon && <ResolvedButtonIcon />}
       </Button>
     </div>
   );
diff --git a/src/plugins/SlotLayout/ChatView.tsx b/src/plugins/SlotLayout/ChatView.tsx
index 16de115ed..d9173edf2 100644
--- a/src/plugins/SlotLayout/ChatView.tsx
+++ b/src/plugins/SlotLayout/ChatView.tsx
@@ -12,16 +12,11 @@ import React, {
 import { useStableId } from '../../components/UtilityComponents/useStableId';
 
 import { Button, type ButtonProps } from '../../components/Button';
-import {
-  IconMessageBubble,
-  IconMessageBubbleFill,
-  IconThread,
-  IconThreadFill,
-} from '../../components/Icons';
 import { UnreadCountBadge } from '../../components/Threads/UnreadCountBadge';
 import {
   DialogManagerProvider,
   useChatContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../context';
 import { useStateStore } from '../../store';
@@ -623,6 +618,7 @@ export type ChatViewSelectorItemProps = {
 export const ChatViewChannelsSelectorButton = ({
   iconOnly = true,
 }: ChatViewSelectorItemProps) => {
+  const { IconMessageBubble, IconMessageBubbleFill } = useComponentContextIcons();
   const { activeView, setActiveView } = useChatViewContext();
   const { t } = useTranslationContext();
 
@@ -648,6 +644,7 @@ export const ChatViewChannelsSelectorButton = ({
 export const ChatViewThreadsSelectorButton = ({
   iconOnly = true,
 }: ChatViewSelectorItemProps) => {
+  const { IconThread, IconThreadFill } = useComponentContextIcons();
   const { client } = useChatContext();
   const { unreadThreadCount } = useStateStore(
     client.threads.state,