fix(CopyIcon): Replace CopyIcon with RhUiCopyFillIcon (#12449)

rebeccaalpert · cursoragent · web-flow · commit a2798bd477fe · 2026-06-17T10:55:50.000-04:00
Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -16,7 +16,7 @@ import { TooltipPosition } from '@patternfly/react-core/dist/esm/components/Tool
 import { getResizeObserver } from '@patternfly/react-core/dist/esm/helpers/resizeObserver';
 import Editor, { BeforeMount, EditorProps, Monaco } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -517,7 +517,7 @@ export const CodeEditor = ({
               <CodeEditorContext.Provider value={{ code: value }}>
                 {isCopyEnabled && (!showEmptyState || !!value) && (
                   <CodeEditorControl
-                    icon={<CopyIcon />}
+                    icon={<RhUiCopyFillIcon />}
                     aria-label={copyButtonAriaLabel}
                     tooltipProps={{
                       ...tooltipProps,
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -39,24 +39,12 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
                     fill="currentColor"
                     height="1em"
                     role="img"
+                    viewBox="0 0 32 32"
                     width="1em"
                   >
-                    <svg
-                      class="pf-v6-icon-default"
-                      viewBox="0 0 448 512"
-                    >
-                      <path
-                        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-                      />
-                    </svg>
-                    <svg
-                      class="pf-v6-icon-rh-ui"
-                      viewBox="0 0 32 32"
-                    >
-                      <path
-                        d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
-                      />
-                    </svg>
+                    <path
+                      d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
+                    />
                   </svg>
                 </span>
               </button>
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
@@ -10,7 +10,7 @@ import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
diff --git a/packages/react-core/src/components/Button/examples/ButtonCircle.tsx b/packages/react-core/src/components/Button/examples/ButtonCircle.tsx
@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -48,7 +48,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
         aria-label="Add warning circle variant example"
       />
       <Button variant="link" isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add link circle variant example" />
-      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="control" isCircle icon={<RhUiCopyFillIcon />} aria-label="Copy control circle variant example" />
       <Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
       <Button
         variant="stateful"
diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 
 export const ButtonDisabled: React.FunctionComponent = () => (
   <>
@@ -41,7 +41,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
       <Button isDisabled variant="control">
         Control
       </Button>
-      <Button isDisabled variant="control" aria-label="Copy" icon={<CopyIcon />} />
+      <Button isDisabled variant="control" aria-label="Copy" icon={<RhUiCopyFillIcon />} />
     </Flex>
   </>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -2,7 +2,7 @@ import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
@@ -46,7 +46,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button variant="control">Control</Button>
-      <Button variant="control" aria-label="Copy" icon={<CopyIcon />} />
+      <Button variant="control" aria-label="Copy" icon={<RhUiCopyFillIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
@@ -1,5 +1,5 @@
 import { createRef } from 'react';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
@@ -87,7 +87,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         aria-label={ariaLabel}
         className={className}
         id={id}
-        icon={<CopyIcon />}
+        icon={<RhUiCopyFillIcon />}
         {...props}
         ref={triggerRef}
       />
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap
@@ -45,24 +45,12 @@ exports[`Matches snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 32 32"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
-            />
-          </svg>
+          <path
+            d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
+          />
         </svg>
       </span>
     </button>
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md
@@ -6,7 +6,7 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 
 import { Fragment, useState } from 'react';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 **Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
@@ -10,7 +10,7 @@ import './toggleGroup.css';
 import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
@@ -17,7 +17,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   return (
     <ToggleGroup aria-label="Icon variant toggle group">
       <ToggleGroupItem
-        icon={<CopyIcon />}
+        icon={<RhUiCopyFillIcon />}
         aria-label="copy"
         buttonId="toggle-group-icons-1"
         isSelected={isSelected['toggle-group-icons-1']}
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
@@ -18,7 +18,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     <>
       <ToggleGroup aria-label="Text and icon toggle group with icons at start">
         <ToggleGroupItem
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
           text="Copy"
           buttonId="toggle-group-text-icons-1"
           isSelected={isSelected['toggle-group-text-icons-1']}
@@ -42,7 +42,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
       <br />
       <ToggleGroup aria-label="Text and icon toggle group with icons at end">
         <ToggleGroupItem
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
           iconPosition="end"
           text="Copy"
           buttonId="toggle-group-text-icons-4"
diff --git a/packages/react-core/src/components/Tooltip/examples/Tooltip.md b/packages/react-core/src/components/Tooltip/examples/Tooltip.md
@@ -7,7 +7,7 @@ propComponents: ['Tooltip']
 
 import { useEffect, useRef, useState } from 'react';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import './TooltipExamples.css';
 
 ## Examples
diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipIcon.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 
 export const TooltipIcon: React.FunctionComponent = () => {
   const [showSuccessContent, setShowSuccessContent] = useState(false);
@@ -15,7 +15,7 @@ export const TooltipIcon: React.FunctionComponent = () => {
           variant="plain"
           id="tt-ref"
           onClick={() => setShowSuccessContent(!showSuccessContent)}
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
         />
       </Tooltip>
     </div>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToggleGroupDemo/ToggleGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToggleGroupDemo/ToggleGroupDemo.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupProps } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 interface ToggleGroupState {
@@ -67,7 +67,7 @@ export class ToggleGroupDemo extends Component<ToggleGroupProps, ToggleGroupStat
         </ToggleGroup>
         <ToggleGroup>
           <ToggleGroupItem
-            icon={<CopyIcon />}
+            icon={<RhUiCopyFillIcon />}
             key={3}
             buttonId="third"
             isSelected={isSelected.third}
@@ -107,7 +107,7 @@ export class ToggleGroupDemo extends Component<ToggleGroupProps, ToggleGroupStat
             isSelected={isSelected.seventh}
             onChange={this.handleItemClick}
           />
-          <ToggleGroupItem icon={<CopyIcon />} text="Option 3" key={8} isDisabled />
+          <ToggleGroupItem icon={<RhUiCopyFillIcon />} text="Option 3" key={8} isDisabled />
         </ToggleGroup>
       </>
     );
