diff --git a/src/components/Attachment/Geolocation.tsx b/src/components/Attachment/Geolocation.tsx
index e997bb259..9ef901548 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, SharedLocationResponse } from 'stream-chat';
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconLocation } from '../Icons';
+import { IconLocation as DefaultIconLocation } from '../Icons';
 import { Button } from '../Button';
 
 export type GeolocationMapProps = Coords;
@@ -102,6 +106,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
   location,
 }: GeolocationAttachmentMapPlaceholderProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext();
 
   return (
     <div
diff --git a/src/components/Attachment/Giphy.tsx b/src/components/Attachment/Giphy.tsx
index a7dda5c16..3a95edaf6 100644
--- a/src/components/Attachment/Giphy.tsx
+++ b/src/components/Attachment/Giphy.tsx
@@ -8,7 +8,7 @@ import {
   useComponentContext,
   useTranslationContext,
 } from '../../context';
-import { IconGiphy } from '../Icons';
+import { IconGiphy as DefaultIconGiphy } from '../Icons';
 import { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { ImageAttachmentConfiguration } from '../../types/types';
 
@@ -78,9 +78,12 @@ export const Giphy = ({ attachment }: GiphyAttachmentProps) => {
   );
 };
 
-const GiphyBadge = () => (
-  <div className='str-chat__giphy-badge'>
-    <IconGiphy />
-    Giphy
-  </div>
-);
+const GiphyBadge = () => {
+  const { icons: { IconGiphy = DefaultIconGiphy } = {} } = useComponentContext();
+  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 365a8088d..caa488a12 100644
--- a/src/components/Attachment/LinkPreview/Card.tsx
+++ b/src/components/Attachment/LinkPreview/Card.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { BaseImage } from '../../BaseImage';
 import { SafeAnchor } from '../../SafeAnchor';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useComponentContext } from '../../../context';
 
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconLink } from '../../Icons';
+import { IconLink as DefaultIconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
 
@@ -64,6 +65,7 @@ type CardContentProps = RenderAttachmentProps['attachment'];
 const CardContent = (props: CardContentProps) => {
   const { og_scrape_url, text, title, title_link } = props;
   const url = title_link || og_scrape_url;
+  const { icons: { IconLink = DefaultIconLink } = {} } = useComponentContext();
 
   return (
     <div className='str-chat__message-attachment-card--content'>
diff --git a/src/components/Attachment/LinkPreview/CardAudio.tsx b/src/components/Attachment/LinkPreview/CardAudio.tsx
index 538edbe44..4072386d4 100644
--- a/src/components/Attachment/LinkPreview/CardAudio.tsx
+++ b/src/components/Attachment/LinkPreview/CardAudio.tsx
@@ -1,10 +1,10 @@
 import { type AudioPlayerState, ProgressBar, useAudioPlayer } from '../../AudioPlayback';
-import { useMessageContext } from '../../../context';
+import { useComponentContext, useMessageContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import { PlayButton } from '../../Button';
 import type { AudioProps } from '../Audio';
 import React from 'react';
-import { IconLink } from '../../Icons';
+import { IconLink as DefaultIconLink } from '../../Icons';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 
@@ -21,22 +21,25 @@ 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 { icons: { IconLink = DefaultIconLink } = {} } = useComponentContext();
+  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 3557c68be..4e8760cd9 100644
--- a/src/components/Attachment/ModalGallery.tsx
+++ b/src/components/Attachment/ModalGallery.tsx
@@ -8,7 +8,7 @@ import { Gallery as DefaultGallery, GalleryUI } from '../Gallery';
 import { LoadingIndicator } from '../Loading';
 import { GlobalModal, type ModalCloseSource } from '../Modal';
 import { useComponentContext, useTranslationContext } from '../../context';
-import { IconRetry } from '../Icons';
+import { IconRetry as DefaultIconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -144,6 +144,7 @@ const ThumbnailButton = ({
   showOverlay,
 }: ThumbnailButtonProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconRetry = DefaultIconRetry } = {} } = useComponentContext();
   const imageUrl = item.imageUrl;
   const [isLoadFailed, setIsLoadFailed] = useState(false);
   const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));
diff --git a/src/components/Attachment/UnsupportedAttachment.tsx b/src/components/Attachment/UnsupportedAttachment.tsx
index b91fcb6d1..75bbaeccc 100644
--- a/src/components/Attachment/UnsupportedAttachment.tsx
+++ b/src/components/Attachment/UnsupportedAttachment.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import { useTranslationContext } from '../../context';
-import { IconUnsupportedAttachment } from '../Icons';
+import { useComponentContext, useTranslationContext } from '../../context';
+import { IconUnsupportedAttachment as DefaultIconUnsupportedAttachment } from '../Icons';
 
 export type UnsupportedAttachmentProps = {
   attachment: Attachment;
 };
 
 export const UnsupportedAttachment = () => {
+  const { icons: { IconUnsupportedAttachment = DefaultIconUnsupportedAttachment } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext('UnsupportedAttachment');
   return (
     <div
diff --git a/src/components/Attachment/VisibilityDisclaimer.tsx b/src/components/Attachment/VisibilityDisclaimer.tsx
index 0f5809558..f59b6b7eb 100644
--- a/src/components/Attachment/VisibilityDisclaimer.tsx
+++ b/src/components/Attachment/VisibilityDisclaimer.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { IconEyeFill } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { IconEyeFill as DefaultIconEyeFill } from '../Icons';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 export const VisibilityDisclaimer = () => {
+  const { icons: { IconEyeFill = DefaultIconEyeFill } = {} } = useComponentContext();
+
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__visibility-disclaimer'>
diff --git a/src/components/Attachment/components/DownloadButton.tsx b/src/components/Attachment/components/DownloadButton.tsx
index 73c150dff..7c62eb819 100644
--- a/src/components/Attachment/components/DownloadButton.tsx
+++ b/src/components/Attachment/components/DownloadButton.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
-import { useTranslationContext } from '../../../context';
-import { IconDownload } from '../../Icons';
+import { useComponentContext, useTranslationContext } from '../../../context';
+import { IconDownload as DefaultIconDownload } from '../../Icons';
 
 export type DownloadButtonProps = {
   /** Attachment asset URL (e.g. `asset_url`). */
@@ -25,6 +25,8 @@ export const DownloadButton = ({
   suggestedFileName,
   tooltipTitle,
 }: DownloadButtonProps) => {
+  const { icons: { IconDownload = DefaultIconDownload } = {} } = useComponentContext();
+
   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 af2fa6b76..c8917aad8 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -6,10 +6,15 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { IconUser } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconUser as DefaultIconUser } from '../Icons';
 
 export type AvatarProps = {
-  /** Custom icon rendered when there is no image and no initials */
+  /**
+   * Custom icon rendered when there is no image and no initials.
+   * @deprecated Use the `icons.IconUser` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconUser: ... } }}>`) instead.
+   * Passing this prop still wins over the context slot for backwards compatibility.
+   */
   FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;
   /** URL of the avatar image */
   imageUrl?: string;
@@ -46,13 +51,15 @@ const getInitials = (name?: string) => {
  */
 export const Avatar = ({
   className,
-  FallbackIcon = IconUser,
+  FallbackIcon,
   imageUrl,
   isOnline,
   size,
   userName,
   ...rest
 }: AvatarProps) => {
+  const { icons: { IconUser = DefaultIconUser } = {} } = useComponentContext();
+  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;
   const [error, setError] = useState(false);
 
   useEffect(() => () => setError(false), [imageUrl]);
@@ -108,7 +115,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..1a8e0ba62 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { type ComponentProps } from 'react';
-import { IconExclamationMarkFill } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconExclamationMarkFill as DefaultIconExclamationMarkFill } from '../Icons';
 
 export type BadgeVariant =
   | 'default'
@@ -47,8 +48,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 { icons: { IconExclamationMarkFill = DefaultIconExclamationMarkFill } = {} } =
+    useComponentContext();
+  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 05129ccbd..7ce4a165d 100644
--- a/src/components/Badge/MediaBadge.tsx
+++ b/src/components/Badge/MediaBadge.tsx
@@ -1,4 +1,8 @@
-import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
+import { useComponentContext } from '../../context';
+import {
+  IconMicrophoneSolid as DefaultIconMicrophoneSolid,
+  IconVideoFill as DefaultIconVideoFill,
+} from '../Icons';
 import React, { type ComponentType } from 'react';
 import type { LocalAttachment } from 'stream-chat';
 import clsx from 'clsx';
@@ -10,13 +14,20 @@ export type MediaBadgeProps = {
   variant: 'video' | 'voice-recording' | string;
 };
 
-const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
-  video: IconVideoFill,
-  voiceRecording: IconMicrophoneSolid,
-};
-
 export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
-  const Icon = MediaBadgeVariantToIcon[variant];
+  const {
+    icons: {
+      IconMicrophoneSolid = DefaultIconMicrophoneSolid,
+      IconVideoFill = DefaultIconVideoFill,
+    } = {},
+  } = useComponentContext();
+
+  const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
+    video: IconVideoFill,
+    voiceRecording: IconMicrophoneSolid,
+  };
+
+  const Icon = mediaBadgeVariantToIcon[variant];
   return (
     <div
       className={clsx('str-chat__media-badge', {
diff --git a/src/components/BaseImage/ImagePlaceholder.tsx b/src/components/BaseImage/ImagePlaceholder.tsx
index af2b99c4d..ee8fb6b93 100644
--- a/src/components/BaseImage/ImagePlaceholder.tsx
+++ b/src/components/BaseImage/ImagePlaceholder.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconImage } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconImage as DefaultIconImage } from '../Icons';
 
 export type ImagePlaceholderProps = {
   className?: string;
 };
 
 export const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {
+  const { icons: { IconImage = DefaultIconImage } = {} } = useComponentContext();
+
   const { t } = useTranslationContext();
   return (
     <div
diff --git a/src/components/Button/PlayButton.tsx b/src/components/Button/PlayButton.tsx
index 19ba591a9..26e084fd7 100644
--- a/src/components/Button/PlayButton.tsx
+++ b/src/components/Button/PlayButton.tsx
@@ -2,14 +2,24 @@ 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 {
+  IconPauseFill as DefaultIconPauseFill,
+  IconPlayFill as DefaultIconPlayFill,
+} from '../Icons';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 export type PlayButtonProps = ComponentProps<'button'> & {
   isPlaying: boolean;
 };
 
 export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {
+  const {
+    icons: {
+      IconPauseFill = DefaultIconPauseFill,
+      IconPlayFill = DefaultIconPlayFill,
+    } = {},
+  } = useComponentContext();
+
   const { t } = useTranslationContext();
   return (
     <Button
diff --git a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
index d73b16e8f..97fbbdce4 100644
--- a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
+++ b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
@@ -7,17 +7,21 @@ import {
   useState,
 } from 'react';
 
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import { useChannelMembershipState, useChannelMembersState } from '../ChannelList';
 import { useChannelListItemContext } from './ChannelListItem';
 import { Button } from '../Button';
 import {
-  IconArchive,
-  IconLeave,
-  IconMore,
-  IconMute,
-  IconNoSign,
-  IconPin,
+  IconArchive as DefaultIconArchive,
+  IconLeave as DefaultIconLeave,
+  IconMore as DefaultIconMore,
+  IconMute as DefaultIconMute,
+  IconNoSign as DefaultIconNoSign,
+  IconPin as DefaultIconPin,
 } from '../Icons';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 import {
@@ -340,6 +344,7 @@ const defaultComponents = {
   dropdown: {
     Archive() {
       const behaviorProps = useDropdownActionButtonProps(useArchiveAction());
+      const { icons: { IconArchive = DefaultIconArchive } = {} } = useComponentContext();
 
       return (
         <ContextMenuButton
@@ -354,6 +359,7 @@ const defaultComponents = {
     },
     Ban() {
       const behaviorProps = useDropdownActionButtonProps(useBanAction());
+      const { icons: { IconNoSign = DefaultIconNoSign } = {} } = useComponentContext();
 
       return (
         <ContextMenuButton
@@ -368,6 +374,7 @@ const defaultComponents = {
     },
     Leave() {
       const behaviorProps = useDropdownActionButtonProps(useLeaveAction());
+      const { icons: { IconLeave = DefaultIconLeave } = {} } = useComponentContext();
 
       return (
         <ContextMenuButton
@@ -383,6 +390,7 @@ const defaultComponents = {
     },
     Mute() {
       const behaviorProps = useDropdownActionButtonProps(useMuteAction());
+      const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
 
       return (
         <ContextMenuButton
@@ -397,6 +405,7 @@ const defaultComponents = {
     },
     Pin() {
       const behaviorProps = useDropdownActionButtonProps(usePinAction());
+      const { icons: { IconPin = DefaultIconPin } = {} } = useComponentContext();
 
       return (
         <ContextMenuButton
@@ -413,6 +422,7 @@ const defaultComponents = {
   quick: {
     Archive() {
       const behaviorProps = useQuickActionButtonProps(useArchiveAction());
+      const { icons: { IconArchive = DefaultIconArchive } = {} } = useComponentContext();
 
       return (
         <Button
@@ -430,6 +440,7 @@ const defaultComponents = {
     },
     Mute() {
       const behaviorProps = useQuickActionButtonProps(useMuteAction());
+      const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
 
       return (
         <Button
@@ -449,6 +460,7 @@ const defaultComponents = {
   QuickDropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {
     const { channel } = useChannelListItemContext();
     const { t } = useTranslationContext();
+    const { icons: { IconMore = DefaultIconMore } = {} } = useComponentContext();
 
     const dialogId = ChannelListItemActionButtons.getDialogId({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/components/ChannelListItem/ChannelListItemUI.tsx b/src/components/ChannelListItem/ChannelListItemUI.tsx
index dd487c3f5..7bfc68635 100644
--- a/src/components/ChannelListItem/ChannelListItemUI.tsx
+++ b/src/components/ChannelListItem/ChannelListItemUI.tsx
@@ -6,7 +6,7 @@ import { ChannelListItemTimestamp } from './ChannelListItemTimestamp';
 
 import { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';
 import { Badge } from '../Badge';
-import { IconMute, IconPin } from '../Icons';
+import { IconMute as DefaultIconMute, IconPin as DefaultIconPin } from '../Icons';
 import { useInteractionAnnouncements } from '../Accessibility';
 import {
   useChatContext,
@@ -39,6 +39,7 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
   const {
     Avatar = DefaultChannelAvatar,
     ChannelListItemActionButtons = DefaultChannelListItemActionButtons,
+    icons: { IconMute = DefaultIconMute, IconPin = DefaultIconPin } = {},
   } = useComponentContext();
   const { client, isMessageAIGenerated } = useChatContext('ChannelListItemUI');
   const { t, tDateTimeParser, userLanguage } = useTranslationContext('ChannelListItemUI');
diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx
index a9845cfd2..822b6d2be 100644
--- a/src/components/ChatView/ChatView.tsx
+++ b/src/components/ChatView/ChatView.tsx
@@ -12,10 +12,10 @@ import { useStableId } from '../UtilityComponents/useStableId';
 import { Button, type ButtonProps } from '../Button';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import {
-  IconMessageBubble,
-  IconMessageBubbleFill,
-  IconThread,
-  IconThreadFill,
+  IconMessageBubble as DefaultIconMessageBubble,
+  IconMessageBubbleFill as DefaultIconMessageBubbleFill,
+  IconThread as DefaultIconThread,
+  IconThreadFill as DefaultIconThreadFill,
 } from '../Icons';
 import { ThreadProvider } from '../Threads';
 import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
@@ -275,6 +275,12 @@ export const ChatViewChannelsSelectorButton = ({
 }: ChatViewSelectorItemProps) => {
   const { activeChatView, setActiveChatView } = useChatViewContext();
   const { t } = useTranslationContext();
+  const {
+    icons: {
+      IconMessageBubble = DefaultIconMessageBubble,
+      IconMessageBubbleFill = DefaultIconMessageBubbleFill,
+    } = {},
+  } = useComponentContext();
 
   const isActive = activeChatView === 'channels';
 
@@ -304,6 +310,12 @@ export const ChatViewThreadsSelectorButton = ({
   };
   const { activeChatView, setActiveChatView } = useChatViewContext();
   const { t } = useTranslationContext();
+  const {
+    icons: {
+      IconThread = DefaultIconThread,
+      IconThreadFill = DefaultIconThreadFill,
+    } = {},
+  } = useComponentContext();
 
   const isActive = activeChatView === 'threads';
   const label =
diff --git a/src/components/Dialog/components/Callout.tsx b/src/components/Dialog/components/Callout.tsx
index c2ce47806..e7e780952 100644
--- a/src/components/Dialog/components/Callout.tsx
+++ b/src/components/Dialog/components/Callout.tsx
@@ -3,7 +3,7 @@ import { DialogAnchor, type DialogAnchorProps } from '../service';
 import { useDialogIsOpen } from '../hooks';
 import { Button } from '../../Button';
 import clsx from 'clsx';
-import { IconXmark } from '../../Icons';
+import { IconXmark as DefaultIconXmark } from '../../Icons';
 import { useComponentContext, useTranslationContext } from '../../../context';
 
 export type CalloutProps = PropsWithChildren<
@@ -51,6 +51,7 @@ export const Callout = ({
 export type CalloutDialogProps = Pick<CalloutProps, 'children' | 'className' | 'onClose'>;
 
 const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {
+  const { icons: { IconXmark = DefaultIconXmark } = {} } = useComponentContext();
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Dialog/components/ContextMenu.tsx b/src/components/Dialog/components/ContextMenu.tsx
index 554368675..9ce0926c9 100644
--- a/src/components/Dialog/components/ContextMenu.tsx
+++ b/src/components/Dialog/components/ContextMenu.tsx
@@ -13,7 +13,10 @@ import React, {
   useState,
 } from 'react';
 import { Avatar, type AvatarProps } from '../../Avatar';
-import { IconChevronLeft, IconChevronRight } from '../../Icons';
+import {
+  IconChevronLeft as DefaultIconChevronLeft,
+  IconChevronRight as DefaultIconChevronRight,
+} from '../../Icons';
 import type { PopperLikePlacement } from '../hooks';
 import { useDialogIsOpen, useDialogOnNearestManager } from '../hooks';
 import type { DialogAnchorProps } from '../service/DialogAnchor';
@@ -87,6 +90,10 @@ export type BaseContextMenuButtonProps = {
   hasSubMenu?: boolean;
   label?: ReactNode;
   Icon?: ComponentType<ComponentProps<'svg'>>;
+  /**
+   * @deprecated Use the `icons.IconChevronRight` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconChevronRight: ... } }}>`) instead.
+   * Passing this prop still wins over the context slot for backwards compatibility.
+   */
   SubmenuIcon?: ComponentType<ComponentProps<'svg'>>;
   variant?: 'destructive';
 } & ComponentProps<'button'>;
@@ -99,37 +106,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 { icons: { IconChevronRight = DefaultIconChevronRight } = {} } =
+    useComponentContext();
+  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'>;
@@ -668,6 +680,8 @@ export function ContextMenuContent({
   ...props
 }: ContextMenuContentProps) {
   const { t } = useTranslationContext();
+  const { icons: { IconChevronLeft = DefaultIconChevronLeft } = {} } =
+    useComponentContext();
   const resolvedBackLabel = backLabel ?? t('Back');
   const {
     ['aria-describedby']: rootAriaDescribedBy,
diff --git a/src/components/Dialog/components/Prompt.tsx b/src/components/Dialog/components/Prompt.tsx
index 87eb2c576..528c67804 100644
--- a/src/components/Dialog/components/Prompt.tsx
+++ b/src/components/Dialog/components/Prompt.tsx
@@ -1,8 +1,15 @@
 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 {
+  IconArrowLeft as DefaultIconArrowLeft,
+  IconXmark as DefaultIconXmark,
+} from '../../Icons';
+import {
+  useComponentContext,
+  useModalContext,
+  useTranslationContext,
+} from '../../../context';
 import { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';
 
 const PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -36,6 +43,9 @@ const PromptHeader = ({
 }: PromptHeaderProps) => {
   const { t } = useTranslationContext();
   const { dialogId } = useModalContext();
+  const {
+    icons: { IconArrowLeft = DefaultIconArrowLeft, IconXmark = DefaultIconXmark } = {},
+  } = useComponentContext();
   const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =
     useAriaIdentifiers(dialogId);
   const resolvedTitleId = titleId ?? derivedTitleId;
diff --git a/src/components/Dialog/components/Viewer.tsx b/src/components/Dialog/components/Viewer.tsx
index 70b5ec903..9dcf9dd61 100644
--- a/src/components/Dialog/components/Viewer.tsx
+++ b/src/components/Dialog/components/Viewer.tsx
@@ -1,8 +1,15 @@
 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 {
+  IconArrowLeft as DefaultIconArrowLeft,
+  IconXmark as DefaultIconXmark,
+} from '../../Icons';
+import {
+  useComponentContext,
+  useModalContext,
+  useTranslationContext,
+} from '../../../context';
 import { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';
 
 const ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -32,6 +39,9 @@ const ViewerHeader = ({
 }: ViewerHeaderProps) => {
   const { t } = useTranslationContext();
   const { dialogId } = useModalContext();
+  const {
+    icons: { IconArrowLeft = DefaultIconArrowLeft, IconXmark = DefaultIconXmark } = {},
+  } = useComponentContext();
   const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =
     useAriaIdentifiers(dialogId);
   const resolvedTitleId = titleId ?? derivedTitleId;
diff --git a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
index 1f18a4faa..7c7be2d73 100644
--- a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
+++ b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 
+import { useComponentContext } from '../../context';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconMessageBubble, IconMessageBubbles } from '../Icons';
+import {
+  IconMessageBubble as DefaultIconMessageBubble,
+  IconMessageBubbles as DefaultIconMessageBubbles,
+} from '../Icons';
 
 export type EmptyStateIndicatorProps = {
   /** List Type: channel | message */
@@ -13,6 +17,12 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   const { listType, messageText } = props;
 
   const { t } = useTranslationContext('EmptyStateIndicator');
+  const {
+    icons: {
+      IconMessageBubble = DefaultIconMessageBubble,
+      IconMessageBubbles = DefaultIconMessageBubbles,
+    } = {},
+  } = useComponentContext();
 
   if (listType === 'thread') return null;
 
diff --git a/src/components/Form/NumericInput.tsx b/src/components/Form/NumericInput.tsx
index e58e7f8b5..730773e40 100644
--- a/src/components/Form/NumericInput.tsx
+++ b/src/components/Form/NumericInput.tsx
@@ -1,9 +1,12 @@
 import clsx from 'clsx';
 import React, { forwardRef, useCallback } from 'react';
 import type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import { useStableId } from '../UtilityComponents/useStableId';
-import { IconMinus, IconPlusSmall } from '../Icons';
+import {
+  IconMinus as DefaultIconMinus,
+  IconPlusSmall as DefaultIconPlusSmall,
+} from '../Icons';
 import { Button } from '../Button';
 
 export type NumericInputProps = Omit<
@@ -52,6 +55,9 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
     const generatedId = useStableId();
     const id = idProp ?? generatedId;
     const { t } = useTranslationContext();
+    const {
+      icons: { IconMinus = DefaultIconMinus, IconPlusSmall = DefaultIconPlusSmall } = {},
+    } = useComponentContext();
 
     const num = parseNumeric(value);
     const minDef = min ?? -Infinity;
diff --git a/src/components/Form/TextInput.tsx b/src/components/Form/TextInput.tsx
index cb6479f67..9f6058551 100644
--- a/src/components/Form/TextInput.tsx
+++ b/src/components/Form/TextInput.tsx
@@ -2,7 +2,11 @@ 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 { useComponentContext } from '../../context';
+import {
+  IconCheckmark as DefaultIconCheckmark,
+  IconExclamationMark as DefaultIconExclamationMark,
+} from '../Icons';
 
 export type TextInputVariant = 'outline' | 'ghost';
 
@@ -79,6 +83,12 @@ type TextInputFieldMessageProps =
     };
 
 const TextInputFieldMessage = (props: TextInputFieldMessageProps) => {
+  const {
+    icons: {
+      IconCheckmark = DefaultIconCheckmark,
+      IconExclamationMark = DefaultIconExclamationMark,
+    } = {},
+  } = useComponentContext();
   if (props.kind === 'neutral') {
     return (
       <div
diff --git a/src/components/Gallery/GalleryHeader.tsx b/src/components/Gallery/GalleryHeader.tsx
index 608778579..d2e584f2f 100644
--- a/src/components/Gallery/GalleryHeader.tsx
+++ b/src/components/Gallery/GalleryHeader.tsx
@@ -3,7 +3,10 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 
 import { type GalleryItem } from './GalleryContext';
 import { Button } from '../Button';
-import { IconArrowDownCircle, IconXmark } from '../Icons';
+import {
+  IconArrowDownCircle as DefaultIconArrowDownCircle,
+  IconXmark as DefaultIconXmark,
+} from '../Icons';
 import { MessageTimestamp as DefaultMessageTimestamp } from '../Message/MessageTimestamp';
 import {
   ModalContext,
@@ -17,6 +20,13 @@ type GalleryHeaderProps = {
 };
 
 export const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => {
+  const {
+    icons: {
+      IconArrowDownCircle = DefaultIconArrowDownCircle,
+      IconXmark = DefaultIconXmark,
+    } = {},
+  } = useComponentContext();
+
   const { t } = useTranslationContext();
   const { MessageTimestamp = DefaultMessageTimestamp } = useComponentContext('GalleryUI');
   const { isMyMessage, message } = useMessageContext('GalleryUI');
diff --git a/src/components/Gallery/GalleryUI.tsx b/src/components/Gallery/GalleryUI.tsx
index 4112fd415..59dabbce0 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 {
+  IconChevronLeft as DefaultIconChevronLeft,
+  IconChevronRight as DefaultIconChevronRight,
+} from '../Icons';
+import { ModalContext, useComponentContext, useTranslationContext } from '../../context';
 import { VideoPlayer } from '../VideoPlayer';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
@@ -15,6 +18,13 @@ const SWIPE_THRESHOLD = 50;
 const TRANSITION_DURATION = 300;
 
 export const GalleryUI = () => {
+  const {
+    icons: {
+      IconChevronLeft = DefaultIconChevronLeft,
+      IconChevronRight = DefaultIconChevronRight,
+    } = {},
+  } = useComponentContext();
+
   const { t } = useTranslationContext();
   const {
     closeOnBackgroundClick,
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index 01f3a3b08..47ee77c42 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -1,2 +1,3 @@
 export { createIcon } from './createIcon';
 export * from './icons';
+export * from './slots';
diff --git a/src/components/Icons/slots.ts b/src/components/Icons/slots.ts
new file mode 100644
index 000000000..f05d1f92c
--- /dev/null
+++ b/src/components/Icons/slots.ts
@@ -0,0 +1,101 @@
+import type { ComponentPropsWithoutRef, ComponentType } from 'react';
+
+export type IconComponent = ComponentType<ComponentPropsWithoutRef<'svg'>>;
+
+/**
+ * Names of icons that can be overridden via `ComponentContext.icons`. Enumerated from icons
+ * actually imported from `../components/Icons` anywhere in `src/`. Overrides are deep-merged
+ * with sibling entries by `WithComponents`, so a consumer can rebrand a single icon without
+ * clearing the others.
+ */
+export type IconSlots = Partial<
+  Record<
+    | 'IconArchive'
+    | 'IconArrowDown'
+    | 'IconArrowDownCircle'
+    | 'IconArrowLeft'
+    | 'IconArrowUp'
+    | 'IconArrowUpRight'
+    | 'IconAttachment'
+    | 'IconAudio'
+    | 'IconBell'
+    | 'IconBellOff'
+    | 'IconBolt'
+    | 'IconBookmark'
+    | 'IconBookmarkRemove'
+    | 'IconCamera'
+    | 'IconCheckmark'
+    | 'IconCheckmark1Small'
+    | 'IconChecks'
+    | 'IconChevronDown'
+    | 'IconChevronLeft'
+    | 'IconChevronRight'
+    | 'IconClock'
+    | 'IconCommand'
+    | 'IconCopy'
+    | 'IconDelete'
+    | 'IconDownload'
+    | 'IconEdit'
+    | 'IconEmoji'
+    | 'IconEmojiAdd'
+    | 'IconExclamationCircleFill'
+    | 'IconExclamationMark'
+    | 'IconExclamationMarkFill'
+    | 'IconExclamationTriangleFill'
+    | 'IconEyeFill'
+    | 'IconFile'
+    | 'IconFlag'
+    | 'IconFolder'
+    | 'IconGiphy'
+    | 'IconImage'
+    | 'IconInfo'
+    | 'IconLeave'
+    | 'IconLink'
+    | 'IconLoading'
+    | 'IconLocation'
+    | 'IconMegaphone'
+    | 'IconMenu'
+    | 'IconMessageBubble'
+    | 'IconMessageBubbleFill'
+    | 'IconMessageBubbles'
+    | 'IconMicrophoneSolid'
+    | 'IconMinus'
+    | 'IconMinusCircle'
+    | 'IconMore'
+    | 'IconMute'
+    | 'IconNoSign'
+    | 'IconNotification'
+    | 'IconPauseFill'
+    | 'IconPin'
+    | 'IconPlayFill'
+    | 'IconPlus'
+    | 'IconPlusSmall'
+    | 'IconPoll'
+    | 'IconQuote'
+    | 'IconRefresh'
+    | 'IconReorder'
+    | 'IconReply'
+    | 'IconRetry'
+    | 'IconSearch'
+    | 'IconSend'
+    | 'IconShield'
+    | 'IconThread'
+    | 'IconThreadFill'
+    | 'IconTranslate'
+    | 'IconTrophy'
+    | 'IconUnpin'
+    | 'IconUnsupportedAttachment'
+    | 'IconUpload'
+    | 'IconUser'
+    | 'IconUserAdd'
+    | 'IconUserCheck'
+    | 'IconUserRemove'
+    | 'IconUsers'
+    | 'IconVideo'
+    | 'IconVideoFill'
+    | 'IconVoice'
+    | 'IconXmark'
+    | 'IconXmarkSmall',
+    IconComponent
+  >
+>;
diff --git a/src/components/Loading/LoadingIndicator.tsx b/src/components/Loading/LoadingIndicator.tsx
index 1ba631195..69a040ad3 100644
--- a/src/components/Loading/LoadingIndicator.tsx
+++ b/src/components/Loading/LoadingIndicator.tsx
@@ -1,8 +1,10 @@
 import React, { type ComponentProps } from 'react';
-import { IconLoading } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconLoading as DefaultIconLoading } from '../Icons';
 
-export type LoadingIndicatorProps = ComponentProps<typeof IconLoading>;
+export type LoadingIndicatorProps = ComponentProps<typeof DefaultIconLoading>;
 
-export const LoadingIndicator = (props: LoadingIndicatorProps) => (
-  <IconLoading {...props} className='str-chat__loading-indicator' />
-);
+export const LoadingIndicator = (props: LoadingIndicatorProps) => {
+  const { icons: { IconLoading = DefaultIconLoading } = {} } = useComponentContext();
+  return <IconLoading {...props} className='str-chat__loading-indicator' />;
+};
diff --git a/src/components/Location/ShareLocationDialog.tsx b/src/components/Location/ShareLocationDialog.tsx
index 5496147b9..80742f1e3 100644
--- a/src/components/Location/ShareLocationDialog.tsx
+++ b/src/components/Location/ShareLocationDialog.tsx
@@ -5,14 +5,14 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import { ContextMenuBody, ContextMenuButton, ContextMenuRoot, Prompt } from '../Dialog';
 import {
   Dropdown,
   type DropdownTriggerProps,
   useDropdownContext,
 } from '../Form/Dropdown';
-import { IconChevronDown } from '../Icons';
+import { IconChevronDown as DefaultIconChevronDown } from '../Icons';
 import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
 import { SwitchField } from '../Form/SwitchField';
 import { useNotificationApi } from '../Notifications';
@@ -65,6 +65,9 @@ export const ShareLocationDialog = ({
   GeolocationMap = DefaultGeolocationMap,
   shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS,
 }: ShareLocationDialogProps) => {
+  const { icons: { IconChevronDown = DefaultIconChevronDown } = {} } =
+    useComponentContext();
+
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposerController();
@@ -101,7 +104,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 a3b96cb52..664f6c952 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
@@ -1,13 +1,24 @@
 import { CheckSignIcon } from '../../MessageComposer/icons';
-import { IconDelete, IconPauseFill, IconVoice } from '../../Icons';
+import {
+  IconDelete as DefaultIconDelete,
+  IconPauseFill as DefaultIconPauseFill,
+  IconVoice as DefaultIconVoice,
+} from '../../Icons';
 import React from 'react';
-import { useMessageComposerContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
 import { useNotificationApi } from '../../Notifications';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 
 const ToggleRecordingButton = () => {
+  const {
+    icons: { IconPauseFill = DefaultIconPauseFill, IconVoice = DefaultIconVoice } = {},
+  } = useComponentContext();
   const { t } = useTranslationContext();
   const {
     recordingController: { recorder, recordingState },
@@ -31,6 +42,8 @@ const ToggleRecordingButton = () => {
 };
 
 export const AudioRecorderRecordingControls = () => {
+  const { icons: { IconDelete = DefaultIconDelete } = {} } = useComponentContext();
+
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const {
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
index 03abcdf0f..39a6885c6 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../../context';
 import { Callout, useDialogOnNearestManager } from '../../Dialog';
 import { Button } from '../../Button';
-import { IconVoice } from '../../Icons';
+import { IconVoice as DefaultIconVoice } from '../../Icons';
 
 const dialogId = 'recording-permission-denied-notification';
 
@@ -69,6 +69,7 @@ export const DefaultStartRecordingAudioButton = forwardRef<
   StartRecordingAudioButtonProps
 >(function StartRecordingAudioButton(props, ref) {
   const { t } = useTranslationContext();
+  const { icons: { IconVoice = DefaultIconVoice } = {} } = useComponentContext();
 
   return (
     <Button
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
index a4fcc6e62..c129b81dc 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
@@ -3,9 +3,12 @@ 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 {
+  IconPauseFill as DefaultIconPauseFill,
+  IconPlayFill as DefaultIconPlayFill,
+} from '../../Icons';
 import { Button } from '../../Button';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import clsx from 'clsx';
 
 const audioPlayerStateSelector = (state: AudioPlayerState) => ({
@@ -27,6 +30,13 @@ export const AudioRecordingPlayback = ({
   src,
   waveformData,
 }: AudioRecordingPlayerProps) => {
+  const {
+    icons: {
+      IconPauseFill = DefaultIconPauseFill,
+      IconPlayFill = DefaultIconPlayFill,
+    } = {},
+  } = useComponentContext();
+
   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..d9fea84b0 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTimeElapsed } from './hooks/useTimeElapsed';
-import { useMessageComposerContext } from '../../../context';
+import { useComponentContext, useMessageComposerContext } from '../../../context';
 import { RecordingTimer } from './RecordingTimer';
-import { IconVoice } from '../../Icons';
+import { IconVoice as DefaultIconVoice } from '../../Icons';
 
 type WaveformProps = {
   maxDataPointsDrawn?: number;
@@ -47,6 +47,8 @@ const AudioRecordingWaveform = ({ maxDataPointsDrawn = 200 }: WaveformProps) =>
   );
 };
 export const AudioRecordingPreview = () => {
+  const { icons: { IconVoice = DefaultIconVoice } = {} } = useComponentContext();
+
   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..85b39b723 100644
--- a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx
@@ -34,6 +34,7 @@ const tSpy = (s) => s;
 
 vi.mock('../../../../context', () => ({
   useChatContext: () => ({ client: mockClient }),
+  useComponentContext: () => ({}),
   useTranslationContext: () => ({ t: tSpy }),
 }));
 
diff --git a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
index 29d9fe48c..ac8f68d71 100644
--- a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
+++ b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 
-import { IconArrowUpRight } from '../Icons';
+import { IconArrowUpRight as DefaultIconArrowUpRight } from '../Icons';
 import { useNotificationApi } from '../Notifications';
 import {
   useChannelActionContext,
   useChannelStateContext,
+  useComponentContext,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
@@ -14,6 +15,9 @@ import { formatMessage, type LocalMessage } from 'stream-chat';
  * Indicator shown when the message was also sent to the main channel (show_in_channel === true).
  */
 export const MessageAlsoSentInChannelIndicator = () => {
+  const { icons: { IconArrowUpRight = DefaultIconArrowUpRight } = {} } =
+    useComponentContext();
+
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
diff --git a/src/components/Message/MessageDeletedBubble.tsx b/src/components/Message/MessageDeletedBubble.tsx
index ab2e86e4b..be247e780 100644
--- a/src/components/Message/MessageDeletedBubble.tsx
+++ b/src/components/Message/MessageDeletedBubble.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { IconNoSign } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconNoSign as DefaultIconNoSign } from '../Icons';
 import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { LocalMessage } from 'stream-chat';
@@ -11,6 +12,8 @@ export type MessageDeletedProps = {
 };
 
 export const MessageDeletedBubble = () => {
+  const { icons: { IconNoSign = DefaultIconNoSign } = {} } = useComponentContext();
+
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx
index 37f04b8ba..70a87ff79 100644
--- a/src/components/Message/MessageStatus.tsx
+++ b/src/components/Message/MessageStatus.tsx
@@ -6,9 +6,14 @@ import { PopperTooltip } from '../Tooltip';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 
 import { useChatContext } from '../../context/ChatContext';
+import { useComponentContext } from '../../context';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconCheckmark1Small, IconChecks, IconClock } from '../Icons';
+import {
+  IconCheckmark1Small as DefaultIconCheckmark1Small,
+  IconChecks as DefaultIconChecks,
+  IconClock as DefaultIconClock,
+} from '../Icons';
 
 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'. */
@@ -49,6 +54,13 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => {
     threadList,
   } = useMessageContext('MessageStatus');
   const { t } = useTranslationContext('MessageStatus');
+  const {
+    icons: {
+      IconCheckmark1Small = DefaultIconCheckmark1Small,
+      IconChecks = DefaultIconChecks,
+      IconClock = DefaultIconClock,
+    } = {},
+  } = useComponentContext();
   const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
 
   if (!isMyMessage() || message.type === 'error') return null;
diff --git a/src/components/Message/MessageTranslationIndicator.tsx b/src/components/Message/MessageTranslationIndicator.tsx
index 1a32cf8a2..f99daa9f5 100644
--- a/src/components/Message/MessageTranslationIndicator.tsx
+++ b/src/components/Message/MessageTranslationIndicator.tsx
@@ -1,8 +1,9 @@
 import type { LocalMessage } from 'stream-chat';
 import React, { useCallback, useMemo } from 'react';
-import { IconTranslate } from '../Icons';
+import { IconTranslate as DefaultIconTranslate } from '../Icons';
 import {
   getTranslatedMessageText,
+  useComponentContext,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
@@ -15,6 +16,8 @@ export type TranslationIndicatorProps = {
 export const MessageTranslationIndicator = ({
   message: propMessage,
 }: TranslationIndicatorProps) => {
+  const { icons: { IconTranslate = DefaultIconTranslate } = {} } = useComponentContext();
+
   const { t, userLanguage } = useTranslationContext();
   const {
     message: contextMessage,
diff --git a/src/components/Message/PinIndicator.tsx b/src/components/Message/PinIndicator.tsx
index a8e1b1858..f30d30dcf 100644
--- a/src/components/Message/PinIndicator.tsx
+++ b/src/components/Message/PinIndicator.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 
-import { IconPin } from '../Icons';
-import { useChatContext, useTranslationContext } from '../../context';
+import { IconPin as DefaultIconPin } from '../Icons';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import type { LocalMessage } from 'stream-chat';
 
 export type PinIndicatorProps = {
@@ -15,6 +19,7 @@ export type PinIndicatorProps = {
 export const PinIndicator = ({ message }: PinIndicatorProps) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
+  const { icons: { IconPin = DefaultIconPin } = {} } = useComponentContext();
 
   if (!message) return null;
 
diff --git a/src/components/Message/ReminderNotification.tsx b/src/components/Message/ReminderNotification.tsx
index 0b2736ed5..bf34ad6d7 100644
--- a/src/components/Message/ReminderNotification.tsx
+++ b/src/components/Message/ReminderNotification.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import { useStateStore } from '../../store';
 import type { Reminder, ReminderState } from 'stream-chat';
-import { IconBell, IconBookmark } from '../Icons';
+import {
+  IconBell as DefaultIconBell,
+  IconBookmark as DefaultIconBookmark,
+} from '../Icons';
 
 export type ReminderNotificationProps = {
   reminder?: Reminder;
@@ -13,6 +16,7 @@ const reminderStateSelector = (state: ReminderState) => ({
 });
 
 function SavedForLaterContent() {
+  const { icons: { IconBookmark = DefaultIconBookmark } = {} } = useComponentContext();
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__message-saved-for-later'>
@@ -25,6 +29,7 @@ function SavedForLaterContent() {
 const THRESHOLD_RELATIVE_MINUTES = 59;
 
 function RemindMeContent({ reminder }: { reminder: Reminder }) {
+  const { icons: { IconBell = DefaultIconBell } = {} } = useComponentContext();
   const { t } = useTranslationContext();
   const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
 
diff --git a/src/components/MessageActions/DownloadSubmenu.tsx b/src/components/MessageActions/DownloadSubmenu.tsx
index e342cafeb..d37104a3e 100644
--- a/src/components/MessageActions/DownloadSubmenu.tsx
+++ b/src/components/MessageActions/DownloadSubmenu.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
-import { useMessageContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import {
   ContextMenuBackButton,
   ContextMenuButton,
   ContextMenuHeader,
   useContextMenuContext,
 } from '../Dialog';
-import { IconChevronLeft, IconDownload } from '../Icons';
+import {
+  IconChevronLeft as DefaultIconChevronLeft,
+  IconDownload as DefaultIconDownload,
+} from '../Icons';
 import {
   downloadAllAttachments,
   downloadAttachment,
@@ -17,6 +24,9 @@ const msgActionsBoxButtonClassName =
   'str-chat__message-actions-list-item-button' as const;
 
 export const DownloadSubmenuHeader = () => {
+  const { icons: { IconChevronLeft = DefaultIconChevronLeft } = {} } =
+    useComponentContext();
+
   const { returnToParentMenu: goBack } = useContextMenuContext();
   const { t } = useTranslationContext();
   return (
@@ -30,6 +40,7 @@ export const DownloadSubmenuHeader = () => {
 };
 
 export const DownloadSubmenu = () => {
+  const { icons: { IconDownload = DefaultIconDownload } = {} } = useComponentContext();
   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 22daec169..0680e81d6 100644
--- a/src/components/MessageActions/MessageActions.defaults.tsx
+++ b/src/components/MessageActions/MessageActions.defaults.tsx
@@ -3,28 +3,28 @@ 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,
+  IconAudio as DefaultIconAudio,
+  IconBell as DefaultIconBell,
+  IconBellOff as DefaultIconBellOff,
+  IconBookmark as DefaultIconBookmark,
+  IconBookmarkRemove as DefaultIconBookmarkRemove,
+  IconCopy as DefaultIconCopy,
+  IconDelete as DefaultIconDelete,
+  IconDownload as DefaultIconDownload,
+  IconEdit as DefaultIconEdit,
+  IconEmoji as DefaultIconEmoji,
+  IconFlag as DefaultIconFlag,
+  IconMore as DefaultIconMore,
+  IconMute as DefaultIconMute,
+  IconNoSign as DefaultIconNoSign,
+  IconNotification as DefaultIconNotification,
+  IconPin as DefaultIconPin,
+  IconQuote as DefaultIconQuote,
+  IconReply as DefaultIconReply,
+  IconRetry as DefaultIconRetry,
+  IconThread as DefaultIconThread,
+  IconUnpin as DefaultIconUnpin,
+  IconUserCheck as DefaultIconUserCheck,
 } from '../Icons';
 import { isMessageDeleted, isUserMuted } from '../Message/utils';
 import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
@@ -91,6 +91,7 @@ const DefaultMessageActionComponents = {
       });
       const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
 
+      const { icons: { IconEmoji = DefaultIconEmoji } = {} } = useComponentContext();
       return (
         <>
           <DialogAnchor
@@ -136,6 +137,7 @@ const DefaultMessageActionComponents = {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
 
+      const { icons: { IconThread = DefaultIconThread } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Open Thread')}
@@ -170,6 +172,7 @@ const DefaultMessageActionComponents = {
         }
       };
 
+      const { icons: { IconQuote = DefaultIconQuote } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Quote Message')}
@@ -188,6 +191,8 @@ const DefaultMessageActionComponents = {
       const { closeMenu, openSubmenu } = useContextMenuContext();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
+      const { icons: { IconDownload = DefaultIconDownload } = {} } =
+        useComponentContext();
 
       const downloadableAttachments = (message.attachments ?? []).filter(
         isDownloadableAttachment,
@@ -225,6 +230,8 @@ const DefaultMessageActionComponents = {
       const { addNotification } = useNotificationApi();
       const { t } = useTranslationContext();
       const isPinned = !!message.pinned;
+      const { icons: { IconPin = DefaultIconPin, IconUnpin = DefaultIconUnpin } = {} } =
+        useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={isPinned ? t('aria/Unpin Message') : t('aria/Pin Message')}
@@ -269,6 +276,7 @@ const DefaultMessageActionComponents = {
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
 
+      const { icons: { IconCopy = DefaultIconCopy } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Copy Message Text')}
@@ -288,6 +296,7 @@ const DefaultMessageActionComponents = {
       const { handleRetry, message } = useMessageContext();
       const { t } = useTranslationContext();
 
+      const { icons: { IconRetry = DefaultIconRetry } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Resend Message')}
@@ -308,6 +317,7 @@ const DefaultMessageActionComponents = {
       const { t } = useTranslationContext();
       const { closeMenu } = useContextMenuContext();
 
+      const { icons: { IconEdit = DefaultIconEdit } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Edit Message')}
@@ -329,6 +339,8 @@ const DefaultMessageActionComponents = {
       const { addNotification } = useNotificationApi();
       const { t } = useTranslationContext();
 
+      const { icons: { IconNotification = DefaultIconNotification } = {} } =
+        useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Mark Message Unread')}
@@ -377,6 +389,9 @@ const DefaultMessageActionComponents = {
       const { t } = useTranslationContext();
       const { message } = useMessageContext();
       const reminder = useMessageReminder(message.id);
+      const {
+        icons: { IconBell = DefaultIconBell, IconBellOff = DefaultIconBellOff } = {},
+      } = useComponentContext();
       const messageAlreadyBookmarked = reminder && !reminder?.remindAt;
 
       if (messageAlreadyBookmarked) return null;
@@ -434,6 +449,12 @@ const DefaultMessageActionComponents = {
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
       const reminder = useMessageReminder(message.id);
+      const {
+        icons: {
+          IconBookmark = DefaultIconBookmark,
+          IconBookmarkRemove = DefaultIconBookmarkRemove,
+        } = {},
+      } = useComponentContext();
       const messageAlreadyHasReminderScheduled = Boolean(reminder && reminder?.remindAt);
 
       if (messageAlreadyHasReminderScheduled) return null;
@@ -503,6 +524,7 @@ const DefaultMessageActionComponents = {
       const { addNotification } = useNotificationApi();
       const { t } = useTranslationContext();
 
+      const { icons: { IconFlag = DefaultIconFlag } = {} } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={t('aria/Flag Message')}
@@ -547,6 +569,8 @@ const DefaultMessageActionComponents = {
       const { t } = useTranslationContext();
 
       const isMuted = isUserMuted(message, mutes);
+      const { icons: { IconAudio = DefaultIconAudio, IconMute = DefaultIconMute } = {} } =
+        useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={isMuted ? t('aria/Unmute User') : t('aria/Mute User')}
@@ -595,7 +619,8 @@ const DefaultMessageActionComponents = {
     Delete() {
       const { closeMenu } = useContextMenuContext();
       const { addNotification } = useNotificationApi();
-      const { Modal = GlobalModal } = useComponentContext();
+      const { icons: { IconDelete = DefaultIconDelete } = {}, Modal = GlobalModal } =
+        useComponentContext();
       const { handleDelete, message } = useMessageContext();
       const { t } = useTranslationContext();
       const [openModal, setOpenModal] = useState(false);
@@ -663,6 +688,12 @@ const DefaultMessageActionComponents = {
         !message.user?.id ||
         new Set(client.blockedUsers.getLatestValue().userIds).has(message.user?.id);
 
+      const {
+        icons: {
+          IconNoSign = DefaultIconNoSign,
+          IconUserCheck = DefaultIconUserCheck,
+        } = {},
+      } = useComponentContext();
       return (
         <MessageActionsMenuItemButton
           aria-label={isBlocked ? t('Unblock') : t('aria/Block User')}
@@ -701,6 +732,7 @@ const DefaultMessageActionComponents = {
         id: `${reactionSelectorDialogId}-dropdown`,
       });
 
+      const { icons: { IconMore = DefaultIconMore } = {} } = useComponentContext();
       return (
         <QuickMessageActionsButton
           aria-expanded={dropdownDialogIsOpen}
@@ -721,12 +753,14 @@ const DefaultMessageActionComponents = {
       );
     }),
     React() {
+      const { icons: { IconEmoji = DefaultIconEmoji } = {} } = useComponentContext();
       return <ReactionSelectorWithButton ReactionIcon={IconEmoji} />;
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
 
+      const { icons: { IconReply = DefaultIconReply } = {} } = useComponentContext();
       return (
         <QuickMessageActionsButton
           aria-label={t('aria/Open Thread')}
diff --git a/src/components/MessageActions/RemindMeSubmenu.tsx b/src/components/MessageActions/RemindMeSubmenu.tsx
index 1964d34a3..dae79c4c8 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,
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import { useNotificationApi } from '../Notifications';
 import {
   ContextMenuBackButton,
@@ -7,7 +12,7 @@ import {
   ContextMenuHeader,
   useContextMenuContext,
 } from '../Dialog';
-import { IconChevronLeft } from '../Icons';
+import { IconChevronLeft as DefaultIconChevronLeft } from '../Icons';
 
 const getErrorMessage = (error: unknown, fallback: string) =>
   error instanceof Error && error.message ? error.message : fallback;
@@ -23,6 +28,9 @@ const getNotificationError = (error: unknown): Error | undefined => {
 };
 
 export const RemindMeSubmenuHeader = () => {
+  const { icons: { IconChevronLeft = DefaultIconChevronLeft } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext();
   const { returnToParentMenu } = useContextMenuContext();
   return (
diff --git a/src/components/MessageBounce/MessageBouncePrompt.tsx b/src/components/MessageBounce/MessageBouncePrompt.tsx
index d24bd5642..bd10f6566 100644
--- a/src/components/MessageBounce/MessageBouncePrompt.tsx
+++ b/src/components/MessageBounce/MessageBouncePrompt.tsx
@@ -1,12 +1,13 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 import {
+  useComponentContext,
   useMessageBounceContext,
   useModalContext,
   useTranslationContext,
 } from '../../context';
 import { Button } from '../Button';
-import { IconExclamationMark } from '../Icons';
+import { IconExclamationMark as DefaultIconExclamationMark } from '../Icons';
 import { Alert } from '../Dialog';
 import type { PropsWithChildrenOnly } from '../../types/types';
 
@@ -14,6 +15,9 @@ export type MessageBouncePromptProps = PropsWithChildrenOnly;
 
 // todo: shall we rename this to MessageBounceAlert?
 export function MessageBouncePrompt({ children }: MessageBouncePromptProps) {
+  const { icons: { IconExclamationMark = DefaultIconExclamationMark } = {} } =
+    useComponentContext();
+
   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 d924ba248..f2dfc7124 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
@@ -4,13 +4,16 @@ import {
   type LocalAudioAttachment,
   type LocalVoiceRecordingAttachment,
 } from 'stream-chat';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, 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 {
+  IconExclamationMark as DefaultIconExclamationMark,
+  IconExclamationTriangleFill as DefaultIconExclamationTriangleFill,
+} from '../../Icons';
 import { PlayButton } from '../../Button';
 import {
   type AudioPlayerState,
@@ -41,6 +44,13 @@ export const AudioAttachmentPreview = ({
   handleRetry,
   removeAttachments,
 }: AudioAttachmentPreviewProps) => {
+  const {
+    icons: {
+      IconExclamationMark = DefaultIconExclamationMark,
+      IconExclamationTriangleFill = DefaultIconExclamationTriangleFill,
+    } = {},
+  } = useComponentContext();
+
   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 225f12d5a..734a5ab39 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 { useComponentContext, useTranslationContext } from '../../../context';
 import { FileIcon } from '../../FileIcon';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
@@ -7,7 +7,10 @@ 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';
+import {
+  IconExclamationMark as DefaultIconExclamationMark,
+  IconExclamationTriangleFill as DefaultIconExclamationTriangleFill,
+} from '../../Icons';
 
 export type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> =
   UploadAttachmentPreviewProps<
@@ -19,6 +22,13 @@ export const FileAttachmentPreview = ({
   handleRetry,
   removeAttachments,
 }: FileAttachmentPreviewProps) => {
+  const {
+    icons: {
+      IconExclamationMark = DefaultIconExclamationMark,
+      IconExclamationTriangleFill = DefaultIconExclamationTriangleFill,
+    } = {},
+  } = useComponentContext();
+
   const { t } = useTranslationContext('FilePreview');
   const { id, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
diff --git a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
index b6a341778..ab18a167f 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
@@ -1,19 +1,24 @@
 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 { useComponentContext, useTranslationContext } from '../../../context';
+import { IconLocation as DefaultIconLocation } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 
 type GeolocationPreviewImageProps = {
   location: StaticLocationPreview | LiveLocationPreview;
 };
 
-const GeolocationPreviewImage = () => (
-  <div className='str-chat__location-preview-image'>
-    <IconLocation />
-  </div>
-);
+const GeolocationPreviewImage = () => {
+  const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext(
+    'GeolocationPreviewImage',
+  );
+  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 788162fab..e98c06863 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -14,7 +14,10 @@ import React, {
   useState,
 } from 'react';
 import clsx from 'clsx';
-import { IconExclamationMark, IconRetry } from '../../Icons';
+import {
+  IconExclamationMark as DefaultIconExclamationMark,
+  IconRetry as DefaultIconRetry,
+} from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
@@ -34,6 +37,13 @@ export const MediaAttachmentPreview = ({
   openPreview,
   removeAttachments,
 }: MediaAttachmentPreviewProps) => {
+  const {
+    icons: {
+      IconExclamationMark = DefaultIconExclamationMark,
+      IconRetry = DefaultIconRetry,
+    } = {},
+  } = useComponentContext();
+
   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 74f890e43..d97043260 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AnyLocalAttachment, LocalUploadAttachment } from 'stream-chat';
-import { IconUnsupportedAttachment } from '../../Icons';
-import { useTranslationContext } from '../../../context';
+import { IconUnsupportedAttachment as DefaultIconUnsupportedAttachment } from '../../Icons';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 
 export type UnsupportedAttachmentPreviewProps<
@@ -18,6 +18,9 @@ export const UnsupportedAttachmentPreview = ({
   attachment,
   removeAttachments,
 }: UnsupportedAttachmentPreviewProps) => {
+  const { icons: { IconUnsupportedAttachment = DefaultIconUnsupportedAttachment } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext();
   const { id } = attachment.localMetadata ?? {};
 
diff --git a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
index 4ddb89e0d..97e55809c 100644
--- a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
+++ b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
@@ -43,11 +43,11 @@ import type { TextComposerState } from 'stream-chat';
 import clsx from 'clsx';
 import { Button, type ButtonProps } from '../../Button';
 import {
-  IconAttachment,
-  IconCommand,
-  IconLocation,
-  IconPlus,
-  IconPoll,
+  IconAttachment as DefaultIconAttachment,
+  IconCommand as DefaultIconCommand,
+  IconLocation as DefaultIconLocation,
+  IconPlus as DefaultIconPlus,
+  IconPoll as DefaultIconPoll,
 } from '../../Icons';
 import { useIsCooldownActive } from '../hooks/useIsCooldownActive';
 import {
@@ -59,6 +59,7 @@ import {
 const textComposerStateSelector = ({ command }: TextComposerState) => ({ command });
 
 const AttachmentSelectorMenuInitButtonIcon = ({ className }: { className?: string }) => {
+  const { icons: { IconPlus = DefaultIconPlus } = {} } = useComponentContext();
   const { AttachmentSelectorInitiationButtonContents } = useComponentContext();
 
   if (AttachmentSelectorInitiationButtonContents) {
@@ -169,6 +170,7 @@ export type AttachmentSelectorActionProps = {
 export const DefaultAttachmentSelectorComponents = {
   Command({ submenuHeader, submenuItems }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { icons: { IconCommand = DefaultIconCommand } = {} } = useComponentContext();
     const { openSubmenu } = useContextMenuContext();
     const commands = useMessageComposerCommands();
     const hasEnabledCommands = commands.some(({ enabled }) => enabled);
@@ -195,6 +197,8 @@ export const DefaultAttachmentSelectorComponents = {
     );
   },
   File() {
+    const { icons: { IconAttachment = DefaultIconAttachment } = {} } =
+      useComponentContext();
     const { t } = useTranslationContext();
     const { fileInput } = useAttachmentSelectorContext();
     const { closeMenu } = useContextMenuContext();
@@ -214,6 +218,7 @@ export const DefaultAttachmentSelectorComponents = {
   },
   Location({ openModalForAction }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext();
     const { closeMenu } = useContextMenuContext();
     return (
       <ContextMenuButton
@@ -230,6 +235,7 @@ export const DefaultAttachmentSelectorComponents = {
   },
   Poll({ openModalForAction }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
+    const { icons: { IconPoll = DefaultIconPoll } = {} } = useComponentContext();
     const { closeMenu } = useContextMenuContext();
     return (
       <ContextMenuButton
diff --git a/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx b/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
index 7b20fd7a0..5be27ace6 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 { CommandResponse } from 'stream-chat';
-import { useMessageComposerContext, useTranslationContext } from '../../../context';
+import {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import { useMessageComposerCommands, useMessageComposerController } from '../hooks';
 import {
   ContextMenuBackButton,
@@ -9,29 +13,23 @@ import {
   useContextMenuContext,
 } from '../../Dialog';
 import {
-  IconAudio,
-  IconChevronLeft,
-  IconFlag,
-  IconGiphy,
-  IconMute,
-  IconUserAdd,
-  IconUserRemove,
+  IconAudio as DefaultIconAudio,
+  IconChevronLeft as DefaultIconChevronLeft,
+  IconFlag as DefaultIconFlag,
+  IconGiphy as DefaultIconGiphy,
+  IconMute as DefaultIconMute,
+  IconUserAdd as DefaultIconUserAdd,
+  IconUserRemove as DefaultIconUserRemove,
 } from '../../Icons';
 import { useInteractionAnnouncements } from '../../Accessibility';
 import clsx from 'clsx';
 
-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 { icons: { IconChevronLeft = DefaultIconChevronLeft } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext();
   const { returnToParentMenu } = useContextMenuContext();
   return (
@@ -129,6 +127,28 @@ export const CommandContextMenuItem = ({
   enabled?: boolean;
 }) => {
   const { args, description } = useCommandTranslation(command);
+  const {
+    icons: {
+      IconAudio = DefaultIconAudio,
+      IconFlag = DefaultIconFlag,
+      IconGiphy = DefaultIconGiphy,
+      IconMute = DefaultIconMute,
+      IconUserAdd = DefaultIconUserAdd,
+      IconUserRemove = DefaultIconUserRemove,
+    } = {},
+  } = useComponentContext();
+
+  const icons = useMemo<Record<string, ComponentType>>(
+    () => ({
+      ban: IconUserRemove,
+      flag: IconFlag,
+      giphy: IconGiphy,
+      mute: IconMute,
+      unban: IconUserAdd,
+      unmute: IconAudio,
+    }),
+    [IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove],
+  );
 
   // todo: retrieve the command trigger char from textComposer - needed adjustment in LLC
   const details = useMemo(
diff --git a/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx b/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
index 43ecb142c..6da303bd3 100644
--- a/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
+++ b/src/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsx
@@ -24,6 +24,7 @@ vi.mock('../../../Dialog', async (importOriginal) => ({
 }));
 
 vi.mock('../../../../context', () => ({
+  useComponentContext: () => ({}),
   useMessageComposerContext: () => ({ textareaRef: { current: null } }),
   useTranslationContext: () => ({ t }),
 }));
diff --git a/src/components/MessageComposer/CommandChip.tsx b/src/components/MessageComposer/CommandChip.tsx
index 436a0b4eb..91f60b1f8 100644
--- a/src/components/MessageComposer/CommandChip.tsx
+++ b/src/components/MessageComposer/CommandChip.tsx
@@ -1,13 +1,20 @@
 import { useMessageComposerController } from './hooks';
 import type { TextComposerState } from 'stream-chat';
-import { IconBolt, IconXmark } from '../Icons';
-import { useMessageComposerContext, useTranslationContext } from '../../context';
+import { IconBolt as DefaultIconBolt, IconXmark as DefaultIconXmark } from '../Icons';
+import {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 
 export type CommandChipProps = {
   command?: TextComposerState['command'];
 };
 
 export const CommandChip = ({ command }: CommandChipProps) => {
+  const { icons: { IconBolt = DefaultIconBolt, IconXmark = DefaultIconXmark } = {} } =
+    useComponentContext();
+
   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..fc0f46bea 100644
--- a/src/components/MessageComposer/LinkPreviewList.tsx
+++ b/src/components/MessageComposer/LinkPreviewList.tsx
@@ -8,7 +8,8 @@ import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useMessageComposerController } from './hooks';
 import { BaseImage } from '../BaseImage';
 import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';
-import { IconLink } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconLink as DefaultIconLink } from '../Icons';
 
 export type LinkPreviewListProps = {
   displayLinkCount?: number;
@@ -46,6 +47,7 @@ type LinkPreviewProps = {
 };
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
+  const { icons: { IconLink = DefaultIconLink } = {} } = useComponentContext();
   const { linkPreviewsManager } = useMessageComposerController();
   const { handleEnter, handleLeave, tooltipVisible } =
     useEnterLeaveHandlers<HTMLDivElement>();
diff --git a/src/components/MessageComposer/MessageComposerActions.tsx b/src/components/MessageComposer/MessageComposerActions.tsx
index 7a521c566..b07e1b485 100644
--- a/src/components/MessageComposer/MessageComposerActions.tsx
+++ b/src/components/MessageComposer/MessageComposerActions.tsx
@@ -13,7 +13,10 @@ import { AudioRecordingButtonWithNotification } from '../MediaRecorder/AudioReco
 import { useIsCooldownActive } from './hooks/useIsCooldownActive';
 import type { MessageComposerState, TextComposerState } from 'stream-chat';
 import { useStateStore } from '../../store';
-import { IconCheckmark, IconSend } from '../Icons';
+import {
+  IconCheckmark as DefaultIconCheckmark,
+  IconSend as DefaultIconSend,
+} from '../Icons';
 import { useInertWhenHidden } from '../Accessibility';
 
 const messageComposerStateSelector = ({ editedMessage }: MessageComposerState) => ({
@@ -26,6 +29,10 @@ const textComposerStateSelector = ({ command, text }: TextComposerState) => ({
 });
 
 export const MessageComposerActions = () => {
+  const {
+    icons: { IconCheckmark = DefaultIconCheckmark, IconSend = DefaultIconSend } = {},
+  } = useComponentContext();
+
   const { channel } = useChannelStateContext();
   const { hideSendButton } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
diff --git a/src/components/MessageComposer/QuotedMessagePreview.tsx b/src/components/MessageComposer/QuotedMessagePreview.tsx
index d9cf3e345..4ebcbdb7e 100644
--- a/src/components/MessageComposer/QuotedMessagePreview.tsx
+++ b/src/components/MessageComposer/QuotedMessagePreview.tsx
@@ -34,15 +34,16 @@ import {
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import type { MessageContextValue } from '../../context';
 import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';
+import { useComponentContext } from '../../context';
 import {
-  IconCamera,
-  IconFile,
-  IconLink,
-  IconLocation,
-  IconPlayFill,
-  IconPoll,
-  IconVideo,
-  IconVoice,
+  IconCamera as DefaultIconCamera,
+  IconFile as DefaultIconFile,
+  IconLink as DefaultIconLink,
+  IconLocation as DefaultIconLocation,
+  IconPlayFill as DefaultIconPlayFill,
+  IconPoll as DefaultIconPoll,
+  IconVideo as DefaultIconVideo,
+  IconVoice as DefaultIconVoice,
 } from '../Icons';
 import clsx from 'clsx';
 import { BaseImage } from '../BaseImage';
@@ -168,9 +169,31 @@ type PreviewType =
   | 'video'
   | 'mixed';
 
+type IconSet = Record<
+  | 'IconCamera'
+  | 'IconFile'
+  | 'IconLink'
+  | 'IconLocation'
+  | 'IconPlayFill'
+  | 'IconPoll'
+  | 'IconVideo'
+  | 'IconVoice',
+  ComponentType
+>;
+
 const getAttachmentIconWithType = (
   quotedMessage: LocalMessage | null,
   giphyVersionName: GiphyVersions,
+  {
+    IconCamera,
+    IconFile,
+    IconLink,
+    IconLocation,
+    IconPlayFill,
+    IconPoll,
+    IconVideo,
+    IconVoice,
+  }: IconSet,
 ): {
   groupedAttachments: GroupedAttachments;
   Icon: ComponentType;
@@ -331,6 +354,41 @@ export const QuotedMessagePreviewUI = ({
   const { t, userLanguage } = useTranslationContext();
   const { giphyVersion: giphyVersionName = 'fixed_height' } =
     useChannelStateContext('QuotedMessagePreview');
+  const {
+    icons: {
+      IconCamera = DefaultIconCamera,
+      IconFile = DefaultIconFile,
+      IconLink = DefaultIconLink,
+      IconLocation = DefaultIconLocation,
+      IconPlayFill = DefaultIconPlayFill,
+      IconPoll = DefaultIconPoll,
+      IconVideo = DefaultIconVideo,
+      IconVoice = DefaultIconVoice,
+    } = {},
+  } = useComponentContext();
+
+  const iconSet = useMemo(
+    () => ({
+      IconCamera,
+      IconFile,
+      IconLink,
+      IconLocation,
+      IconPlayFill,
+      IconPoll,
+      IconVideo,
+      IconVoice,
+    }),
+    [
+      IconCamera,
+      IconFile,
+      IconLink,
+      IconLocation,
+      IconPlayFill,
+      IconPoll,
+      IconVideo,
+      IconVoice,
+    ],
+  );
 
   const quotedMessageText = useMemo(
     () =>
@@ -364,7 +422,7 @@ export const QuotedMessagePreviewUI = ({
       Icon: AttachmentIcon,
       PreviewImage,
       previewType,
-    } = getAttachmentIconWithType(quotedMessage, giphyVersionName);
+    } = getAttachmentIconWithType(quotedMessage, giphyVersionName, iconSet);
 
     let renderedText: ReactNode | undefined;
 
@@ -420,6 +478,7 @@ export const QuotedMessagePreviewUI = ({
     };
   }, [
     giphyVersionName,
+    iconSet,
     quotedMessage,
     quotedMessageMentionEntities,
     quotedMessageText,
diff --git a/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx b/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
index dbf4be1c1..e7cd0d3f8 100644
--- a/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
+++ b/src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import { IconXmarkSmall } from '../Icons';
+import { IconXmarkSmall as DefaultIconXmarkSmall } from '../Icons';
 import { Button } from '../Button';
 import React, { type ComponentProps } from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import type { AttachmentLoadingState } from 'stream-chat';
 
 export const RemoveAttachmentPreviewButton = ({
@@ -12,6 +12,9 @@ export const RemoveAttachmentPreviewButton = ({
 }: ComponentProps<'button'> & {
   uploadState?: AttachmentLoadingState;
 }) => {
+  const { icons: { IconXmarkSmall = DefaultIconXmarkSmall } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext();
   return (
     <Button
diff --git a/src/components/MessageComposer/SendButton.tsx b/src/components/MessageComposer/SendButton.tsx
index e58a2bf60..32f10b663 100644
--- a/src/components/MessageComposer/SendButton.tsx
+++ b/src/components/MessageComposer/SendButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useMessageComposerHasSendableData } from './hooks';
-import { useTranslationContext } from '../../context';
-import { IconSend } from '../Icons';
+import { useComponentContext, useTranslationContext } from '../../context';
+import { IconSend as DefaultIconSend } from '../Icons';
 import { Button } from '../Button';
 
 export type SendButtonProps = {
@@ -9,6 +9,8 @@ export type SendButtonProps = {
 } & React.ComponentProps<'button'>;
 
 export const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps) => {
+  const { icons: { IconSend = DefaultIconSend } = {} } = useComponentContext();
+
   const { t } = useTranslationContext();
   const hasSendableData = useMessageComposerHasSendableData();
   return (
diff --git a/src/components/MessageComposer/SendToChannelCheckbox.tsx b/src/components/MessageComposer/SendToChannelCheckbox.tsx
index c3075822a..6680c726a 100644
--- a/src/components/MessageComposer/SendToChannelCheckbox.tsx
+++ b/src/components/MessageComposer/SendToChannelCheckbox.tsx
@@ -1,16 +1,18 @@
 import clsx from 'clsx';
 import React from 'react';
 import { useMessageComposerController } from './hooks';
-import { IconCheckmark } from '../Icons';
+import { IconCheckmark as DefaultIconCheckmark } from '../Icons';
 import type { MessageComposerState } from 'stream-chat';
 import { useStateStore } from '../../store';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 const stateSelector = (state: MessageComposerState) => ({
   showReplyInChannel: state.showReplyInChannel,
 });
 
 export const SendToChannelCheckbox = () => {
+  const { icons: { IconCheckmark = DefaultIconCheckmark } = {} } = useComponentContext();
+
   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 f78d807e5..5dafa8358 100644
--- a/src/components/MessageComposer/WithDragAndDropUpload.tsx
+++ b/src/components/MessageComposer/WithDragAndDropUpload.tsx
@@ -4,11 +4,15 @@ import { useDropzone } from 'react-dropzone';
 import clsx from 'clsx';
 import type { MessageComposerConfig } from 'stream-chat';
 
-import { useMessageComposerContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 import { useAttachmentManagerState, useMessageComposerController } from './hooks';
 import { useStateStore } from '../../store';
 import { useIsCooldownActive } from './hooks/useIsCooldownActive';
-import { IconUpload } from '../Icons';
+import { IconUpload as DefaultIconUpload } from '../Icons';
 
 const DragAndDropUploadContext = React.createContext<{
   subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
@@ -161,6 +165,7 @@ export const FileDragAndDropContent = ({
   isDragRejected,
 }: FileDragAndDropContentProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconUpload = DefaultIconUpload } = {} } = useComponentContext();
   return (
     <div className='str-chat__dropzone-container__content'>
       {isDragRejected ? (
diff --git a/src/components/MessageComposer/__tests__/CommandChip.test.tsx b/src/components/MessageComposer/__tests__/CommandChip.test.tsx
index 0ad19c2d2..d600c160b 100644
--- a/src/components/MessageComposer/__tests__/CommandChip.test.tsx
+++ b/src/components/MessageComposer/__tests__/CommandChip.test.tsx
@@ -14,6 +14,7 @@ vi.mock('../hooks', () => ({
 }));
 
 vi.mock('../../../context', () => ({
+  useComponentContext: () => ({}),
   useMessageComposerContext: () => ({
     textareaRef: {
       current: {
diff --git a/src/components/MessageList/ScrollToLatestMessageButton.tsx b/src/components/MessageList/ScrollToLatestMessageButton.tsx
index 99d7c5de3..83a32c757 100644
--- a/src/components/MessageList/ScrollToLatestMessageButton.tsx
+++ b/src/components/MessageList/ScrollToLatestMessageButton.tsx
@@ -3,13 +3,14 @@ import React, { useEffect, useState } from 'react';
 import {
   useChannelStateContext,
   useChatContext,
+  useComponentContext,
   useTranslationContext,
 } from '../../context';
 
 import type { Event } from 'stream-chat';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
-import { IconArrowDown } from '../Icons';
+import { IconArrowDown as DefaultIconArrowDown } from '../Icons';
 
 export type ScrollToLatestMessageButtonProps = {
   /** When true, user has jumped to an older message set and newer messages can be loaded */
@@ -32,6 +33,7 @@ const UnMemoizedScrollToLatestMessageButton = (
   const { channel: activeChannel, client } = useChatContext();
   const { thread } = useChannelStateContext();
   const { t } = useTranslationContext();
+  const { icons: { IconArrowDown = DefaultIconArrowDown } = {} } = useComponentContext();
   const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
   const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
   const observedEvent = threadList ? 'message.updated' : 'message.new';
diff --git a/src/components/MessageList/UnreadMessagesNotification.tsx b/src/components/MessageList/UnreadMessagesNotification.tsx
index a0a23aaa2..81b8dff29 100644
--- a/src/components/MessageList/UnreadMessagesNotification.tsx
+++ b/src/components/MessageList/UnreadMessagesNotification.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
-import { useChannelActionContext, useTranslationContext } from '../../context';
+import {
+  useChannelActionContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import { Button } from '../Button';
-import { IconArrowUp, IconXmark } from '../Icons';
+import {
+  IconArrowUp as DefaultIconArrowUp,
+  IconXmark as DefaultIconXmark,
+} from '../Icons';
 import clsx from 'clsx';
 
 export type UnreadMessagesNotificationProps = {
@@ -24,6 +31,10 @@ export const UnreadMessagesNotification = ({
   showCount = true,
   unreadCount,
 }: UnreadMessagesNotificationProps) => {
+  const {
+    icons: { IconArrowUp = DefaultIconArrowUp, IconXmark = DefaultIconXmark } = {},
+  } = useComponentContext();
+
   const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext();
   const { t } = useTranslationContext('UnreadMessagesNotification');
 
diff --git a/src/components/MessageList/UnreadMessagesSeparator.tsx b/src/components/MessageList/UnreadMessagesSeparator.tsx
index 884b8594b..78a0b053d 100644
--- a/src/components/MessageList/UnreadMessagesSeparator.tsx
+++ b/src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { useChannelActionContext, useTranslationContext } from '../../context';
+import {
+  useChannelActionContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
+import { IconXmark as DefaultIconXmark } from '../Icons';
 
 export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
 
@@ -20,6 +24,8 @@ export const UnreadMessagesSeparator = ({
   showCount = true,
   unreadCount,
 }: UnreadMessagesSeparatorProps) => {
+  const { icons: { IconXmark = DefaultIconXmark } = {} } = useComponentContext();
+
   const { t } = useTranslationContext('UnreadMessagesSeparator');
   const { markRead } = useChannelActionContext();
   return (
diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx
index 330c8f191..d67af0d9c 100644
--- a/src/components/Modal/CloseButtonOnModalOverlay.tsx
+++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx
@@ -1,5 +1,6 @@
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconXmark as DefaultIconXmark } from '../Icons';
 import type { ComponentProps } from 'react';
 import clsx from 'clsx';
 
@@ -8,13 +9,16 @@ 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 { icons: { IconXmark = DefaultIconXmark } = {} } = useComponentContext();
+  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 75270f2e6..0b7574373 100644
--- a/src/components/Notifications/Notification.tsx
+++ b/src/components/Notifications/Notification.tsx
@@ -3,12 +3,13 @@ import clsx from 'clsx';
 import type { NotificationSeverity } from 'stream-chat';
 import { type Notification as NotificationType } from 'stream-chat';
 
+import { useComponentContext } from '../../context';
 import {
-  IconCheckmark,
-  IconExclamationMark,
-  IconExclamationTriangleFill,
-  IconRefresh,
-  IconXmark,
+  IconCheckmark as DefaultIconCheckmark,
+  IconExclamationMark as DefaultIconExclamationMark,
+  IconExclamationTriangleFill as DefaultIconExclamationTriangleFill,
+  IconRefresh as DefaultIconRefresh,
+  IconXmark as DefaultIconXmark,
 } from '../../components/Icons';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { Button } from '../Button';
@@ -21,18 +22,26 @@ 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 {
+    icons: {
+      IconCheckmark = DefaultIconCheckmark,
+      IconExclamationMark = DefaultIconExclamationMark,
+      IconExclamationTriangleFill = DefaultIconExclamationTriangleFill,
+      IconRefresh = DefaultIconRefresh,
+    } = {},
+  } = useComponentContext();
   if (!notification.severity) return null;
 
-  const Icon = IconsBySeverity[notification.severity] ?? null;
+  const iconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {
+    error: IconExclamationMark,
+    info: null,
+    loading: IconRefresh,
+    success: IconCheckmark,
+    warning: IconExclamationTriangleFill,
+  };
+
+  const Icon = iconsBySeverity[notification.severity] ?? null;
   return (
     Icon && (
       <div className='str-chat__notification-icon'>
@@ -72,6 +81,8 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
     }: NotificationProps,
     ref,
   ) => {
+    const { icons: { IconXmark = DefaultIconXmark } = {} } = useComponentContext();
+
     const { removeNotification } = useNotificationApi();
     const { t } = useTranslationContext();
 
diff --git a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
index 6e37c8bfc..f68ccdde0 100644
--- a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import { useStateStore } from '../../../../store';
-import { usePollContext, useTranslationContext } from '../../../../context';
+import {
+  useComponentContext,
+  usePollContext,
+  useTranslationContext,
+} from '../../../../context';
 import type { PollOption, PollState } from 'stream-chat';
-import { IconTrophy } from '../../../Icons';
+import { IconTrophy as DefaultIconTrophy } from '../../../Icons';
 
 type PollStateSelectorReturnValue = {
   maxVotedOptionIds: string[];
@@ -20,6 +24,8 @@ export type PollResultOptionVoteCounterProps = {
 export const PollResultOptionVoteCounter = ({
   optionId,
 }: PollResultOptionVoteCounterProps) => {
+  const { icons: { IconTrophy = DefaultIconTrophy } = {} } = useComponentContext();
+
   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 e597ce70a..f6284bb16 100644
--- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
+++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { TextInput } from '../../Form/TextInput';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';
 import { useStateStore } from '../../../store';
 import type { PollComposerOption, PollComposerState } from 'stream-chat';
-import { IconMinusCircle } from '../../Icons';
+import { IconMinusCircle as DefaultIconMinusCircle } from '../../Icons';
 import { Button, type ButtonProps } from '../../Button';
 import { TextInputFieldSet } from '../../Form/TextInputFieldSet';
 import { VisuallyHidden } from '../../VisuallyHidden';
@@ -281,15 +281,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 { icons: { IconMinusCircle = DefaultIconMinusCircle } = {} } =
+    useComponentContext();
+  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 b218f909e..d0e4b5bbc 100644
--- a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
+++ b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
@@ -2,9 +2,13 @@ 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 {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import clsx from 'clsx';
-import { IconSend } from '../../Icons';
+import { IconSend as DefaultIconSend } from '../../Icons';
 import { Prompt } from '../../Dialog';
 import { useNotificationApi } from '../../Notifications';
 
@@ -15,6 +19,8 @@ export type PollCreationDialogControlsProps = {
 export const PollCreationDialogControls = ({
   close,
 }: PollCreationDialogControlsProps) => {
+  const { icons: { IconSend = DefaultIconSend } = {} } = useComponentContext();
+
   const { t } = useTranslationContext('PollCreationDialogControls');
   const { handleSubmit: handleSubmitMessage, textareaRef } = useMessageComposerContext();
   const messageComposer = useMessageComposerController();
diff --git a/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx b/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
index edcc0a14d..652bbe6fb 100644
--- a/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
+++ b/src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
@@ -2,9 +2,9 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import React, { useEffect, useRef } from 'react';
 import type { PollComposerOption } from 'stream-chat';
 
-import { IconReorder } from '../../Icons';
+import { IconReorder as DefaultIconReorder } from '../../Icons';
 import { useAriaLiveAnnouncer } from '../../Accessibility';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 
 type PollOptionReorderHandleProps = {
   index: number;
@@ -30,6 +30,8 @@ export const PollOptionReorderHandle = ({
   registerRef,
   totalOptionCount,
 }: PollOptionReorderHandleProps) => {
+  const { icons: { IconReorder = DefaultIconReorder } = {} } = useComponentContext();
+
   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 689a899c4..86ba3522a 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -14,7 +14,7 @@ import {
 import type { ReactionSort } from 'stream-chat';
 import { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';
 import type { useProcessReactions } from './hooks/useProcessReactions';
-import { IconEmojiAdd } from '../Icons';
+import { IconEmojiAdd as DefaultIconEmojiAdd } from '../Icons';
 import { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';
 
 export type MessageReactionsDetailProps = Partial<
@@ -66,6 +66,7 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
   const { client } = useChatContext();
   const {
     Avatar = DefaultAvatar,
+    icons: { IconEmojiAdd = DefaultIconEmojiAdd } = {},
     LoadingIndicator = MessageReactionsDetailLoadingIndicator,
     reactionOptions = defaultReactionOptions,
     ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index 2cda7962f..e6d3d6ef1 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -7,7 +7,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { Button } from '../Button';
-import { IconPlus } from '../Icons';
+import { IconPlus as DefaultIconPlus } from '../Icons';
 
 import type { ReactionResponse } from 'stream-chat';
 
@@ -41,6 +41,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
   const [extendedListOpen, setExtendedListOpen] = useState(false);
 
   const {
+    icons: { IconPlus = DefaultIconPlus } = {},
     reactionOptions = defaultReactionOptions,
     ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
   } = useComponentContext('ReactionSelector');
diff --git a/src/components/Reactions/ReactionSelectorWithButton.tsx b/src/components/Reactions/ReactionSelectorWithButton.tsx
index d489c81d3..d4cc48310 100644
--- a/src/components/Reactions/ReactionSelectorWithButton.tsx
+++ b/src/components/Reactions/ReactionSelectorWithButton.tsx
@@ -10,10 +10,15 @@ import {
 
 import type { IconProps } from '../../types/types';
 import { QuickMessageActionsButton } from '../MessageActions';
+import { IconEmoji as DefaultIconEmoji } from '../Icons';
 
 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.
+   * @deprecated Use the `icons.IconEmoji` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconEmoji: ... } }}>`) instead.
+   * Passing this prop still wins over the context slot for backwards compatibility.
+   */
+  ReactionIcon?: React.ComponentType<IconProps>;
 };
 
 /**
@@ -25,8 +30,11 @@ export const ReactionSelectorWithButton = ({
 }: ReactionSelectorWithButtonProps) => {
   const { t } = useTranslationContext('ReactionSelectorWithButton');
   const { isMyMessage, message, threadList } = useMessageContext('MessageOptions');
-  const { ReactionSelector = DefaultReactionSelector } =
-    useComponentContext('MessageOptions');
+  const {
+    icons: { IconEmoji = DefaultIconEmoji } = {},
+    ReactionSelector = DefaultReactionSelector,
+  } = useComponentContext();
+  const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;
   const buttonRef = useRef<ComponentRef<'button'>>(null);
   const dialogId = DefaultReactionSelector.getDialogId({
     messageId: message.id,
@@ -56,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/SummarizedMessagePreview/SummarizedMessagePreview.tsx b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
index acccac0f8..5561d1128 100644
--- a/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
+++ b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
@@ -6,49 +6,69 @@ import {
   useLatestMessagePreview,
   type UseLatestMessagePreviewParams,
 } from './hooks/useLatestMessagePreview';
+import { useComponentContext } from '../../context';
 import {
-  IconCamera,
-  IconCheckmark1Small,
-  IconChecks,
-  IconClock,
-  IconExclamationCircleFill,
-  IconFile,
-  IconGiphy,
-  IconLink,
-  IconLocation,
-  IconNoSign,
-  IconUnsupportedAttachment,
-  IconVideo,
-  IconVoice,
+  IconCamera as DefaultIconCamera,
+  IconCheckmark1Small as DefaultIconCheckmark1Small,
+  IconChecks as DefaultIconChecks,
+  IconClock as DefaultIconClock,
+  IconExclamationCircleFill as DefaultIconExclamationCircleFill,
+  IconFile as DefaultIconFile,
+  IconGiphy as DefaultIconGiphy,
+  IconLink as DefaultIconLink,
+  IconLocation as DefaultIconLocation,
+  IconNoSign as DefaultIconNoSign,
+  IconUnsupportedAttachment as DefaultIconUnsupportedAttachment,
+  IconVideo as DefaultIconVideo,
+  IconVoice as DefaultIconVoice,
 } from '../Icons';
 
-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 {
+    icons: {
+      IconCamera = DefaultIconCamera,
+      IconCheckmark1Small = DefaultIconCheckmark1Small,
+      IconChecks = DefaultIconChecks,
+      IconClock = DefaultIconClock,
+      IconExclamationCircleFill = DefaultIconExclamationCircleFill,
+      IconFile = DefaultIconFile,
+      IconGiphy = DefaultIconGiphy,
+      IconLink = DefaultIconLink,
+      IconLocation = DefaultIconLocation,
+      IconNoSign = DefaultIconNoSign,
+      IconUnsupportedAttachment = DefaultIconUnsupportedAttachment,
+      IconVideo = DefaultIconVideo,
+      IconVoice = DefaultIconVoice,
+    } = {},
+  } = useComponentContext();
+
+  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 d6f1e7105..b76968a8c 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';
-import { IconMegaphone } from '../../../Icons';
+import { IconMegaphone as DefaultIconMegaphone } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
-import { useTranslationContext } from '../../../../context';
+import { useComponentContext, useTranslationContext } from '../../../../context';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
 
@@ -16,6 +16,8 @@ export const BroadcastMentionItem = ({
   focused,
   ...buttonProps
 }: BroadcastMentionItemProps) => {
+  const { icons: { IconMegaphone = DefaultIconMegaphone } = {} } = useComponentContext();
+
   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 0c3de993d..dbfdc12ef 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { RoleMentionSuggestion } from 'stream-chat';
-import { IconShield } from '../../../Icons';
+import { IconShield as DefaultIconShield } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
-import { useTranslationContext } from '../../../../context';
+import { useComponentContext, useTranslationContext } from '../../../../context';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
 import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
@@ -11,6 +11,8 @@ import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
 export type RoleItemProps = MentionItemComponentProps<RoleMentionSuggestion>;
 
 export const RoleItem = ({ entity, focused, ...buttonProps }: RoleItemProps) => {
+  const { icons: { IconShield = DefaultIconShield } = {} } = useComponentContext();
+
   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..70692a2ba 100644
--- a/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
+++ b/src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { UserGroupMentionSuggestion } from 'stream-chat';
-import { IconUsers } from '../../../Icons';
+import { useComponentContext } from '../../../../context';
+import { IconUsers as DefaultIconUsers } from '../../../Icons';
 import { ListItemLayout } from '../../../ListItemLayout';
 import { MentionSuggestionTitle } from './MentionSuggestionTitle';
 import type { MentionItemComponentProps } from './types';
@@ -14,6 +15,8 @@ export const UserGroupItem = ({
   focused,
   ...buttonProps
 }: UserGroupItemProps) => {
+  const { icons: { IconUsers = DefaultIconUsers } = {} } = useComponentContext();
+
   void focused;
 
   return (
diff --git a/src/components/TextareaComposer/__tests__/CommandItem.test.tsx b/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
index 5dffad064..84f33e559 100644
--- a/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
+++ b/src/components/TextareaComposer/__tests__/CommandItem.test.tsx
@@ -22,6 +22,7 @@ vi.mock('../../MessageComposer/hooks', () => ({
 }));
 
 vi.mock('../../../context', () => ({
+  useComponentContext: () => ({}),
   useTranslationContext: () => ({
     t: (key: string) => key,
   }),
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index f61303e62..814148795 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -13,7 +13,7 @@ import { useTypingContext } from '../../context/TypingContext';
 import type { LocalMessage } from 'stream-chat';
 import type { ThreadState } from 'stream-chat';
 import { Button } from '../Button';
-import { IconXmark } from '../Icons';
+import { IconXmark as DefaultIconXmark } from '../Icons';
 import { useChatViewContext } from '../ChatView';
 
 const threadStateSelector = ({ replyCount }: ThreadState) => ({ replyCount });
@@ -72,6 +72,8 @@ export type ThreadHeaderProps = {
 };
 
 export const ThreadHeader = (props: ThreadHeaderProps) => {
+  const { icons: { IconXmark = DefaultIconXmark } = {} } = useComponentContext();
+
   const { closeThread, overrideTitle, thread } = props;
 
   const { t } = useTranslationContext();
diff --git a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
index a15dc0e52..a2b03246e 100644
--- a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
+++ b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 
-import { useTranslationContext } from '../../../context';
-import { IconMessageBubbles } from '../../Icons';
+import { useComponentContext, useTranslationContext } from '../../../context';
+import { IconMessageBubbles as DefaultIconMessageBubbles } from '../../Icons';
 
 export const ThreadListEmptyPlaceholder = () => {
+  const { icons: { IconMessageBubbles = DefaultIconMessageBubbles } = {} } =
+    useComponentContext();
+
   const { t } = useTranslationContext('ThreadListEmptyPlaceholder');
 
   return (
diff --git a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
index 66a96d7aa..988badba6 100644
--- a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
+++ b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
@@ -3,8 +3,12 @@ import clsx from 'clsx';
 
 import type { ThreadManagerState } from 'stream-chat';
 
-import { IconRefresh } from '../../Icons';
-import { useChatContext, useTranslationContext } from '../../../context';
+import { IconRefresh as DefaultIconRefresh } from '../../Icons';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../context';
 import { useStateStore } from '../../../store';
 import { LoadingIndicator } from '../../Loading';
 
@@ -14,6 +18,8 @@ const selector = (nextValue: ThreadManagerState) => ({
 });
 
 export const ThreadListUnseenThreadsBanner = () => {
+  const { icons: { IconRefresh = DefaultIconRefresh } = {} } = useComponentContext();
+
   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 724fb2a3a..296004557 100644
--- a/src/components/VideoPlayer/VideoThumbnail.tsx
+++ b/src/components/VideoPlayer/VideoThumbnail.tsx
@@ -1,9 +1,9 @@
 import { BaseImage, type BaseImageProps } from '../BaseImage';
 import { Button } from '../Button';
 import clsx from 'clsx';
-import { IconPlayFill } from '../Icons';
+import { IconPlayFill as DefaultIconPlayFill } from '../Icons';
 import React from 'react';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 export type VideoThumbnailProps = BaseImageProps & {
   onPlay?: () => void;
@@ -14,6 +14,8 @@ export const VideoThumbnail = ({
   onPlay,
   ...imageProps
 }: VideoThumbnailProps) => {
+  const { icons: { IconPlayFill = DefaultIconPlayFill } = {} } = useComponentContext();
+
   const { t } = useTranslationContext();
 
   return (
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index ae6c5fb70..eee80e409 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -71,6 +71,7 @@ import type {
   SuggestionListProps,
 } from '../components/TextareaComposer';
 
+import type { IconSlots } from '../components/Icons';
 import type { PropsWithChildrenOnly } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageComposer/StopAIGenerationButton';
 import type { VideoPlayerProps } from '../components/VideoPlayer';
@@ -103,6 +104,8 @@ export type ComponentContextValue = {
   AutocompleteSuggestionItem?: React.ComponentType<SuggestionItemProps>;
   /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
   AutocompleteSuggestionList?: React.ComponentType<SuggestionListProps>;
+  /** Overrides for icons rendered across the SDK. Individual keys are deep-merged with parent overrides via `WithComponents`, so a consumer can rebrand a single icon without wiping out the others. Preferred over component-level icon props (which are `@deprecated`). */
+  icons?: IconSlots;
   /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** UI component to display a list of avatars stacked in a row, defaults to and accepts same props as: [AvatarStack](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/AvatarStack.tsx) */
diff --git a/src/context/WithComponents.tsx b/src/context/WithComponents.tsx
index 4f67a0da7..33a89f540 100644
--- a/src/context/WithComponents.tsx
+++ b/src/context/WithComponents.tsx
@@ -9,7 +9,15 @@ export function WithComponents({
   overrides,
 }: PropsWithChildren<{ overrides: Partial<ComponentContextValue> }>) {
   const parentOverrides = useContext(ComponentContext);
-  const actualOverrides: ComponentContextValue = { ...parentOverrides, ...overrides };
+  const actualOverrides: ComponentContextValue = {
+    ...parentOverrides,
+    ...overrides,
+    icons: {
+      ...parentOverrides?.icons,
+      ...overrides?.icons,
+    },
+  };
+
   return (
     <ComponentContext.Provider value={actualOverrides}>
       {children}
diff --git a/src/plugins/ChannelDetail/ChannelDetail.tsx b/src/plugins/ChannelDetail/ChannelDetail.tsx
index 05c2f3614..d8e7be6d2 100644
--- a/src/plugins/ChannelDetail/ChannelDetail.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetail.tsx
@@ -18,33 +18,39 @@ import { ChannelMediaView } from './Views/ChannelMediaView';
 import { ChannelMembersView } from './Views/ChannelMembersView';
 import { PinnedMessagesView } from './Views/PinnedMessagesView';
 import { Prompt } from '../../components/Dialog';
+import { useComponentContext } from '../../context';
 import {
-  IconFolder,
-  IconImage,
-  IconInfo,
-  IconPin,
-  IconUser,
+  IconFolder as DefaultIconFolder,
+  IconImage as DefaultIconImage,
+  IconInfo as DefaultIconInfo,
+  IconPin as DefaultIconPin,
+  IconUser as DefaultIconUser,
 } from '../../components/Icons';
 
-const ChannelManagementNavButtonIcon = () => (
-  <IconInfo className='str-chat__channel-detail__action-icon' />
-);
+const ChannelManagementNavButtonIcon = () => {
+  const { icons: { IconInfo = DefaultIconInfo } = {} } = useComponentContext();
+  return <IconInfo className='str-chat__channel-detail__action-icon' />;
+};
 
-const ChannelMembersNavButtonIcon = () => (
-  <IconUser className='str-chat__channel-detail__action-icon' />
-);
+const ChannelMembersNavButtonIcon = () => {
+  const { icons: { IconUser = DefaultIconUser } = {} } = useComponentContext();
+  return <IconUser className='str-chat__channel-detail__action-icon' />;
+};
 
-const PinnedMessagesNavButtonIcon = () => (
-  <IconPin className='str-chat__channel-detail__action-icon' />
-);
+const PinnedMessagesNavButtonIcon = () => {
+  const { icons: { IconPin = DefaultIconPin } = {} } = useComponentContext();
+  return <IconPin className='str-chat__channel-detail__action-icon' />;
+};
 
-const ChannelMediaNavButtonIcon = () => (
-  <IconImage className='str-chat__channel-detail__action-icon' />
-);
+const ChannelMediaNavButtonIcon = () => {
+  const { icons: { IconImage = DefaultIconImage } = {} } = useComponentContext();
+  return <IconImage className='str-chat__channel-detail__action-icon' />;
+};
 
-const ChannelFilesNavButtonIcon = () => (
-  <IconFolder className='str-chat__channel-detail__action-icon' />
-);
+const ChannelFilesNavButtonIcon = () => {
+  const { icons: { IconFolder = DefaultIconFolder } = {} } = useComponentContext();
+  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..057825b26 100644
--- a/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
@@ -1,9 +1,13 @@
-import { IconSearch } from '../../components/Icons';
+import { useComponentContext } from '../../context';
+import { IconSearch as DefaultIconSearch } from '../../components/Icons';
 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 { icons: { IconSearch = DefaultIconSearch } = {} } = useComponentContext();
+  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 ec591d60e..0dc70b400 100644
--- a/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
+++ b/src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import { TextInput } from '../../components/Form';
-import { IconSearch } from '../../components/Icons';
+import { IconSearch as DefaultIconSearch } from '../../components/Icons';
 
 export type ChannelDetailSearchInputProps = {
   autoFocus?: boolean;
@@ -12,6 +12,8 @@ export type ChannelDetailSearchInputProps = {
 
 export const ChannelDetailSearchInput = React.memo(
   ({ autoFocus, onSearchChange, resetKey }: ChannelDetailSearchInputProps) => {
+    const { icons: { IconSearch = DefaultIconSearch } = {} } = useComponentContext();
+
     const { t } = useTranslationContext();
     const [searchInput, setSearchInput] = useState('');
 
diff --git a/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx b/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
index ef4fc40cb..57373cf20 100644
--- a/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
+++ b/src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 
 import { SECTION_NAVIGATOR_LAYOUT, useSectionNavigatorContext } from './SectionNavigator';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { Button } from '../../../components/Button';
 import { Prompt, type PromptHeaderProps } from '../../../components/Dialog';
-import { IconMenu } from '../../../components/Icons';
+import { IconMenu as DefaultIconMenu } from '../../../components/Icons';
 
 export type SectionNavigatorHeaderProps = Omit<PromptHeaderProps, 'LeadingContent'>;
 
@@ -16,6 +16,8 @@ export type SectionNavigatorHeaderProps = Omit<PromptHeaderProps, 'LeadingConten
  * (`goBack`), where it would compete with the back affordance.
  */
 export const SectionNavigatorHeader = (props: SectionNavigatorHeaderProps) => {
+  const { icons: { IconMenu = DefaultIconMenu } = {} } = useComponentContext();
+
   const { t } = useTranslationContext('SectionNavigatorHeader');
   const { layout, openNavigation } = useSectionNavigatorContext();
 
@@ -38,7 +40,7 @@ export const SectionNavigatorHeader = (props: SectionNavigatorHeaderProps) => {
         </Button>
       );
     };
-  }, [layout, openNavigation, props.goBack, t]);
+  }, [IconMenu, layout, openNavigation, props.goBack, t]);
 
   return <Prompt.Header {...props} LeadingContent={MenuButton} />;
 };
diff --git a/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx b/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
index 83669b3e7..9ee412478 100644
--- a/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
@@ -1,7 +1,9 @@
-import { useTranslationContext } from '../../../../context';
-import { IconFolder } from '../../../../components/Icons';
+import { useComponentContext, useTranslationContext } from '../../../../context';
+import { IconFolder as DefaultIconFolder } from '../../../../components/Icons';
 
 export const ChannelFilesEmptyList = () => {
+  const { icons: { IconFolder = DefaultIconFolder } = {} } = useComponentContext();
+
   const { t } = useTranslationContext('ChannelFilesEmptyList');
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
index e11394011..b8b0b1f7a 100644
--- a/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsx
@@ -6,6 +6,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 
 import {
   useChatContext,
+  useComponentContext,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
@@ -193,6 +194,8 @@ describe('ChannelFilesView', () => {
       tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
     } as unknown as ReturnType<typeof useTranslationContext>);
 
+    vi.mocked(useComponentContext).mockReturnValue({});
+
     vi.mocked(useChatContext).mockReturnValue({
       client: { userID: 'user-1' },
     } as ReturnType<typeof useChatContext>);
diff --git a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
index 8c04cbeb3..5a805ece2 100644
--- a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
@@ -15,11 +15,11 @@ import { Alert } from '../../../../components/Dialog';
 import { Button } from '../../../../components/Button';
 import { Switch } from '../../../../components/Form';
 import {
-  IconAudio,
-  IconDelete,
-  IconLeave,
-  IconMute,
-  IconNoSign,
+  IconAudio as DefaultIconAudio,
+  IconDelete as DefaultIconDelete,
+  IconLeave as DefaultIconLeave,
+  IconMute as DefaultIconMute,
+  IconNoSign as DefaultIconNoSign,
 } from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { GlobalModal } from '../../../../components/Modal';
@@ -45,21 +45,36 @@ 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 { icons: { IconNoSign = DefaultIconNoSign } = {} } = useComponentContext();
+  return (
+    <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
+  );
+};
+const DeleteChatActionIcon = () => {
+  const { icons: { IconDelete = DefaultIconDelete } = {} } = useComponentContext();
+  return (
+    <IconDelete className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat' />
+  );
+};
+const MuteActionIcon = () => {
+  const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
+  return (
+    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
+  );
+};
+const MutedActionIcon = () => {
+  const { icons: { IconAudio = DefaultIconAudio } = {} } = useComponentContext();
+  return (
+    <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
+  );
+};
+const LeaveChannelActionIcon = () => {
+  const { icons: { IconLeave = DefaultIconLeave } = {} } = useComponentContext();
+  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 b4979b38f..0054d4ba0 100644
--- a/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
@@ -23,7 +23,11 @@ import {
   useChannelPreviewInfo,
   useIsUserMuted,
 } from '../../../../components/ChannelListItem';
-import { IconCheckmark, IconMute, IconPin } from '../../../../components/Icons';
+import {
+  IconCheckmark as DefaultIconCheckmark,
+  IconMute as DefaultIconMute,
+  IconPin as DefaultIconPin,
+} from '../../../../components/Icons';
 import { useChannelMembershipState } from '../../../../components/ChannelList';
 import { useIsChannelMuted } from '../../../../components/ChannelListItem/hooks/useIsChannelMuted';
 import { useChannelHasMembersOnline } from '../../../../components/ChannelHeader/hooks/useChannelHasMembersOnline';
@@ -55,6 +59,9 @@ export type ChannelManagementInfoBodyProps = {
 export const ChannelManagementInfoBody = ({
   actions,
 }: ChannelManagementInfoBodyProps) => {
+  const { icons: { IconMute = DefaultIconMute, IconPin = DefaultIconPin } = {} } =
+    useComponentContext();
+
   const { client } = useChatContext();
   const { channel } = useChannelDetailContext();
   const { Avatar = DefaultChannelAvatar } = useComponentContext();
@@ -313,6 +320,7 @@ const useChannelManagementEditForm = ({
 };
 
 export const ChannelManagementEditBody = (props: ChannelManagementEditBodyProps) => {
+  const { icons: { IconCheckmark = DefaultIconCheckmark } = {} } = useComponentContext();
   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 a03128e78..e5d3471d0 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
@@ -1,7 +1,9 @@
-import { useTranslationContext } from '../../../../context';
-import { IconImage } from '../../../../components/Icons';
+import { useComponentContext, useTranslationContext } from '../../../../context';
+import { IconImage as DefaultIconImage } from '../../../../components/Icons';
 
 export const ChannelMediaEmptyList = () => {
+  const { icons: { IconImage = DefaultIconImage } = {} } = useComponentContext();
+
   const { t } = useTranslationContext('ChannelMediaEmptyList');
 
   return (
diff --git a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
index 3e54e383a..9949a0842 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
@@ -16,10 +16,10 @@ import {
 import { Prompt } from '../../../../components/Dialog';
 import { Gallery as DefaultGallery, GalleryUI } from '../../../../components/Gallery';
 import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconImage,
-  IconVideoFill,
+  IconChevronLeft as DefaultIconChevronLeft,
+  IconChevronRight as DefaultIconChevronRight,
+  IconImage as DefaultIconImage,
+  IconVideoFill as DefaultIconVideoFill,
 } from '../../../../components/Icons';
 import { GlobalModal } from '../../../../components/Modal';
 import {
@@ -51,6 +51,9 @@ const ChannelMediaGridItem = ({
   onClick,
 }: ChannelMediaGridItemProps) => {
   const { t } = useTranslationContext('ChannelMediaView');
+  const {
+    icons: { IconImage = DefaultIconImage, IconVideoFill = DefaultIconVideoFill } = {},
+  } = useComponentContext();
   const displayName = getUserDisplayName(item.user);
   const mediaSrc =
     item.type === 'video'
@@ -118,6 +121,12 @@ const ChannelMediaPagination = ({
   previousDisabled,
 }: ChannelMediaPaginationProps) => {
   const { t } = useTranslationContext('ChannelMediaView');
+  const {
+    icons: {
+      IconChevronLeft = DefaultIconChevronLeft,
+      IconChevronRight = DefaultIconChevronRight,
+    } = {},
+  } = useComponentContext();
 
   return (
     <div className='str-chat__channel-detail__media-view__pagination'>
diff --git a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
index afcc3ff38..0f0e531e2 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
@@ -24,11 +24,11 @@ import { Alert } from '../../../../components/Dialog';
 import { Button } from '../../../../components/Button';
 import { Switch } from '../../../../components/Form';
 import {
-  IconAudio,
-  IconMessageBubble,
-  IconMute,
-  IconNoSign,
-  IconUserRemove,
+  IconAudio as DefaultIconAudio,
+  IconMessageBubble as DefaultIconMessageBubble,
+  IconMute as DefaultIconMute,
+  IconNoSign as DefaultIconNoSign,
+  IconUserRemove as DefaultIconUserRemove,
 } from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { GlobalModal } from '../../../../components/Modal';
@@ -80,25 +80,40 @@ 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 { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
+  return (
+    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />
+  );
+};
 
-const MemberUnmuteActionIcon = () => (
-  <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
-);
+const MemberUnmuteActionIcon = () => {
+  const { icons: { IconAudio = DefaultIconAudio } = {} } = useComponentContext();
+  return (
+    <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />
+  );
+};
 
-const SendDirectMessageActionIcon = () => (
-  <IconMessageBubble className='str-chat__channel-detail__action-icon' />
-);
+const SendDirectMessageActionIcon = () => {
+  const { icons: { IconMessageBubble = DefaultIconMessageBubble } = {} } =
+    useComponentContext();
+  return <IconMessageBubble className='str-chat__channel-detail__action-icon' />;
+};
 
-const BlockUserActionIcon = () => (
-  <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
-);
+const BlockUserActionIcon = () => {
+  const { icons: { IconNoSign = DefaultIconNoSign } = {} } = useComponentContext();
+  return (
+    <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />
+  );
+};
 
-const RemoveUserActionIcon = () => (
-  <IconUserRemove className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user' />
-);
+const RemoveUserActionIcon = () => {
+  const { icons: { IconUserRemove = DefaultIconUserRemove } = {} } =
+    useComponentContext();
+  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/ChannelMembersView/ChannelMembersAddView.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
index 711620f95..6cace9724 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
@@ -1,11 +1,15 @@
 import { type SearchSourceState, type UserResponse, UserSearchSource } from 'stream-chat';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useChatContext, useTranslationContext } from '../../../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../../context';
 import { useStateStore } from '../../../../store';
 import { Avatar } from '../../../../components/Avatar';
 import { Checkbox } from '../../../../components/Form';
-import { IconMute } from '../../../../components/Icons';
+import { IconMute as DefaultIconMute } from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { VirtualizedList } from '../../VirtualizedList';
 import { Prompt } from '../../../../components/Dialog';
@@ -33,9 +37,12 @@ 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 { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
+  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 52dda9f8c..c3bc153ad 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
@@ -1,9 +1,13 @@
 import type { ChannelMemberResponse } from 'stream-chat';
 import React, { useCallback, useMemo } from 'react';
 
-import { useChatContext, useTranslationContext } from '../../../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../../context';
 import { Avatar } from '../../../../components/Avatar';
-import { IconMute } from '../../../../components/Icons';
+import { IconMute as DefaultIconMute } from '../../../../components/Icons';
 import { ListItemLayout } from '../../../../components/ListItemLayout';
 import { VirtualizedList } from '../../VirtualizedList';
 import { Prompt } from '../../../../components/Dialog';
@@ -78,6 +82,7 @@ const ChannelMembersBrowseViewItem = ({
   const TrailingSlot = useMemo(
     () =>
       function MemberTrailingSlot() {
+        const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext();
         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 e125f3c5d..d78c575f0 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
@@ -15,7 +15,7 @@ import type {
   ChannelMembersHeaderActionsProps,
   ChannelMembersModeController,
 } from './ChannelMembersView';
-import { IconUserAdd } from '../../../../components/Icons';
+import { IconUserAdd as DefaultIconUserAdd } from '../../../../components/Icons';
 
 export type ChannelMembersHeaderActionType = 'addMembers' | (string & {});
 
@@ -91,6 +91,7 @@ const AddMembersMenuAction = ({
   modeController,
 }: ChannelMembersHeaderActionComponentProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconUserAdd = DefaultIconUserAdd } = {} } = useComponentContext();
 
   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 a16c2e7d5..4935ba6c2 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsx
@@ -2,7 +2,11 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import type { UserResponse } from 'stream-chat';
 
-import { useChatContext, useTranslationContext } from '../../../../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../../../context';
 import { useStateStore } from '../../../../../store';
 import { ChannelMembersAddView } from '../ChannelMembersAddView';
 import {
@@ -88,6 +92,8 @@ describe('ChannelMembersAddView', () => {
         options?.count ? `${key}:${options.count}` : key,
     } as ReturnType<typeof useTranslationContext>);
 
+    vi.mocked(useComponentContext).mockReturnValue({});
+
     vi.mocked(useChatContext).mockReturnValue({
       client: { user: { id: 'user-1' } },
       mutes: [],
diff --git a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
index 99d8491b0..26a686cdb 100644
--- a/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsx
@@ -2,7 +2,11 @@ import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import type { ChannelMemberResponse } from 'stream-chat';
 
-import { useChatContext, useTranslationContext } from '../../../../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../../../context';
 import { useStateStore } from '../../../../../store';
 import { ChannelMembersBrowseView } from '../ChannelMembersBrowseView';
 import { createChannel, emitChannelEvent, renderWithChannel } from './testUtils';
@@ -117,6 +121,7 @@ describe('ChannelMembersBrowseView', () => {
         return key;
       },
     } as ReturnType<typeof useTranslationContext>);
+    vi.mocked(useComponentContext).mockReturnValue({});
     vi.mocked(useChatContext).mockReturnValue({
       mutes: [],
     } as ReturnType<typeof useChatContext>);
diff --git a/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx b/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
index 210c9610a..12784205b 100644
--- a/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
+++ b/src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
@@ -1,7 +1,9 @@
-import { IconPin } from '../../../../components/Icons';
-import { useTranslationContext } from '../../../../context';
+import { IconPin as DefaultIconPin } from '../../../../components/Icons';
+import { useComponentContext, useTranslationContext } from '../../../../context';
 
 export const PinnedMessagesEmptyList = () => {
+  const { icons: { IconPin = DefaultIconPin } = {} } = useComponentContext();
+
   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 d57a31766..1e5d211f6 100644
--- a/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx
+++ b/src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx
@@ -6,6 +6,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import {
   useChannelActionContext,
   useChatContext,
+  useComponentContext,
   useModalContext,
   useTranslationContext,
 } from '../../../../../context';
@@ -210,6 +211,8 @@ describe('PinnedMessagesView', () => {
       tDateTimeParser: (input?: string | Date) => new Date(input ?? Date.now()),
     } as ReturnType<typeof useTranslationContext>);
 
+    vi.mocked(useComponentContext).mockReturnValue({});
+
     vi.mocked(useChatContext).mockReturnValue({
       client: { userID: 'user-1' },
     } as ReturnType<typeof useChatContext>);
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index 4972da647..5833ada11 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -1,10 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import PickerImport from '@emoji-mart/react';
 
-import { useMessageComposerContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../context';
 import {
   Button,
-  IconEmoji,
+  IconEmoji as DefaultIconEmoji,
   type PopperLikePlacement,
   useMessageComposerController,
 } from '../../components';
@@ -22,6 +26,10 @@ const Picker =
 const isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;
 
 export type EmojiPickerProps = {
+  /**
+   * @deprecated Use the `icons.IconEmoji` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconEmoji: ... } }}>`) instead.
+   * Passing this prop still wins over the context slot for backwards compatibility.
+   */
   ButtonIconComponent?: React.ComponentType;
   buttonClassName?: string;
   pickerContainerClassName?: string;
@@ -72,7 +80,9 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
 
   const { pickerContainerClassName, wrapperClassName } = classNames;
 
-  const { ButtonIconComponent = IconEmoji } = props;
+  const { icons: { IconEmoji = DefaultIconEmoji } = {} } = useComponentContext();
+  const ResolvedButtonIconComponent = props.ButtonIconComponent ?? IconEmoji;
+
   const pickerStyle = props.pickerProps?.style as React.CSSProperties | undefined;
 
   useEffect(() => {
@@ -134,7 +144,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
         type='button'
         variant='secondary'
       >
-        {ButtonIconComponent && <ButtonIconComponent />}
+        {ResolvedButtonIconComponent && <ResolvedButtonIconComponent />}
       </Button>
     </div>
   );