feat(Icons): migrate SDK icons to Phosphor icon set (#3075)

### 🎯 Goal

Migrate all SDK icons to the new Phosphor-based icon set from the design
system, replacing legacy SVGs with consistent, standardized assets. Use
Line (stroke-based) variants for controllable stroke weight. Remove
unused icon exports to reduce bundle size.

Resolves
[REACT-936](https://linear.app/stream/issue/REACT-936/complete-sdk-icon-migration-to-phosphor-icons)

### 🛠 Implementation details

**Icon SVG replacements (77 Line + 11 other):**
- Switched to **Line variants** (stroke-based, 20×20 viewBox) for 77
icons, giving a consistent `strokeWidth="1.5"` that can be adjusted via
attribute rather than being baked into path geometry
- `BaseIcon` default viewBox updated from `0 0 16 16` → `0 0 20 20` to
match Line icons
- 8 legacy icons without Line matches get `{ viewBox: '0 0 16 16' }`
override
- Stroke-based paths get `fill='none'` to prevent CSS `fill:
currentColor` from filling outlines
- Fill variants (`play-fill`, `message-bubble-fill`, etc.) strip
`fill="black"` to inherit `currentColor`
- `IconGiphy` updated separately in its own file (brand colors
preserved, hardcoded `viewBox='0 0 16 16'`)

**Icon constant renames (55 total):**
Key renames: `IconTrashBin→IconDelete`, `IconPaperPlane→IconSend`,
`IconCrossMedium→IconXmark`, `IconMicrophone→IconVoice`,
`IconBookmark→IconSave`, `IconBubbles→IconMessageBubbles`,
`IconBubble2ChatMessage→IconMessageBubble`,
`IconBubbleText6ChatMessage→IconThread`,
`IconLoadingCircle→IconLoading`, `IconPlaySolid→IconPlayFill`,
`IconPause→IconPauseFill`

Old names preserved as `// was:` comments for traceability. Icons with
name collisions (e.g. multiple checkmark variants mapping to
`checkmark`) keep their original const name but receive the updated SVG.

**CSS class name updates:**
Renamed constants change the auto-derived CSS classes (via
`toIconClass`). Updated all SCSS selectors accordingly (e.g.
`.str-chat__icon--microphone` → `.str-chat__icon--voice`).

**Unchanged icons (7):**
Icons used in code but not in the mapping are annotated with `// no new
icon mapping`: `IconArrowDown`, `IconArrowRight`,
`IconExclamationTriangle`, `IconEyeOpen`,
`IconBubbleText6SolidChatMessage`. Plus `IconLayoutAlignLeft` and
`IconThunder` which had Line matches and were switched.

**Removed unused icons (71):**
The following icon exports were removed as they had zero references
anywhere in the SDK or examples:

`IconApiAggregate`, `IconApples`, `IconArrowsRepeatLeftRight`,
`IconAtSolid`, `IconAccount` (was `IconPeopleCircle`),
`IconBrowserAISparkle`, `IconBubble3Solid`,
`IconBubbleAnnotation2ChatMessage`, `IconBubbleWideSparkleChatMessage`,
`IconCalendar1`, `IconCallCancel`, `IconCar1`, `IconCat`,
`IconCheckmark2Small`, `IconChevronGrabberVerticalSelector`,
`IconChevronTop`, `IconCircleCheck`, `IconCircleQuestionmark`,
`IconCircleQuestionmarkFilled`, `IconClockSolid`, `IconCode`,
`IconCodeBrackets`, `IconCodeEditorInsert`, `IconCompass`,
`IconCreditCard2Billing`, `IconDotsGrid1x3Vertical`, `IconEditBigSolid`,
`IconEmojiAdd` (was `IconEmojiAddReaction`), `IconEmojiSad`,
`IconExclamationTriangleFill` (was `IconExclamationTriangle1`),
`IconExport` (was `IconShareRedirectLink`),
`IconFilledCircleInfoTooltip`, `IconFilter1`, `IconGauge`, `IconGoogle`,
`IconHashtagChannel`, `IconHeart2`, `IconHistory`, `IconInvite`,
`IconLayoutGrid1`, `IconLimits`, `IconLineChart3`, `IconLock`,
`IconMention` (was `IconAt`), `IconNewspaper2`, `IconOrganization`,
`IconPaperPlaneTopRight`, `IconParagraphsText`, `IconPencil`,
`IconPeople2`, `IconPeopleCopy`, `IconPeopleEditUserRights`,
`IconPersona`, `IconPresentation` (was `IconLayersBehind`),
`IconSearchText`, `IconSettingsSliderVer`,
`IconShapesPlusCloseSquareCircle`, `IconShapesTriangleSquareCircle`,
`IconShield`, `IconSpreadsheet` (was `IconTable`),
`IconSquareCircleTopRightFeeds`, `IconStopFill` (was `IconStop`),
`IconTeam`, `IconTennis`, `IconTextToImageURLEnrichment`,
`IconTrending4`, `IconUnlock` (was `IconUnlocked`), `IconUsers`,
`IconVoiceAndVideo`, `IconVoiceHigh`, `IconWebhook`

This reduces `icons.tsx` from 130 to 59 exports.

### 🎨 UI Changes

All icon visuals change from the legacy set to Phosphor Line icons with
1.5px stroke weight. `BaseIcon` default viewBox is now `0 0 20 20`. No
layout or sizing changes — icons still use `1em` sizing via CSS and
`currentColor` for theming.

Author: oliverlaz

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -8,13 +8,13 @@ import {
   IconArrowRight,
   Button,
   DialogAnchor,
-  IconArrowRotateRightLeftRepeatRefresh,
+  IconRefresh,
   IconArrowUp,
-  IconCheckmark2,
-  IconCircleInfoTooltip,
+  IconCheckmark,
+  IconInfo,
   IconClock,
-  IconCrossMedium,
-  IconExclamationCircle,
+  IconXmark,
+  IconExclamationMark,
   IconExclamationTriangle,
   IconPlusSmall,
   NumericInput,
@@ -50,10 +50,10 @@ const clamp = (value: number, min: number, max: number) => {
 const severityIcons: Partial<
   Record<NotificationSeverity, React.ComponentType<{ className?: string }>>
 > = {
-  error: IconExclamationCircle,
-  info: IconCircleInfoTooltip,
-  loading: IconArrowRotateRightLeftRepeatRefresh,
-  success: IconCheckmark2,
+  error: IconExclamationMark,
+  info: IconInfo,
+  loading: IconRefresh,
+  success: IconCheckmark,
   warning: IconExclamationTriangle,
 };
 
@@ -148,7 +148,7 @@ const NotificationChipList = ({
             size='xs'
             variant='secondary'
           >
-            <IconCrossMedium />
+            <IconXmark />
           </Button>
         </div>
       );

examples/vite/src/AppSettings/AppSettings.tsx

@@ -3,8 +3,8 @@ import {
   ChatViewSelectorButton,
   GlobalModal,
   IconBubble3ChatMessage,
-  IconBellNotification,
-  IconEmojiSmile,
+  IconBell,
+  IconEmoji,
   IconLightBulbSimple,
   IconSettingsGear2,
 } from 'stream-chat-react';
@@ -18,9 +18,9 @@ import { appSettingsStore, useAppSettingsState } from './state';
 type TabId = 'notifications' | 'reactions' | 'sidebar';
 
 const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [
-  { Icon: IconBellNotification, id: 'notifications', title: 'Notifications' },
+  { Icon: IconBell, id: 'notifications', title: 'Notifications' },
   { Icon: IconBubble3ChatMessage, id: 'sidebar', title: 'Sidebar' },
-  { Icon: IconEmojiSmile, id: 'reactions', title: 'Reactions' },
+  { Icon: IconEmoji, id: 'reactions', title: 'Reactions' },
 ];
 
 const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {

src/components/Attachment/Geolocation.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { Coords, SharedLocationResponse } from 'stream-chat';
 import { useChatContext, useTranslationContext } from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconMapPin } from '../Icons';
+import { IconLocation } from '../Icons';
 import { Button } from '../Button';
 
 export type GeolocationMapProps = Coords;
@@ -105,7 +105,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
     className='str-chat__message-attachment-geolocation__placeholder'
     data-testid='geolocation-attachment-map-placeholder'
   >
-    <IconMapPin />
+    <IconLocation />
     <a
       className='str-chat__message-attachment-geolocation__placeholder-link'
       href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}

src/components/Attachment/LinkPreview/Card.tsx

@@ -6,7 +6,7 @@ import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconChainLink } from '../../Icons';
+import { IconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
 
@@ -74,7 +74,7 @@ const CardContent = (props: CardContentProps) => {
           className='str-chat__message-attachment-card--source-link'
           data-testid='card-source-link'
         >
-          <IconChainLink />
+          <IconLink />
           <div className='str-chat__message-attachment-card--url'>{url}</div>
         </div>
       )}

src/components/Attachment/LinkPreview/CardAudio.tsx

@@ -4,7 +4,7 @@ import { useStateStore } from '../../../store';
 import { PlayButton } from '../../Button';
 import type { AudioProps } from '../Audio';
 import React from 'react';
-import { IconChainLink } from '../../Icons';
+import { IconLink } from '../../Icons';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 
@@ -26,7 +26,7 @@ const SourceLink = ({
     className='str-chat__message-attachment-card--source-link'
     data-testid='card-source-link'
   >
-    <IconChainLink />
+    <IconLink />
     <SafeAnchor
       className='str-chat__message-attachment-card--url'
       href={url}

src/components/Attachment/ModalGallery.tsx

@@ -8,7 +8,7 @@ import { Gallery as DefaultGallery, GalleryUI } from '../Gallery';
 import { LoadingIndicator } from '../Loading';
 import { GlobalModal } from '../Modal';
 import { useComponentContext, useTranslationContext } from '../../context';
-import { IconArrowRotateClockwise } from '../Icons';
+import { IconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -216,7 +216,7 @@ const ThumbnailButton = ({
           data-testid='str-chat__modal-gallery__image-load-failed-overlay'
         >
           <div className='str-chat__modal-gallery__image-retry-indicator'>
-            <IconArrowRotateClockwise />
+            <IconRetry />
           </div>
         </div>
       )}