fix(icons): Replace code, bars, external link, and upload icons

rebeccaalpert · rebeccaalpert · commit 4220f2a2860f · 2026-07-15T11:17:59.000-04:00
Swap with RH brand icons
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { RhUiQuestionMarkCircleIcon } from '@patternfly/react-icons';
 
 export const MessageWithSourcesExample: FunctionComponent = () => {
   const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
@@ -51,7 +51,7 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
                           headerContent={
                             <Flex gap={{ default: 'gapXs' }}>
                               <FlexItem>
-                                <OutlinedQuestionCircleIcon />
+                                <RhUiQuestionMarkCircleIcon />
                               </FlexItem>
                               <FlexItem>Why this confidence score?</FlexItem>
                             </Flex>
@@ -64,7 +64,7 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
                             </>
                           }
                         >
-                          <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
+                          <Button variant="link" icon={<RhUiQuestionMarkCircleIcon />}>
                             Learn about this score
                           </Button>
                         </Popover>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
@@ -50,7 +50,7 @@ import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist
 import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
-import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RhUiQuestionMarkCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md
@@ -24,7 +24,7 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, RhUiCodeIcon, RhUiUploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
@@ -51,7 +51,7 @@ ChatbotHeaderCloseButton,
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
-import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import {
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx
@@ -11,7 +11,7 @@ import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetail
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@patternfly/react-core';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, RhUiCodeIcon, RhUiUploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
@@ -57,10 +57,10 @@ const initialMenuItems = [
       <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
         Logs
       </DropdownItem>
-      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - Status" id="4" icon={<RhUiCodeIcon />}>
         YAML - Status
       </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - All contents" id="5" icon={<RhUiCodeIcon />}>
         YAML - All contents
       </DropdownItem>
     </DropdownList>
@@ -150,7 +150,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => {
         key="upload"
         value="upload"
         id="upload"
-        icon={<UploadIcon />}
+        icon={<RhUiUploadIcon />}
       >
         Upload from computer
       </DropdownItem>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx
@@ -43,7 +43,7 @@ import ChatbotHeader, {
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
@@ -263,7 +263,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx
@@ -39,7 +39,7 @@ import ChatbotHeader, {
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -290,7 +290,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx
@@ -37,7 +37,7 @@ import ChatbotHeader, {
 
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -282,7 +282,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx
@@ -20,7 +20,7 @@ import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
 import ChatbotHeader, { ChatbotHeaderMain, ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -155,7 +155,7 @@ export const EmbeddedComparisonChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx
@@ -37,7 +37,7 @@ import ChatbotHeader, {
 
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -296,7 +296,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx
@@ -2,7 +2,7 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 
 export interface ChatbotHeaderMenuProps extends ButtonProps {
   /** Callback function to attach to menu toggle on top right of chatbot header. */
@@ -69,7 +69,7 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}
diff --git a/packages/module/src/FileDropZone/FileDropZone.tsx b/packages/module/src/FileDropZone/FileDropZone.tsx
@@ -2,7 +2,7 @@ import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-co
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { UploadIcon } from '@patternfly/react-icons';
+import { RhUiUploadIcon } from '@patternfly/react-icons';
 import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {
@@ -59,7 +59,7 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   const renderDropZone = () => (
     <>
       <MultipleFileUploadMain
-        titleIcon={<UploadIcon />}
+        titleIcon={<RhUiUploadIcon />}
         titleText="Drag and drop your file here"
         infoText={infoText}
         isUploadButtonHidden
diff --git a/packages/module/src/Message/LinkMessage/LinkMessage.tsx b/packages/module/src/Message/LinkMessage/LinkMessage.tsx
@@ -3,7 +3,7 @@
 // ============================================================================
 
 import { Button, ButtonProps } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { RhMicronsExternalLinkIcon } from '@patternfly/react-icons';
 import { ExtraProps } from 'react-markdown';
 import { css } from '@patternfly/react-styles';
 
@@ -26,7 +26,7 @@ const LinkMessage = ({
         component="a"
         variant="link"
         href={href}
-        icon={<ExternalLinkSquareAltIcon />}
+        icon={<RhMicronsExternalLinkIcon />}
         iconPosition="end"
         isInline
         target={target}
diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
@@ -22,7 +22,7 @@ jest.mock('@patternfly/react-icons', () => ({
   PencilAltIcon: () => <div>PencilAltIcon</div>,
   CheckIcon: () => <div>CheckIcon</div>,
   CloseIcon: () => <div>CloseIcon</div>,
-  ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
+  RhMicronsExternalLinkIcon: () => <div>RhMicronsExternalLinkIcon</div>,
   TimesIcon: () => <div>TimesIcon</div>
 }));
 
diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx
diff --git a/packages/module/src/SourcesCardBase/SourcesCardBase.tsx b/packages/module/src/SourcesCardBase/SourcesCardBase.tsx
