@patternfly/react-core 6.5.0-prerelease.7 → 6.5.0-prerelease.71

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
-export interface AvatarProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface AvatarProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Additional classes added to the avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */

package/src/components/BackToTop/BackToTop.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/BackToTop/back-to-top';
 import { css } from '@patternfly/react-styles';
-import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
+import RhMicronsCaretUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-up-icon';
 import { canUseDOM } from '../../helpers/util';
 import { Button } from '../Button';
 
@@ -84,7 +84,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
+      <Button variant="primary" icon={<RhMicronsCaretUpIcon />} iconPosition="end">
         {title}
       </Button>
     </div>

package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -31,11 +31,11 @@ exports[`Matches the snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 320 512"
+        viewBox="0 0 20 20"
         width="1em"
       >
         <path
-          d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+          d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
         />
       </svg>
     </div>

package/src/components/Banner/examples/Banner.md

@@ -5,11 +5,11 @@ cssPrefix: pf-v6-c-banner
 propComponents: ['Banner']
 ---
 
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 ## Examples
 

package/src/components/Banner/examples/BannerStatus.tsx

@@ -1,16 +1,16 @@
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const BannerStatus: React.FunctionComponent = () => (
   <>
     <Banner screenReaderText="Success banner" status="success">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <CheckCircleIcon />
+          <RhUiCheckCircleFillIcon />
         </FlexItem>
         <FlexItem>Success banner</FlexItem>
       </Flex>
@@ -19,7 +19,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Warning banner" status="warning">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationTriangleIcon />
+          <RhUiWarningFillIcon />
         </FlexItem>
         <FlexItem>Warning banner</FlexItem>
       </Flex>
@@ -28,7 +28,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Danger banner" status="danger">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationCircleIcon />
+          <RhUiErrorFillIcon />
         </FlexItem>
         <FlexItem>Danger banner</FlexItem>
       </Flex>
@@ -37,7 +37,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Info banner" status="info">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <InfoCircleIcon />
+          <RhUiInformationFillIcon />
         </FlexItem>
         <FlexItem>Info banner</FlexItem>
       </Flex>
@@ -46,7 +46,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Custom banner" status="custom">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <BellIcon />
+          <RhUiNotificationFillIcon />
         </FlexItem>
         <FlexItem>Custom banner</FlexItem>
       </Flex>

package/src/components/Brand/Brand.tsx

@@ -4,8 +4,10 @@ import { setBreakpointCssVars } from '../../helpers';
 import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
 import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
 
-export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface BrandProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */

package/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -32,7 +32,7 @@ export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>
     <li {...props} className={css(styles.breadcrumbItem, className)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       <h1 className={styles.breadcrumbHeading}>

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -47,7 +47,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
     <li {...props} className={css(styles.breadcrumbItem, classNameProp)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       {component === 'button' && (

package/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -53,11 +53,11 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 256 512"
+            viewBox="0 0 20 20"
             width="1em"
           >
             <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
             />
           </svg>
         </span>
@@ -78,7 +78,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -95,7 +95,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import { useRef, useState } from 'react';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -11,13 +11,13 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 
 const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="edit"
@@ -27,7 +27,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="action"
@@ -37,7 +37,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="apps"

package/src/components/Button/Button.tsx

@@ -4,9 +4,9 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
-import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiStarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-fill-icon';
+import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
@@ -109,6 +109,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   hamburgerVariant?: 'expand' | 'collapse';
   /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
   isCircle?: boolean;
+  /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */
+  isDocked?: boolean;
+  /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */
+  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -134,6 +138,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isHamburger,
   hamburgerVariant,
   isCircle,
+  isDocked = false,
+  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -205,17 +211,17 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       iconContent = (
         <>
           <span className={css('pf-v6-c-button__icon-favorite')}>
-            <OutlinedStarIcon />
+            <RhUiStarIcon />
           </span>
           <span className={css('pf-v6-c-button__icon-favorited')}>
-            <StarIcon />
+            <RhUiStarFillIcon />
           </span>
         </>
       );
     }
 
     if (isSettings) {
-      iconContent = <CogIcon />;
+      iconContent = <RhUiSettingsFillIcon />;
     }
     if (isHamburger) {
       iconContent = hamburgerIcon;
@@ -265,6 +271,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
+        isDocked && styles.modifiers.docked,
+        isDocked && isTextExpanded && styles.modifiers.textExpanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

package/src/components/Button/__tests__/Button.test.tsx

@@ -555,6 +555,48 @@ describe('Favorite button', () => {
   });
 });
 
+describe('Dock variant', () => {
+  test(`Renders with class ${styles.modifiers.docked} when isDocked = true`, () => {
+    render(<Button isDocked>Dock Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with class ${styles.modifiers.docked} when isDocked is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => {
+    render(
+      <Button isTextExpanded isDocked>
+        Text Expanded Button
+      </Button>
+    );
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => {
+    render(<Button isTextExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => {
+    render(
+      <Button isDocked isTextExpanded>
+        Dock Text Expanded Button
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass(styles.modifiers.docked);
+    expect(button).toHaveClass(styles.modifiers.textExpanded);
+  });
+});
+
 test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-67"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -7,14 +7,14 @@ ouia: true
 ---
 
 import { Fragment, useState } from 'react';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/Button/examples/ButtonAriaDisabled.tsx

@@ -1,11 +1,11 @@
 import { Button, Flex, Tooltip } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const ButtonAriaDisabled: React.FunctionComponent = () => (
   <>
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button isAriaDisabled>Primary aria disabled</Button>
-      <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
+      <Button isAriaDisabled variant="link" icon={<RhUiAddCircleFillIcon />}>
         Link aria disabled
       </Button>
       <Button isAriaDisabled variant="link" isInline>

package/src/components/Button/examples/ButtonCircle.tsx

@@ -1,8 +1,8 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface LoadingPropsType {
@@ -22,32 +22,52 @@ export const ButtonCircle: React.FunctionComponent = () => {
 
   return (
     <Flex columnGap={{ default: 'columnGapSm' }}>
-      <Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
+      <Button isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add primary circle variant example" />
       <Button
         variant="secondary"
         isCircle
-        icon={<PlusCircleIcon />}
+        icon={<RhUiAddCircleFillIcon />}
         aria-label="Add secondary circle variant example"
       />
-      <Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
-      <Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
-      <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
-      <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
+      <Button
+        variant="tertiary"
+        isCircle
+        icon={<RhUiAddCircleFillIcon />}
+        aria-label="Add tertiary circle variant example"
+      />
+      <Button
+        variant="danger"
+        isCircle
+        icon={<RhUiAddCircleFillIcon />}
+        aria-label="Add danger circle variant example"
+      />
+      <Button
+        variant="warning"
+        isCircle
+        icon={<RhUiAddCircleFillIcon />}
+        aria-label="Add warning circle variant example"
+      />
+      <Button variant="link" isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add link circle variant example" />
       <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
-      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
-      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
+      <Button
+        variant="stateful"
+        isCircle
+        icon={<RhUiNotificationFillIcon />}
+        aria-label="Stateful unread circle variant example"
+      />
       <Button
         variant="stateful"
         state="read"
         isCircle
-        icon={<BellIcon />}
+        icon={<RhUiNotificationFillIcon />}
         aria-label="Stateful read circle variant example"
       />
       <Button
         variant="stateful"
         state="attention"
         isCircle
-        icon={<BellIcon />}
+        icon={<RhUiNotificationFillIcon />}
         aria-label="Stateful attention circle variant example"
       />
       <Button

package/src/components/Button/examples/ButtonDisabled.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonDisabled: React.FunctionComponent = () => (
@@ -25,7 +25,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
-      <Button isDisabled variant="link" icon={<PlusCircleIcon />}>
+      <Button isDisabled variant="link" icon={<RhUiAddCircleFillIcon />}>
         Link
       </Button>
       <Button isDisabled variant="link" isInline>
@@ -34,7 +34,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
       <Button variant="link" isDanger isDisabled>
         Danger link
       </Button>
-      <Button isDisabled variant="plain" aria-label="Action" icon={<TimesIcon />} />
+      <Button isDisabled variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>

package/src/components/Button/examples/ButtonPlainHasNoPadding.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@patternfly/react-core';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 export const ButtonPlainHasNoPadding: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" hasNoPadding aria-label="More info" icon={<QuestionCircleIcon />} />
+    <Button variant="plain" hasNoPadding aria-label="More info" icon={<RhUiQuestionMarkCircleFillIcon />} />
     which is placed inline with text
   </p>
 );

package/src/components/Button/examples/ButtonStateful.tsx

@@ -1,5 +1,5 @@
 import { Button, Flex } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonStateful: React.FunctionComponent = () => (
   <Flex>
@@ -7,7 +7,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Read</strong>
       </div>
-      <Button variant="stateful" state="read" icon={<BellIcon />}>
+      <Button variant="stateful" state="read" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">items</span>
       </Button>
     </div>
@@ -15,7 +15,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Unread</strong>
       </div>
-      <Button variant="stateful" state="unread" icon={<BellIcon />}>
+      <Button variant="stateful" state="unread" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">unread items</span>
       </Button>
     </div>
@@ -23,7 +23,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Attention</strong>
       </div>
-      <Button variant="stateful" state="attention" icon={<BellIcon />}>
+      <Button variant="stateful" state="attention" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">unread items, needs attention</span>
       </Button>
     </div>

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,9 +1,9 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <>
@@ -29,10 +29,10 @@ export const ButtonVariations: React.FunctionComponent = () => (
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
-      <Button variant="link" icon={<PlusCircleIcon />}>
+      <Button variant="link" icon={<RhUiAddCircleFillIcon />}>
         Link
       </Button>
-      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+      <Button variant="link" icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
         Link
       </Button>
       <Button variant="link" isInline>
@@ -41,7 +41,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" isDanger>
         Danger link
       </Button>
-      <Button variant="plain" aria-label="Action" icon={<TimesIcon />} />
+      <Button variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
@@ -50,13 +50,13 @@ export const ButtonVariations: React.FunctionComponent = () => (
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
-      <Button variant="stateful" icon={<BellIcon />} state="read">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="read">
         Stateful read
       </Button>
-      <Button variant="stateful" icon={<BellIcon />} state="unread">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="unread">
         Stateful unread
       </Button>
-      <Button variant="stateful" icon={<BellIcon />} state="attention">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="attention">
         Stateful attention
       </Button>
     </Flex>