@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -23,8 +23,10 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  DrawerSection,
   Flex,
   FlexItem,
+  Icon,
   InputGroup,
   InputGroupItem,
   PageSection,
@@ -41,13 +43,12 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
@@ -99,8 +100,8 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
     setSelectedDataListItemId('');
   };
 
-  const toggleGroupItems = (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
       <ToolbarItem>
         <InputGroup>
           <InputGroupItem isFill>
@@ -114,11 +115,15 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
+            <Button
+              variant={ButtonVariant.control}
+              aria-label="search button for search input"
+              icon={<RhMicronsSearchIcon />}
+            />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
+      <ToolbarGroup variant="filter-group" alignItems="center">
         <ToolbarItem>
           <Select
             aria-label="Status select"
@@ -168,12 +173,6 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </Select>
         </ToolbarItem>
       </ToolbarGroup>
-    </Flex>
-  );
-
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-      {toggleGroupItems}
     </ToolbarToggleGroup>
   );
 
@@ -208,211 +207,224 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <Fragment>
-      <Toolbar id="inline-modifier-data-toolbar">
-        <ToolbarContent>{ToolbarItems}</ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="data list"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem id="inline-modifier-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+    <DataList
+      aria-label="data list"
+      selectedDataListItemId={selectedDataListItemId}
+      onSelectDataListItem={onSelectDataListItem}
+    >
+      <DataListItem id="inline-modifier-item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <RhUiBranchFillIcon /> 10
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCubesIcon /> 5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item1 inline-modifier-action1"
-                  id="inline-modifier-action1"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item1 inline-modifier-action1"
+                id="inline-modifier-action1"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item2">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCubesIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>
+                      5
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>
+                      5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <TimesCircleIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item2 inline-modifier-action2"
-                  id="inline-modifier-action2"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item2 inline-modifier-action2"
+                id="inline-modifier-action2"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item3">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <RhUiBranchFillIcon /> 10
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCubesIcon /> 5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item3 inline-modifier-action3"
-                  id="inline-modifier-action3"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item3 inline-modifier-action3"
+                id="inline-modifier-action3"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item4">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <RhUiCodeIcon /> 4
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <TimesCircleIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <RhUiCubesIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>
+                      5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>
+                      5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item4 inline-modifier-action4"
-                  id="inline-modifier-action4"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item4 inline-modifier-action4"
+                id="inline-modifier-action4"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
   );
 
   return (
@@ -426,9 +438,18 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </p>
         </Content>
       </PageSection>
-      <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded} isInline>
+          <DrawerSection>
+            <Toolbar
+              id="inline-modifier-data-toolbar"
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
           </DrawerContent>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -52,8 +52,8 @@ import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { KeyTypes } from '../../../helpers';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
@@ -178,7 +178,7 @@ export const TablesAndTabs = () => {
   const toolbar = (
     <Toolbar id="page-layout-table-column-management-action-toolbar-top">
       <ToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarItem>
             <MenuToggle>Name</MenuToggle>
           </ToolbarItem>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -13,7 +13,7 @@ import {
   Label,
   LabelGroup
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AttributeValueFiltering: React.FunctionComponent = () => {
@@ -226,7 +226,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     <div ref={textInputGroupRef}>
       <TextInputGroup>
         <TextInputGroupMain
-          icon={showSearchIcon && <SearchIcon />}
+          icon={showSearchIcon && <RhMicronsSearchIcon />}
           value={inputValue}
           onChange={handleInputChange}
           onFocus={() => setMenuIsOpen(true)}

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -13,7 +13,7 @@ import {
   Label,
   LabelGroup
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AutoCompleteSearch: React.FunctionComponent = () => {
@@ -209,7 +209,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
     <div ref={textInputGroupRef}>
       <TextInputGroup>
         <TextInputGroupMain
-          icon={showSearchIcon && <SearchIcon />}
+          icon={showSearchIcon && <RhMicronsSearchIcon />}
           value={inputValue}
           hint={hint}
           onChange={handleInputChange}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -20,12 +20,12 @@ import {
   MenuFooter
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-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 DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
 
 export const ConsoleLogViewerToolbar: React.FC = () => {
   const firstOptions = {
@@ -254,7 +254,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
   };
 
   const LogsSearchInput = (
-    <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+    <ToolbarToggleGroup toggleIcon={<RhMicronsSearchIcon />} breakpoint="lg">
       <ToolbarItem>
         <SearchInput
           placeholder="Search logs"
@@ -313,7 +313,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
         <Button
           variant={isPaused ? 'plain' : 'link'}
           onClick={pauseOrStart}
-          icon={isPaused ? <PlayIcon /> : <PauseIcon />}
+          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 /> : <PauseIcon />}
+            icon={isPaused ? <RhUiPlayFillIcon /> : <RhUiPauseFillIcon />}
           />
         </Tooltip>
       </ToolbarItem>
@@ -451,7 +451,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={downloadExpandedMobile}
                 onClick={onDownloadToggleMobile}
-                icon={<DownloadIcon />}
+                icon={<RhUiDownloadIcon />}
                 aria-label="Download"
               />
             )}
@@ -470,7 +470,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       {rightAlignedItemsMobile}
       <ToolbarItem>
         <Tooltip position="top" content={<div>Expand</div>}>
-          <Button variant="plain" aria-label="expand" icon={<ExpandIcon />} />
+          <Button variant="plain" aria-label="expand" icon={<RhUiExpandIcon />} />
         </Tooltip>
       </ToolbarItem>
     </Fragment>