fix(Icons): sync icon catalog with refreshed Line SVGs (#3080)

oliverlaz · web-flow · commit 9472f7b35bb2 · 2026-03-31T11:39:20.000+02:00
### 🎯 Goal

Sync the SDK icon exports with the refreshed Phosphor Line icon catalog
and align icon naming with the new conventions.

### 🛠 Implementation details

- **Updated `IconArrowDown`**: replaced old 16×16 filled path with the
20×20 Line stroke variant (removed `viewBox` override)
- **Updated `IconThread`**: replaced bubble-speech shape with the new
rectangular thread icon from the refreshed catalog
- **Renamed `IconLayoutAlignLeft` → `IconSidebar`**: matches
`sidebar.svg` in the Line set; updated all usages across
`ChannelHeader`, `ChannelListHeader`, `ThreadHeader`, `ThreadListHeader`
- **Renamed `IconThunder` → `IconBolt`**: matches `bolt.svg` in the Line
set; updated usages in `CommandChip` and example app
- Old names preserved as `// was:` comments for debugging
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
@@ -5,7 +5,7 @@ import {
   ContextMenu,
   ContextMenuButton,
   DialogManagerProvider,
-  IconThunder,
+  IconBolt,
   useContextMenuContext,
   useDialogIsOpen,
   useDialogOnNearestManager,
@@ -40,7 +40,7 @@ const ActionsMenuButton = ({
       ref={refCallback}
       variant='secondary'
     >
-      <IconThunder />
+      <IconBolt />
       {!iconOnly && (
         <div className='str-chat__chat-view__selector-button-text'>Actions</div>
       )}
diff --git a/src/components/ChannelHeader/ChannelHeader.tsx b/src/components/ChannelHeader/ChannelHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IconLayoutAlignLeft } from '../Icons/icons';
+import { IconSidebar } from '../Icons/icons';
 import { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';
 import { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';
 import { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';
@@ -40,7 +40,7 @@ export type ChannelHeaderProps = {
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** Manually set the image to render, defaults to the Channel image */
   image?: string;
-  /** UI component to display menu icon, defaults to IconLayoutAlignLeft*/
+  /** UI component to display menu icon, defaults to IconSidebar*/
   MenuIcon?: React.ComponentType;
   /** Set title manually */
   title?: string;
@@ -53,7 +53,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   const {
     Avatar = DefaultAvatar,
     image: overrideImage,
-    MenuIcon = IconLayoutAlignLeft,
+    MenuIcon = IconSidebar,
     title: overrideTitle,
   } = props;
 
diff --git a/src/components/ChannelList/ChannelListHeader.tsx b/src/components/ChannelList/ChannelListHeader.tsx
@@ -1,15 +1,15 @@
 import React, { type ComponentType } from 'react';
 import clsx from 'clsx';
 import { useChatContext, useTranslationContext } from '../../context';
-import { IconLayoutAlignLeft } from '../Icons';
+import { IconSidebar } from '../Icons';
 import { ToggleSidebarButton } from '../Button/ToggleSidebarButton';
 
 export type ChannelListHeaderProps = {
   ToggleButtonIcon?: ComponentType;
 };
 
 export const ChannelListHeader = ({
-  ToggleButtonIcon = IconLayoutAlignLeft,
+  ToggleButtonIcon = IconSidebar,
 }: ChannelListHeaderProps) => {
   const { t } = useTranslationContext();
   const { channel, navOpen } = useChatContext();
diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx
@@ -15,11 +15,16 @@ export const IconLeave = createIcon(
   />,
 );
 
-// no new icon mapping
 export const IconArrowDown = createIcon(
   'IconArrowDown',
-  <path d='M7.39973 2.5C7.39973 2.16863 7.66895 1.90039 8.00032 1.90039C8.33154 1.90057 8.59993 2.16874 8.59993 2.5V12.0518L11.7425 8.90918C11.9768 8.67487 12.3568 8.67487 12.5911 8.90918C12.8253 9.14351 12.8254 9.52355 12.5911 9.75781L8.42415 13.9238C8.3117 14.0363 8.15933 14.0995 8.00032 14.0996C7.84119 14.0996 7.68804 14.0363 7.57552 13.9238L3.4095 9.75781C3.17519 9.5235 3.17519 9.14349 3.4095 8.90918C3.64377 8.67508 4.02288 8.67508 4.25716 8.90918L7.39973 12.0518V2.5Z' />,
-  { viewBox: '0 0 16 16' },
+  <path
+    d='M10 3.125V16.875M10 16.875L4.375 11.25M10 16.875L15.625 11.25'
+    fill='none'
+    stroke='currentColor'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    strokeWidth='1.5'
+  />,
 );
 
 export const IconArrowDownCircle = createIcon(
@@ -197,7 +202,7 @@ export const IconMessageBubbleFill = createIcon(
 export const IconThread = createIcon(
   'IconThread',
   <path
-    d='M7.49978 8.75022H12.4998M7.49978 11.2502H12.4998M6.24431 16.4932C7.81972 17.405 9.67297 17.7127 11.4585 17.359C13.2441 17.0053 14.84 16.0143 15.9489 14.5708C17.0578 13.1273 17.6038 11.3298 17.4852 9.51341C17.3667 7.69704 16.5916 5.98577 15.3045 4.69866C14.0174 3.41156 12.3061 2.63646 10.4897 2.51789C8.67333 2.39932 6.87582 2.94537 5.43231 4.05422C3.9888 5.16308 2.99781 6.75906 2.64412 8.54461C2.29042 10.3302 2.59815 12.1834 3.50993 13.7588L2.53259 16.6768C2.49586 16.7869 2.49053 16.9051 2.5172 17.0181C2.54386 17.131 2.60146 17.2344 2.68355 17.3165C2.76563 17.3985 2.86895 17.4561 2.98194 17.4828C3.09492 17.5095 3.21309 17.5041 3.32321 17.4674L6.24431 16.4932Z'
+    d='M7.5 8.75H12.8125M7.5 11.25H12.8125M10.3125 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V9.6875C3.125 7.78126 3.88225 5.95309 5.23017 4.60517C6.57809 3.25725 8.40626 2.5 10.3125 2.5C11.2564 2.5 12.191 2.68591 13.063 3.04712C13.9351 3.40832 14.7274 3.93775 15.3948 4.60517C16.0623 5.27259 16.5917 6.06493 16.9529 6.93696C17.3141 7.80899 17.5 8.74362 17.5 9.6875C17.5 10.6314 17.3141 11.566 16.9529 12.438C16.5917 13.3101 16.0623 14.1024 15.3948 14.7698C14.7274 15.4373 13.9351 15.9667 13.063 16.3279C12.191 16.6891 11.2564 16.875 10.3125 16.875Z'
     fill='none'
     stroke='currentColor'
     strokeLinecap='round'
@@ -568,9 +573,9 @@ export const IconImage = createIcon(
   />,
 );
 
-// no new icon mapping
-export const IconLayoutAlignLeft = createIcon(
-  'IconLayoutAlignLeft',
+// was: IconLayoutAlignLeft
+export const IconSidebar = createIcon(
+  'IconSidebar',
   <path
     d='M6.875 3.75V16.25M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z'
     fill='none'
@@ -822,9 +827,9 @@ export const IconCopy = createIcon(
   />,
 );
 
-// no new icon mapping
-export const IconThunder = createIcon(
-  'IconThunder',
+// was: IconThunder
+export const IconBolt = createIcon(
+  'IconBolt',
   <path d='M16.7071 9.80157L7.95711 19.1766C7.86438 19.2755 7.74198 19.3416 7.60839 19.3649C7.47479 19.3882 7.33724 19.3674 7.2165 19.3057C7.09576 19.244 6.99837 19.1446 6.93904 19.0227C6.8797 18.9007 6.86164 18.7628 6.88757 18.6297L8.03289 12.9008L3.53054 11.2102C3.43385 11.174 3.34762 11.1144 3.27956 11.0368C3.2115 10.9592 3.16373 10.8659 3.14052 10.7653C3.1173 10.6647 3.11937 10.5599 3.14653 10.4603C3.17369 10.3607 3.2251 10.2694 3.29617 10.1945L12.0462 0.819538C12.1389 0.720581 12.2613 0.654468 12.3949 0.631176C12.5285 0.607884 12.666 0.628675 12.7868 0.690414C12.9075 0.752152 13.0049 0.851488 13.0642 0.97343C13.1236 1.09537 13.1416 1.2333 13.1157 1.36641L11.9673 7.10157L16.4696 8.78985C16.5656 8.82626 16.6511 8.88576 16.7187 8.96307C16.7862 9.04039 16.8336 9.13315 16.8568 9.23316C16.88 9.33317 16.8781 9.43734 16.8515 9.53648C16.8248 9.63562 16.7742 9.72666 16.704 9.80157H16.7071Z' />,
 );
 
diff --git a/src/components/MessageComposer/CommandChip.tsx b/src/components/MessageComposer/CommandChip.tsx
@@ -1,6 +1,6 @@
 import { useMessageComposerController } from './hooks';
 import type { TextComposerState } from 'stream-chat';
-import { IconThunder, IconXmark } from '../Icons';
+import { IconBolt, IconXmark } from '../Icons';
 import { useMessageComposerContext } from '../../context';
 
 export type CommandChipProps = {
@@ -14,7 +14,7 @@ export const CommandChip = ({ command }: CommandChipProps) => {
 
   return (
     <div className='str-chat__command-chip'>
-      <IconThunder />
+      <IconBolt />
       <span>{command.name}</span>
       <button
         className={'str-chat__command-chip__close-button'}
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
@@ -12,7 +12,7 @@ import { useTypingContext } from '../../context/TypingContext';
 import type { LocalMessage } from 'stream-chat';
 import type { ThreadState } from 'stream-chat';
 import { Button } from '../Button';
-import { IconLayoutAlignLeft, IconXmark } from '../Icons';
+import { IconSidebar, IconXmark } from '../Icons';
 import { ToggleSidebarButton } from '../Button/ToggleSidebarButton';
 import { useChatViewContext } from '../ChatView';
 
@@ -67,14 +67,14 @@ export type ThreadHeaderProps = {
   closeThread: (event?: React.BaseSyntheticEvent) => void;
   /** The thread parent message */
   thread: LocalMessage;
-  /** UI component to display menu icon, defaults to IconLayoutAlignLeft*/
+  /** UI component to display menu icon, defaults to IconSidebar*/
   MenuIcon?: React.ComponentType;
   /** Override the thread display title */
   overrideTitle?: string;
 };
 
 export const ThreadHeader = (props: ThreadHeaderProps) => {
-  const { closeThread, MenuIcon = IconLayoutAlignLeft, overrideTitle, thread } = props;
+  const { closeThread, MenuIcon = IconSidebar, overrideTitle, thread } = props;
 
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
diff --git a/src/components/Threads/ThreadList/ThreadListHeader.tsx b/src/components/Threads/ThreadList/ThreadListHeader.tsx
@@ -1,7 +1,7 @@
 import React, { type ComponentType } from 'react';
 import clsx from 'clsx';
 import { useChatContext, useTranslationContext } from '../../../context';
-import { IconLayoutAlignLeft } from '../../Icons';
+import { IconSidebar } from '../../Icons';
 import { useThreadsViewContext } from '../../ChatView';
 import { ToggleSidebarButton } from '../../Button/ToggleSidebarButton';
 
@@ -10,7 +10,7 @@ export type ChannelListHeaderProps = {
 };
 
 export const ThreadListHeader = ({
-  ToggleButtonIcon = IconLayoutAlignLeft,
+  ToggleButtonIcon = IconSidebar,
 }: ChannelListHeaderProps) => {
   const { t } = useTranslationContext();
   const { navOpen } = useChatContext();
