fix(PlayIcon): Replace PlayIcon with RhUiPlayFillIcon (#12499)

rebeccaalpert · cursoragent · web-flow · commit a8595111abfc · 2026-07-08T13:15:07.000-04:00
Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -13,7 +13,7 @@ import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-s
 import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
 import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import RhUiDarkModeFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-dark-mode-fill-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
 import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';
 
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
   const [code, setCode] = useState('Some example content');
@@ -16,7 +16,7 @@ export const CodeEditorCustomControl: React.FunctionComponent = () => {
 
   const customControl = (
     <CodeEditorControl
-      icon={<PlayIcon />}
+      icon={<RhUiPlayFillIcon />}
       aria-label="Execute code"
       tooltipProps={{ content: 'Execute code' }}
       onClick={onExecuteCode}
diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
   const [isRunning, setisRunning] = useState(false);
@@ -24,7 +24,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
               variant="plain"
               hasNoPadding
               aria-label="Run in web terminal"
-              icon={<PlayIcon />}
+              icon={<RhUiPlayFillIcon />}
               onClick={() => setisRunning(!isRunning)}
             />
           </Tooltip>
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md
@@ -7,7 +7,7 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 
 import { Fragment, useState } from 'react';
 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';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-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/CodeBlock/examples/CodeBlockBasic.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx
@@ -7,7 +7,7 @@ import {
   Button,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = useState(false);
@@ -57,7 +57,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           <Button
             variant="plain"
             aria-label="Run in web terminal"
-            icon={<PlayIcon />}
+            icon={<RhUiPlayFillIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx
@@ -9,7 +9,7 @@ import {
   Button,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -73,7 +73,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           <Button
             variant="plain"
             aria-label="Run in web terminal"
-            icon={<PlayIcon />}
+            icon={<RhUiPlayFillIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>
diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md
@@ -4,7 +4,7 @@ section: components
 ---
 
 import { useRef, useState, useEffect } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
 import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
@@ -28,7 +28,7 @@ import {
   Title,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
 import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
@@ -112,7 +112,7 @@ export const CompassBasic: React.FunctionComponent = () => {
             <ActionListGroup>
               <ActionListItem>
                 <Tooltip content="Play">
-                  <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
+                  <Button isCircle variant="plain" icon={<RhUiPlayFillIcon />} aria-label="Play" />
                 </Tooltip>
               </ActionListItem>
               <ActionListItem>
diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
@@ -5,7 +5,7 @@ section: components
 
 import { Fragment, useState } from 'react';
 import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon';
 import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -21,7 +21,7 @@ import {
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon';
 import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
@@ -313,7 +313,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
         <Button
           variant={isPaused ? 'plain' : 'link'}
           onClick={pauseOrStart}
-          icon={isPaused ? <PlayIcon /> : <RhUiPauseFillIcon />}
+          icon={isPaused ? <RhUiPlayFillIcon /> : <RhUiPauseFillIcon />}
         >
           {isPaused ? ` Resume Log` : ` Pause Log`}
         </Button>
@@ -370,7 +370,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
             variant="plain"
             onClick={pauseOrStart}
             aria-label={isPaused ? 'Play' : 'Paused'}
-            icon={isPaused ? <PlayIcon /> : <RhUiPauseFillIcon />}
+            icon={isPaused ? <RhUiPlayFillIcon /> : <RhUiPauseFillIcon />}
           />
         </Tooltip>
       </ToolbarItem>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { ClipboardCopy, ClipboardCopyVariant, ClipboardCopyAction, Button } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export class ClipboardCopyDemo extends Component {
   static displayName = 'ClipboardCopyDemo';
@@ -21,7 +21,7 @@ export class ClipboardCopyDemo extends Component {
             isBlock
             additionalActions={
               <ClipboardCopyAction>
-                <Button variant="plain" aria-label="Run in web terminal" icon={<PlayIcon />} />
+                <Button variant="plain" aria-label="Run in web terminal" icon={<RhUiPlayFillIcon />} />
               </ClipboardCopyAction>
             }
           >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CodeEditorDemo/CodeEditorDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CodeEditorDemo/CodeEditorDemo.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { CodeEditor, CodeEditorControl, CodeEditorProps, Language } from '@patternfly/react-code-editor';
 import { Button, Checkbox } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 interface CodeEditorDemoState {
   isDarkTheme: boolean;
@@ -81,7 +81,7 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
     const { isDarkTheme, isHighContrastTheme, isLineNumbersVisible, isReadOnly, isMinimapVisible, code } = this.state;
     const customControl = (
       <CodeEditorControl
-        icon={<PlayIcon />}
+        icon={<RhUiPlayFillIcon />}
         aria-label="Execute code"
         onClick={this.onExecuteCode}
         isVisible={code !== ''}
