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

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } 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';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -27,7 +27,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
       shouldFocusToggleOnSelect

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { useSSRSafeId } from '../../helpers';
-import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
+import RhUiGripVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-grip-vertical-fill-icon';
 import { Button, ButtonVariant } from '../Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -86,7 +86,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
             <Button
               variant={ButtonVariant.plain}
               component="span"
-              icon={<GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />}
+              icon={<RhUiGripVerticalFillIcon style={{ verticalAlign: '-0.3em' }} />}
             />
           </div>
         )}

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -20,9 +20,9 @@ import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-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';
 import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -25,9 +25,9 @@ import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-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';
 
 interface Option {
   text: string;
@@ -155,7 +155,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Available"
             key="availableSortButton"
             isDisabled={isDisabled}
-            icon={<PficonSortCommonAscIcon />}
+            icon={<RhMicronsSortDownSmallToLargeIcon />}
           />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -167,7 +167,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={<EllipsisVIcon />}
+                icon={<RhUiEllipsisVerticalFillIcon />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -190,7 +190,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Chosen"
             key="chosenSortButton"
             isDisabled={isDisabled}
-            icon={<PficonSortCommonAscIcon />}
+            icon={<RhMicronsSortDownSmallToLargeIcon />}
           />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -202,7 +202,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={<EllipsisVIcon />}
+                icon={<RhUiEllipsisVerticalFillIcon />}
               />
             )}
             isOpen={isChosenKebabOpen}

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -2,13 +2,13 @@
  * This test was generated
  */
 import { render } from '@testing-library/react';
-import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+import RhUiProfileFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-profile-fill-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import { Spinner } from '../../../Spinner/Spinner';
 
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={UserIcon} />);
+  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={RhUiProfileFillIcon} />);
   expect(asFragment()).toMatchSnapshot();
 });
 

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -11,24 +11,12 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 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="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
-        />
-      </svg>
-      <svg
-        class="pf-v6-icon-rh-ui"
-        viewBox="0 0 32 32"
-      >
-        <path
-          d="M20.354 15.702C22.545 14.273 24 11.805 24 9c0-4.411-3.589-8-8-8S8 4.589 8 9a7.995 7.995 0 0 0 3.646 6.702C6.053 17.538 2 22.801 2 29a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-6.199-4.053-11.462-9.646-13.298ZM10 9c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6ZM4.041 28C4.551 21.85 9.72 17 16 17s11.449 4.85 11.959 11H4.041Z"
-        />
-      </svg>
+      <path
+        d="M29.75 29a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75c0-6.283 4.241-11.583 10.007-13.219A7.755 7.755 0 0 1 8.25 9c0-4.273 3.477-7.75 7.75-7.75S23.75 4.727 23.75 9a7.751 7.751 0 0 1-4.007 6.781C25.509 17.417 29.75 22.717 29.75 29Z"
+      />
     </svg>
   </div>
 </DocumentFragment>

package/src/components/Hint/examples/Hint.md

@@ -6,7 +6,7 @@ propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
 import { Fragment, useState } from 'react';
-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/Hint/examples/HintBasicWithTitle.tsx

@@ -12,7 +12,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } 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';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -37,7 +37,7 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
     >

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } 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';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -36,7 +36,7 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
     >

package/src/components/InputGroup/examples/InputGroup.md

@@ -8,7 +8,6 @@ propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples

package/src/components/List/examples/List.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 

package/src/components/List/examples/ListIcons.tsx

@@ -1,11 +1,11 @@
 import { List, ListItem } from '@patternfly/react-core';
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListIcons: React.FunctionComponent = () => (
   <List isPlain>
-    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
     <ListItem icon={<KeyIcon />}>Second</ListItem>
     <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>

package/src/components/List/examples/ListLargeIcons.tsx

@@ -1,11 +1,11 @@
 import { List, ListItem } from '@patternfly/react-core';
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListLargeIcons: React.FunctionComponent = () => (
   <List isPlain iconSize="large">
-    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
     <ListItem icon={<KeyIcon />}>Second</ListItem>
     <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>

package/src/components/LoginPage/LoginForm.tsx

@@ -5,8 +5,8 @@ import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ValidatedOptions } from '../../helpers/constants';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';
+import RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';
 import { HelperText, HelperTextItem } from '../HelperText';
 
 export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
@@ -130,7 +130,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
                 variant="control"
                 onClick={() => setPasswordHidden(!passwordHidden)}
                 aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
-                icon={passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+                icon={passwordHidden ? <RhUiViewFillIcon /> : <RhUiViewOffFillIcon />}
               />
             </InputGroupItem>
           </InputGroup>

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -269,24 +269,12 @@ exports[`LoginForm LoginForm with show password 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 32 32"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 576 512"
-                  >
-                    <path
-                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M16 10c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6Zm0 10c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4Zm14.79-4.665C30.009 13.776 25.625 6 16 6S1.991 13.776 1.209 15.336a1.472 1.472 0 0 0 0 1.328c.781 1.559 5.165 9.335 14.79 9.335s14.009-7.776 14.791-9.336a1.474 1.474 0 0 0 0-1.329ZM16 24c-8.049 0-11.937-6.222-12.882-8C4.064 14.222 7.951 8 16 8s11.938 6.224 12.882 8c-.946 1.778-4.833 8-12.882 8Z"
-                    />
-                  </svg>
+                  <path
+                    d="M30.566 15.447C29.796 13.911 25.478 6.25 16 6.25S2.203 13.911 1.433 15.448a1.226 1.226 0 0 0 0 1.104c.77 1.536 5.088 9.197 14.566 9.197s13.797-7.661 14.567-9.198a1.226 1.226 0 0 0 0-1.104ZM16 21a5 5 0 1 1 .001-10.001A5 5 0 0 1 16 21Z"
+                  />
                 </svg>
               </span>
             </button>

package/src/components/Menu/MenuItem.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import topOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_top_offset';
 import rightOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_m_left_right_offset';
 import leftOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_left_offset';
-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 RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -389,7 +389,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           <span className={css(styles.menuItemText)}>{children}</span>
           {isExternalLink && (
             <span className={css(styles.menuItemExternalIcon)}>
-              <ExternalLinkAltIcon />
+              <RhMicronsExternalLinkIcon />
             </span>
           )}
           {(flyoutMenu || direction === 'down') && (

package/src/components/Menu/examples/Menu.md

@@ -22,13 +22,13 @@ ouia: true
 
 import { Fragment, createRef, useEffect, useRef, useState } from 'react';
 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 LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-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 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 TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+import RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
+import RhUiStorageDomainFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-fill-icon';
 import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
-import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+import RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';
 
 export const MenuOptionMultiSelect: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
@@ -20,7 +20,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
         <MenuList isAriaMultiselectable aria-label="Menu multi select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon />} itemId={2}>
+          <MenuItem icon={<RhUiTableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>

package/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
-import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+import RhUiTableIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-table-icon';
 
 export const MenuOptionSingleSelect: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(0);
@@ -17,7 +17,7 @@ export const MenuOptionSingleSelect: React.FunctionComponent = () => {
         <MenuList aria-label="Menu single select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon />} itemId={2}>
+          <MenuItem icon={<RhUiTableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } 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 MenuWithActions: React.FunctionComponent = () => {
@@ -31,7 +31,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
               isSelected={selectedItems.indexOf(0) !== -1}
               actions={
                 <MenuItemAction
-                  icon={<CodeBranchIcon />}
+                  icon={<RhUiBranchFillIcon />}
                   actionId="code"
                   // eslint-disable-next-line no-console
                   onClick={() => console.log('clicked on code icon')}
@@ -54,7 +54,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               isSelected={selectedItems.indexOf(2) !== -1}
-              actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
+              actions={<MenuItemAction icon={<RhUiClipboardFillIcon />} actionId="copy" aria-label="Copy" />}
               itemId={2}
             >
               Item 3

package/src/components/Menu/examples/MenuWithDescription.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 
 export const MenuWithDescription: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(0);
@@ -15,14 +15,14 @@ export const MenuWithDescription: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon />} description="Description" itemId={0}>
+          <MenuItem icon={<RhUiBranchFillIcon />} description="Description" itemId={0}>
             Action 1
           </MenuItem>
-          <MenuItem isDisabled icon={<CodeBranchIcon />} description="Description" itemId={1}>
+          <MenuItem isDisabled icon={<RhUiBranchFillIcon />} description="Description" itemId={1}>
             Action 2 disabled
           </MenuItem>
           <MenuItem
-            icon={<CodeBranchIcon />}
+            icon={<RhUiBranchFillIcon />}
             description="Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est."
             itemId={2}
           >

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } 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';
 
 export const MenuWithDrilldown: React.FunctionComponent = () => {
@@ -153,18 +153,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon />}
+            icon={<RhUiStorageDomainFillIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="drilldown-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/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -19,9 +19,9 @@ import {
   MenuToggle,
   MenuToggleElement
 } 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 RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
@@ -435,15 +435,15 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               itemId="group:storage"
-              icon={<StorageDomainIcon />}
+              icon={<RhUiStorageDomainFillIcon />}
               direction="down"
               onClick={() => setBreadcrumb(addStorageBreadcrumb)}
               drilldownMenu={
                 <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
-                  <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/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } 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';
 
 export const MenuDrilldownInitialState: React.FunctionComponent = () => {
@@ -156,18 +156,18 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon />}
+            icon={<RhUiStorageDomainFillIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="initial-state-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/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } 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';
 
 export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => {
@@ -153,18 +153,18 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon />}
+            icon={<RhUiStorageDomainFillIcon />}
             direction="down"
             drilldownMenu={() => (
               <DrilldownMenu id="functions-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/components/Menu/examples/MenuWithFavorites.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } 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 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';
 
 export const MenuWithFavorites: React.FunctionComponent = () => {
@@ -39,7 +39,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
       text: 'Item 2',
       description: 'Description 2',
       itemId: 'item-2',
-      action: <ClipboardIcon />,
+      action: <RhUiClipboardFillIcon />,
       actionId: 'clipboard'
     },
     {

package/src/components/Menu/examples/MenuWithIcons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
-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 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';
 
 export const MenuWithIcons: React.FunctionComponent = () => {
@@ -17,10 +17,10 @@ export const MenuWithIcons: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon />} itemId={0}>
+          <MenuItem icon={<RhUiBranchFillIcon />} itemId={0}>
             From git
           </MenuItem>
-          <MenuItem icon={<LayerGroupIcon />} itemId={1}>
+          <MenuItem icon={<RhUiServerStackFillIcon />} itemId={1}>
             Container image
           </MenuItem>
           <MenuItem icon={<CubeIcon />} itemId={2}>