@patternfly/react-core 6.6.0-prerelease.6 → 6.6.0-prerelease.7

package/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"

package/src/components/Toolbar/examples/Toolbar.md

@@ -12,7 +12,7 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -24,7 +24,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -229,7 +229,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={kebabIsOpen}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -22,7 +22,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -231,7 +231,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >

package/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

package/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>

package/src/components/TreeView/examples/TreeView.md

@@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
 
 ## Examples
 

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -8,9 +8,9 @@ import {
   MenuToggle,
   TreeViewDataItem
 } from '@patternfly/react-core';
-import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';
+import RhUiStorageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-fill-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
@@ -47,7 +47,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -71,7 +71,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 1',
           id: 'example7-App1',
-          action: <Button variant="plain" aria-label="Launch app 1" icon={<ClipboardIcon />} />,
+          action: <Button variant="plain" aria-label="Launch app 1" icon={<RhUiClipboardFillIcon />} />,
           actionProps: {
             'aria-label': 'Launch app 1'
           },
@@ -83,7 +83,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 2',
           id: 'example7-App2',
-          action: <Button variant="plain" aria-label="Launch app 1" icon={<HamburgerIcon />} />,
+          action: <Button variant="plain" aria-label="Launch app 2" icon={<RhUiStorageFillIcon />} />,
           children: [
             { name: 'Settings', id: 'example7-App2Settings' },
             {

package/src/components/Wizard/examples/Wizard.md

@@ -49,7 +49,7 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';

package/src/components/Wizard/examples/WizardWithNavAnchors.tsx

@@ -1,5 +1,5 @@
 import { Button, Wizard, WizardStep } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 
 export const WizardWithNavAnchors: React.FunctionComponent = () => (
@@ -7,7 +7,7 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => (
     <WizardStep
       name={
         <>
-          <ExternalLinkAltIcon /> PF3
+          <RhMicronsExternalLinkIcon /> PF3
         </>
       }
       id="navanchors-pf3-step"
@@ -18,7 +18,7 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => (
     <WizardStep
       name={
         <>
-          <ExternalLinkAltIcon /> PF4
+          <RhMicronsExternalLinkIcon /> PF4
         </>
       }
       id="navanchors-pf4-step"

package/src/components/assets/img_avatar-light.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #d2d2d2;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <rect class="cls-3" width="36" height="36"/>
+  <path class="cls-2" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"/>
+  <path class="cls-1" d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"/>
+</svg>

package/src/components/assets/rhds.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <g>
+      <rect width="48" height="48" fill="#147878"></rect>
+      <rect x="36" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="36" width="24" height="6" fill="#004D4D"></rect>
+      <rect x="18" y="30" width="12" height="6" fill="#004D4D"></rect>
+      <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"></rect>
+      <rect x="18" width="12" height="12" fill="#004D4D"></rect>
+      <rect x="6" y="30" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="24" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="18" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="12" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="6" width="6" height="6" fill="#004D4D"></rect>
+      <rect y="12" width="6" height="24" fill="#004D4D"></rect>
+    </g>
+  </svg>

package/src/demos/AlertGroup.md

@@ -5,7 +5,7 @@ section: components
 
 import { useEffect, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 

package/src/demos/CardDemos.md

@@ -4,11 +4,7 @@ section: components
 ---
 
 import { Fragment, useState } from 'react';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-caret-right-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
+import { RhUiEllipsisVerticalFillIcon, RhMicronsCaretRightIcon, RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhMicronsExternalLinkIcon, RhUiInformationFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';

package/src/demos/CardView/CardView.md

@@ -16,7 +16,7 @@ import sparkIcon from '../assets/camel-spark_200x150.png';
 import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
 import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from '../assets/FuseConnector_Icons_REST.png';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

package/src/demos/CardView/examples/CardView.tsx

@@ -46,7 +46,7 @@ import sparkIcon from './assets/camel-spark_200x150.png';
 import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
@@ -427,7 +427,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                   variant="plain"
                   onClick={onToolbarKebabDropdownToggle}
                   isExpanded={isLowerToolbarKebabDropdownOpen}
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isLowerToolbarKebabDropdownOpen}
@@ -517,7 +517,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 onCardKebabDropdownToggle(e, key.toString());
                               }}
                               isExpanded={!!state[key]}
-                              icon={<EllipsisVIcon />}
+                              icon={<RhUiEllipsisVerticalFillIcon />}
                             />
                           )}
                           popperProps={{ position: 'right' }}

package/src/demos/Compass/Compass.md

@@ -6,16 +6,16 @@ section: components
 import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
-import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-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';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 

package/src/demos/Compass/examples/CompassDemo.tsx

@@ -30,7 +30,7 @@ import {
 } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
-import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-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';
 
 export const CompassBasic: React.FunctionComponent = () => {
@@ -123,7 +123,7 @@ export const CompassBasic: React.FunctionComponent = () => {
             </ActionListGroup>
             <ActionListItem>
               <Tooltip content="Copy">
-                <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+                <Button isCircle variant="plain" icon={<RhUiCopyIcon />} aria-label="Copy" />
               </Tooltip>
             </ActionListItem>
             <ActionListGroup>
@@ -134,7 +134,7 @@ export const CompassBasic: React.FunctionComponent = () => {
               </ActionListItem>
               <ActionListItem>
                 <Tooltip content="Second copy">
-                  <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+                  <Button isCircle variant="plain" icon={<RhUiCopyIcon />} aria-label="Copy2" />
                 </Tooltip>
               </ActionListItem>
             </ActionListGroup>

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -32,10 +32,10 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '../../assets/PF-IconLogo-color.svg';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 
 interface NavOnSelectProps {
@@ -294,7 +294,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link4"
                       itemId={3}
                       isActive={activeItem === 3}
-                      icon={<CodeIcon />}
+                      icon={<RhUiCodeIcon />}
                       anchorRef={navItem4Ref}
                       aria-label="Network services"
                     >
@@ -318,12 +318,24 @@ export const CompassDockDemo: React.FunctionComponent = () => {
               >
                 <ToolbarItem>
                   {isDockTextExpanded || isDockExpanded ? (
-                    <MenuToggle ref={appsRef} variant="plain" icon={<ThIcon />} isDocked aria-label="Applications">
+                    <MenuToggle
+                      ref={appsRef}
+                      variant="plain"
+                      icon={<RhUiThumbnailViewSmallFillIcon />}
+                      isDocked
+                      aria-label="Applications"
+                    >
                       Applications
                     </MenuToggle>
                   ) : (
                     <Tooltip aria="none" aria-live="off" triggerRef={appsRef} content="Applications">
-                      <MenuToggle ref={appsRef} variant="plain" icon={<ThIcon />} isDocked aria-label="Applications">
+                      <MenuToggle
+                        ref={appsRef}
+                        variant="plain"
+                        icon={<RhUiThumbnailViewSmallFillIcon />}
+                        isDocked
+                        aria-label="Applications"
+                      >
                         Applications
                       </MenuToggle>
                     </Tooltip>

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -20,7 +20,7 @@ propComponents:
 
 import { cloneElement, Fragment, useRef, useState } from 'react';
 
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 
 As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.

package/src/demos/CustomMenus/CustomMenus.md

@@ -7,20 +7,18 @@ subsection: menus
 import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
-import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
-import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
-import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -1,8 +1,8 @@
 import { useRef, useState } from 'react';
 import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOption } from '@patternfly/react-core';
 import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
-import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ActionsMenuDemo: React.FunctionComponent = () => {
@@ -46,7 +46,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
             isSelected={selectedItems.includes(0)}
             actions={
               <MenuItemAction
-                icon={<CodeBranchIcon />}
+                icon={<RhUiBranchFillIcon />}
                 actionId="code"
                 // eslint-disable-next-line no-console
                 onClick={() => console.log('clicked on code icon')}
@@ -69,7 +69,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(2)}
-            actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
+            actions={<MenuItemAction icon={<RhUiClipboardFillIcon />} actionId="copy" aria-label="Copy" />}
             value={2}
           >
             Item 3

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -11,7 +11,7 @@ import {
   DropdownList,
   DropdownItem
 } from '@patternfly/react-core';
-import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-thumbnail-view-small-fill-icon';
 import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
@@ -215,7 +215,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           onClick={onToggleClick}
           isExpanded={isOpen}
           style={{ width: 'auto' }}
-          icon={<ThIcon />}
+          icon={<RhUiThumbnailViewSmallFillIcon />}
         />
       )}
       ref={menuRef}

package/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx

@@ -9,9 +9,9 @@ import {
   Divider,
   MenuContainer
 } from '@patternfly/react-core';
-import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 interface MenuHeightsType {
@@ -183,18 +183,18 @@ export const DrilldownMenuDemo: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon />}
+            icon={<RhUiStorageDomainFillIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="drilldownMenuStorage">
-                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon />} direction="up">
+                <MenuItem itemId="group:storage_breadcrumb" icon={<RhUiStorageDomainFillIcon />} direction="up">
                   Add storage
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem icon={<CodeBranchIcon />} itemId="git">
+                <MenuItem icon={<RhUiBranchFillIcon />} itemId="git">
                   From Git
                 </MenuItem>
-                <MenuItem icon={<LayerGroupIcon />} itemId="container">
+                <MenuItem icon={<RhUiServerStackFillIcon />} itemId="container">
                   Container Image
                 </MenuItem>
                 <MenuItem icon={<CubeIcon />} itemId="docker">

package/src/demos/DashboardHeader.tsx

@@ -26,7 +26,7 @@ import {
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 interface DashboardHeaderProps {
@@ -175,7 +175,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -195,7 +195,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >

package/src/demos/DataList/examples/DataListActionable.tsx

@@ -16,7 +16,7 @@ import {
   PageSection,
   Title
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const DataListActionable: React.FunctionComponent = () => {
@@ -100,7 +100,7 @@ export const DataListActionable: React.FunctionComponent = () => {
                       variant="plain"
                       aria-label="Data list with actions example kebab toggle"
                     >
-                      <EllipsisVIcon aria-hidden="true" />
+                      <RhUiEllipsisVerticalFillIcon aria-hidden="true" />
                     </MenuToggle>
                   )}
                   isOpen={isOpen}