From 6e56f07ff3a33ac45c0e15180c6a48675c345a0b Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 12 Jun 2026 10:48:47 -0400
Subject: [PATCH 1/4] feat(Avatar): support colorful

---
 packages/react-core/package.json              |  2 +-
 .../src/components/Avatar/Avatar.tsx          | 42 +++++++++++----
 .../Avatar/__tests__/Avatar.test.tsx          | 29 +++++++++++
 .../src/components/Avatar/examples/Avatar.md  | 29 ++++++++++-
 .../Avatar/examples/AvatarBasic.tsx           |  2 +-
 .../Avatar/examples/AvatarBordered.tsx        |  2 +-
 .../Avatar/examples/AvatarColorful.tsx        | 42 +++++++++++++++
 .../Avatar/examples/AvatarIcons.tsx           | 51 +++++++++++++++++++
 .../Avatar/examples/AvatarInitials.tsx        | 14 +++++
 .../Avatar/examples/AvatarSizeVariations.tsx  | 13 +----
 .../src/components/Avatar/examples/avatar.css |  6 +++
 .../components/assets/img_avatar-light.svg    | 25 +++++++++
 packages/react-docs/package.json              |  2 +-
 packages/react-icons/package.json             |  2 +-
 packages/react-styles/package.json            |  2 +-
 packages/react-tokens/package.json            |  2 +-
 yarn.lock                                     | 18 +++----
 17 files changed, 244 insertions(+), 39 deletions(-)
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
 create mode 100644 packages/react-core/src/components/Avatar/examples/avatar.css
 create mode 100644 packages/react-core/src/components/assets/img_avatar-light.svg

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 8a757016ea9..4c4ef3fb4ef 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.8",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
diff --git a/packages/react-core/src/components/Avatar/Avatar.tsx b/packages/react-core/src/components/Avatar/Avatar.tsx
index 1f1c2f2cde5..a13105e9ae5 100644
--- a/packages/react-core/src/components/Avatar/Avatar.tsx
+++ b/packages/react-core/src/components/Avatar/Avatar.tsx
@@ -5,31 +5,55 @@ export interface AvatarProps extends React.DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 > {
+  /** Content rendered inside the avatar. */
+  children?: React.ReactNode;
   /** Additional classes added to the avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the avatar. */
+  /** Attribute that specifies the alternate text of the image for the avatar. Will set aria-label for children or initials avatars. */
   alt: string;
   /** Flag to indicate the avatar should have a border. */
   isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Color of the avatar. */
+  color?: 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray';
+  /** Initials of the avatar. */
+  initials?: string;
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
+  children,
   className,
   src = '',
   alt,
   isBordered,
   size,
+  color,
+  initials,
   ...props
-}: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
-    {...props}
-  />
-);
+}: AvatarProps) => {
+  const avatarClasses = css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className);
+
+  if (initials || children) {
+    return (
+      <div
+        className={css(avatarClasses, color && styles.modifiers.colorful, color && styles.modifiers[color])}
+        role="img"
+        aria-label={alt}
+        {...props}
+      >
+        {initials && (
+          <span className="pf-v6-c-avatar__initials" aria-hidden="true">
+            {initials}
+          </span>
+        )}
+        {children && children}
+      </div>
+    );
+  }
+
+  return <img src={src} alt={alt} className={avatarClasses} {...props} />;
+};
 Avatar.displayName = 'Avatar';
diff --git a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
index 8f3b066e074..1b509a48155 100644
--- a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
+++ b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
@@ -62,6 +62,35 @@ test('Renders with passed aria-label prop', () => {
   expect(screen.getByRole('img')).toHaveAccessibleName('Avatar test');
 });
 
+test('Renders with passed initials prop', () => {
+  render(<Avatar alt="avatar" initials="AB" />);
+  expect(screen.getByText('AB')).toBeVisible();
+});
+
+test('Renders with passed children prop', () => {
+  render(<Avatar alt="avatar">Test</Avatar>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with class name ${styles.modifiers.colorful} when color prop is passed`, () => {
+  render(
+    <Avatar alt="avatar" color="red">
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.colorful);
+});
+
+const colors = ['red', 'orangered', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'gray'] as const;
+test.each(colors)('Renders with passed color prop: %s', (color) => {
+  render(
+    <Avatar alt="avatar" color={color}>
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers[color]);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Avatar alt="avatar" aria-label="Avatar test" src="test.png" className="test-class" />);
 
diff --git a/packages/react-core/src/components/Avatar/examples/Avatar.md b/packages/react-core/src/components/Avatar/examples/Avatar.md
index 75417fde012..5280a7ef360 100644
--- a/packages/react-core/src/components/Avatar/examples/Avatar.md
+++ b/packages/react-core/src/components/Avatar/examples/Avatar.md
@@ -5,22 +5,47 @@ cssPrefix: pf-v6-c-avatar
 propComponents: ['Avatar']
 ---
 
+import './avatar.css';
 import { Fragment } from 'react';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 
 ## Examples
 
 ### Basic
 
 ```ts file="./AvatarBasic.tsx"
+
 ```
 
-### Bordered 
+### Bordered
 
 ```ts file="./AvatarBordered.tsx"
+
 ```
 
 ### Size variations
 
 ```ts file="./AvatarSizeVariations.tsx"
+
+```
+
+## Colorful avatars
+
+### With svgs
+
+```ts file="./AvatarColorful.tsx"
+
+```
+
+### With initials
+
+```ts file="./AvatarInitials.tsx"
+
+```
+
+### With icons
+
+```ts file="./AvatarIcons.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
index a166aceb2c3..d7dc488302a 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
@@ -1,4 +1,4 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
 
 <Avatar src={avatarImg} alt="avatar" />;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
index 429589810e2..a8e90c5a6dc 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
@@ -1,4 +1,4 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
 
 <Avatar src={avatarImg} alt="avatar" isBordered />;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx b/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
new file mode 100644
index 00000000000..d9213af7971
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
@@ -0,0 +1,42 @@
+import { Fragment } from 'react';
+import { Avatar } from '@patternfly/react-core';
+
+const _avatarIcon = (
+  <svg aria-hidden="true" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
+    <path fill="currentColor" 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
+      fill="currentColor"
+      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>
+);
+
+<Fragment>
+  <Avatar color="red" alt="red svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="orangered" alt="orangered svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="orange" alt="orange svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="yellow" alt="yellow svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="green" alt="green svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="teal" alt="teal svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="blue" alt="blue svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="purple" alt="purple svg avatar">
+    {_avatarIcon}
+  </Avatar>
+  <Avatar color="gray" alt="gray svg avatar">
+    {_avatarIcon}
+  </Avatar>
+</Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx b/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
new file mode 100644
index 00000000000..4e8ec98d599
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
@@ -0,0 +1,51 @@
+import { Fragment } from 'react';
+import { Avatar, Icon } from '@patternfly/react-core';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
+
+<Fragment>
+  <Avatar color="red" alt="red icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="orangered" alt="orangered icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="orange" alt="orange icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="yellow" alt="yellow icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="green" alt="green icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="teal" alt="teal icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="blue" alt="blue icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="purple" alt="purple icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+  <Avatar color="gray" alt="gray icon avatar">
+    <Icon size="xl">
+      <RhUiAiChatbotIcon />
+    </Icon>
+  </Avatar>
+</Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx b/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
new file mode 100644
index 00000000000..4ffd51b7291
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
@@ -0,0 +1,14 @@
+import { Fragment } from 'react';
+import { Avatar } from '@patternfly/react-core';
+
+<Fragment>
+  <Avatar color="red" alt="red initials avatar" initials="AB" />
+  <Avatar color="orangered" alt="orangered initials avatar" initials="AB" />
+  <Avatar color="orange" alt="orange initials avatar" initials="AB" />
+  <Avatar color="yellow" alt="yellow initials avatar" initials="AB" />
+  <Avatar color="green" alt="green initials avatar" initials="AB" />
+  <Avatar color="teal" alt="teal initials avatar" initials="AB" />
+  <Avatar color="blue" alt="blue initials avatar" initials="AB" />
+  <Avatar color="purple" alt="purple initials avatar" initials="AB" />
+  <Avatar color="gray" alt="gray initials avatar" initials="AB" />
+</Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx b/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
index 05ae1781ecd..d00d8354c05 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
@@ -1,21 +1,10 @@
 import { Fragment } from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
 
 <Fragment>
-  Small
-  <br />
   <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
   <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
   <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
   <Avatar src={avatarImg} alt="avatar" size="xl" />
 </Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/avatar.css b/packages/react-core/src/components/Avatar/examples/avatar.css
new file mode 100644
index 00000000000..97c8fe16ee0
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/avatar.css
@@ -0,0 +1,6 @@
+#ws-react-c-avatar-with-svgs,
+#ws-react-c-avatar-with-initials,
+#ws-react-c-avatar-with-icons {
+  display: flex;
+  gap: 3px;
+}
diff --git a/packages/react-core/src/components/assets/img_avatar-light.svg b/packages/react-core/src/components/assets/img_avatar-light.svg
new file mode 100644
index 00000000000..dd04ff0cddf
--- /dev/null
+++ b/packages/react-core/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>
\ No newline at end of file
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index f4cee2234e7..4a4662c464e 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.8",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index da2936519f3..571a8aee467 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -35,7 +35,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.8",
     "@rhds/icons": "^2.2.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index f570cf5a684..eda179c67fd 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.8",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 1ccbf347a98..8df9685f791 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.8",
     "fs-extra": "^11.3.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 402beec4953..8e8f493a823 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5070,10 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.2":
-  version: 6.5.2
-  resolution: "@patternfly/patternfly@npm:6.5.2"
-  checksum: 10c0/39a6d06f831f1783b6003dfc98c028c653485e2cd6d15fbad3199514161e249fdff8519e29145a082a174a1b4cbdd21d1f716ddcd1d5c00abfeaacabca0b2518
+"@patternfly/patternfly@npm:6.6.0-prerelease.8":
+  version: 6.6.0-prerelease.8
+  resolution: "@patternfly/patternfly@npm:6.6.0-prerelease.8"
+  checksum: 10c0/4b701fa77965049934d570f3ea4003326fe213ce38c5c129f83c9cbc2652f8788feccb92eaa1be3e99f5f5ed7c836368b454ad5fd0135cfff4833fffada0203f
   languageName: node
   linkType: hard
 
@@ -5171,7 +5171,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.2"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.8"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -5192,7 +5192,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.36.8"
-    "@patternfly/patternfly": "npm:6.5.2"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.8"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -5232,7 +5232,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.5.2"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.8"
     "@rhds/icons": "npm:^2.2.0"
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
@@ -5319,7 +5319,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.2"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.8"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
@@ -5361,7 +5361,7 @@ __metadata:
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.4"
-    "@patternfly/patternfly": "npm:6.5.2"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.8"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft

From a04850400694feff4d07cebc6fc5860e4027b3b6 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 12 Jun 2026 10:56:22 -0400
Subject: [PATCH 2/4] update example syntax

---
 .../Avatar/examples/AvatarColorful.tsx        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx b/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
index d9213af7971..010e733cd33 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarColorful.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Avatar } from '@patternfly/react-core';
 
-const _avatarIcon = (
+const avatarSvg = (
   <svg aria-hidden="true" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
     <path fill="currentColor" 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
@@ -13,30 +13,30 @@ const _avatarIcon = (
 
 <Fragment>
   <Avatar color="red" alt="red svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="orangered" alt="orangered svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="orange" alt="orange svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="yellow" alt="yellow svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="green" alt="green svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="teal" alt="teal svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="blue" alt="blue svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="purple" alt="purple svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
   <Avatar color="gray" alt="gray svg avatar">
-    {_avatarIcon}
+    {avatarSvg}
   </Avatar>
 </Fragment>;

From c01931d9e58b8fc81ed19c823043b476fd82b666 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 12 Jun 2026 11:22:47 -0400
Subject: [PATCH 3/4] update snaps from core bump

---
 .../ChartContainer.test.tsx.snap              |  4 +--
 .../__snapshots__/ChartDonut.test.tsx.snap    | 26 +++++++++----------
 .../ChartDonutThreshold.test.tsx.snap         | 12 ++++-----
 .../ChartDonutUtilization.test.tsx.snap       | 12 ++++-----
 .../__snapshots__/ChartLegend.test.tsx.snap   | 12 ++++-----
 .../ChartLegendTooltip.test.tsx.snap          |  8 +++---
 .../__snapshots__/ChartPoint.test.tsx.snap    | 12 ++++-----
 7 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/packages/react-charts/src/victory/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/victory/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
index bb1f6999d9d..76924f7620a 100644
--- a/packages/react-charts/src/victory/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`renders container via ChartLegend 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
         />
         <path
           d="M 48.728, 22.872
@@ -86,7 +86,7 @@ exports[`renders container via ChartLegend 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
         />
         <text
           direction="inherit"
diff --git a/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
index 43d101b3f69..df3b1b65154 100644
--- a/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
@@ -18,35 +18,35 @@ exports[`ChartDonut 1`] = `
           d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M81.70758480762967,48.46514814693137A95,95,0,0,1,-81.70758480762966,48.465148146931405L-73.91275961315432,43.96480372261502A86,86,0,0,0,73.91275961315435,43.96480372261497Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M-82.82584189723369,46.528270051813095A95,95,0,0,1,-93.74443803302738,-15.394165708861626L-84.88048987244326,-13.831212492549462A86,86,0,0,0,-75.0310167027584,42.02792562749668Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M-93.35607142148164,-17.596702212267488A95,95,0,0,1,-1.118257089604104,-94.99341819874444L-1.1182570896040813,-85.99272935011163A86,86,0,0,0,-84.49212326089753,-16.033748995955364Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -83,35 +83,35 @@ exports[`ChartDonut 2`] = `
           d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M81.70758480762967,48.46514814693137A95,95,0,0,1,-81.70758480762966,48.465148146931405L-73.91275961315432,43.96480372261502A86,86,0,0,0,73.91275961315435,43.96480372261497Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M-82.82584189723369,46.528270051813095A95,95,0,0,1,-93.74443803302738,-15.394165708861626L-84.88048987244326,-13.831212492549462A86,86,0,0,0,-75.0310167027584,42.02792562749668Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M-93.35607142148164,-17.596702212267488A95,95,0,0,1,-1.118257089604104,-94.99341819874444L-1.1182570896040813,-85.99272935011163A86,86,0,0,0,-84.49212326089753,-16.033748995955364Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -148,21 +148,21 @@ exports[`renders component data 1`] = `
           d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M64.16830759493514,47.77476635632862A80,80,0,1,1,-47.774766356328655,-64.16830759493511L-42.48429331491433,-56.886596149992364A71,71,0,1,0,56.88659614999237,42.48429331491432Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M-46.26447237139682,-65.26560040477878A80,80,0,0,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,0,0,-40.97399932998255,-57.98388895983599Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
       </g>
diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
index ed2911f81a7..3aba38aaa53 100644
--- a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`ChartDonutThreshold 1`] = `
           d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -55,7 +55,7 @@ exports[`ChartDonutThreshold 2`] = `
           d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -92,28 +92,28 @@ exports[`renders component data 1`] = `
           d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,46.26447237139683,-65.26560040477877L40.97399932998254,-57.983888959835994A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M47.77476635632862,-64.16830759493513A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,42.484293314914325,-56.886596149992364Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--second--Color, #c7c7c7); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--second--Color, #c7c7c7); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M64.16830759493514,47.77476635632862A80,80,0,0,1,-23.831948248612967,76.36778275343231L-21.050581972913932,67.80761755585895A71,71,0,0,0,56.88659614999237,42.48429331491432Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--third--Color, #a3a3a3); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--third--Color, #a3a3a3); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M-25.607405310550824,75.7909017841929A80,80,0,0,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,0,0,-22.826039034851792,67.23073658661953Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
       </g>
diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
index 6836ecc4ea9..2752138d859 100644
--- a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
@@ -18,14 +18,14 @@ exports[`ChartDonutUtilization 1`] = `
           d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M5.8170722959499274e-15,-95A95,95,0,1,1,-5.8170722959499274e-15,95A95,95,0,1,1,5.8170722959499274e-15,-95M6.058540038520991e-14,-86A86,86,0,1,0,-6.058540038520991e-14,86A86,86,0,1,0,6.058540038520991e-14,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -62,14 +62,14 @@ exports[`ChartDonutUtilization 2`] = `
           d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
         <path
           d="M5.8170722959499274e-15,-95A95,95,0,1,1,-5.8170722959499274e-15,95A95,95,0,1,1,5.8170722959499274e-15,-95M6.058540038520991e-14,-86A86,86,0,1,0,-6.058540038520991e-14,86A86,86,0,1,0,6.058540038520991e-14,-86Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(115, 115)"
         />
       </g>
@@ -106,14 +106,14 @@ exports[`renders component data 1`] = `
           d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
         <path
           d="M64.16830759493514,47.77476635632862A80,80,0,1,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,1,0,56.88659614999237,42.48429331491432Z"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
+          style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
           transform="translate(100, 100)"
         />
       </g>
diff --git a/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
index bd9a91ce07a..317e45b3fda 100644
--- a/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`ChartLegend 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 48.728, 18.872
@@ -41,7 +41,7 @@ exports[`ChartLegend 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"
@@ -123,7 +123,7 @@ exports[`ChartLegend 2`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 48.728, 18.872
@@ -133,7 +133,7 @@ exports[`ChartLegend 2`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"
@@ -215,7 +215,7 @@ exports[`renders component data 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 48.728, 22.872
@@ -225,7 +225,7 @@ exports[`renders component data 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"
diff --git a/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
index 3c0560cd3a5..19d42ee3bf2 100644
--- a/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
@@ -415,7 +415,7 @@ exports[`allows tooltip via container component 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--100, #63993d);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--100, #63993d);"
         />
         <path
           d="M 193.44, 248.156
@@ -435,7 +435,7 @@ exports[`allows tooltip via container component 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--200, #afdc8f);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--200, #afdc8f);"
         />
         <path
           d="M 234.32799999999997, 250.872
@@ -445,7 +445,7 @@ exports[`allows tooltip via container component 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--300, #204d00);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--300, #204d00);"
         />
         <path
           d="M 273.928, 250.872
@@ -455,7 +455,7 @@ exports[`allows tooltip via container component 1`] = `
       z"
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--400, #87bb62);"
+          style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--green--ColorScale--400, #87bb62);"
         />
         <text
           direction="inherit"
diff --git a/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
index 3ea24a0e4ed..2b5bd7bb4b2 100644
--- a/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
+++ b/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`ChartPoint 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 48.728, 18.872
@@ -41,7 +41,7 @@ exports[`ChartPoint 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"
@@ -123,7 +123,7 @@ exports[`ChartPoint 2`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 48.728, 18.872
@@ -133,7 +133,7 @@ exports[`ChartPoint 2`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"
@@ -215,7 +215,7 @@ exports[`renders component data 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
       />
       <path
         d="M 47.44, 20.156
@@ -235,7 +235,7 @@ exports[`renders component data 1`] = `
       z"
         role="presentation"
         shape-rendering="auto"
-        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
+        style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
       />
       <text
         direction="inherit"

From 25e2682338e83dd2be67cca7655ab003ee221f60 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 12 Jun 2026 14:42:40 -0400
Subject: [PATCH 4/4] update initial alts, add isInline to icons, update css,
 update prop desc

---
 .../src/components/Avatar/Avatar.tsx           |  2 +-
 .../components/Avatar/examples/AvatarIcons.tsx | 18 +++++++++---------
 .../Avatar/examples/AvatarInitials.tsx         | 18 +++++++++---------
 .../src/components/Avatar/examples/avatar.css  |  1 +
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/react-core/src/components/Avatar/Avatar.tsx b/packages/react-core/src/components/Avatar/Avatar.tsx
index a13105e9ae5..33ccdd26e9a 100644
--- a/packages/react-core/src/components/Avatar/Avatar.tsx
+++ b/packages/react-core/src/components/Avatar/Avatar.tsx
@@ -11,7 +11,7 @@ export interface AvatarProps extends React.DetailedHTMLProps<
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the avatar. Will set aria-label for children or initials avatars. */
+  /** Attribute that specifies the alternate text of the image for the avatar. Will set aria-label avatars using children or initials. */
   alt: string;
   /** Flag to indicate the avatar should have a border. */
   isBordered?: boolean;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx b/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
index 4e8ec98d599..56bae6aa227 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx
@@ -4,47 +4,47 @@ import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-c
 
 <Fragment>
   <Avatar color="red" alt="red icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="orangered" alt="orangered icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="orange" alt="orange icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="yellow" alt="yellow icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="green" alt="green icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="teal" alt="teal icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="blue" alt="blue icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="purple" alt="purple icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="gray" alt="gray icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx b/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
index 4ffd51b7291..de4beb3818b 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx
@@ -2,13 +2,13 @@ import { Fragment } from 'react';
 import { Avatar } from '@patternfly/react-core';
 
 <Fragment>
-  <Avatar color="red" alt="red initials avatar" initials="AB" />
-  <Avatar color="orangered" alt="orangered initials avatar" initials="AB" />
-  <Avatar color="orange" alt="orange initials avatar" initials="AB" />
-  <Avatar color="yellow" alt="yellow initials avatar" initials="AB" />
-  <Avatar color="green" alt="green initials avatar" initials="AB" />
-  <Avatar color="teal" alt="teal initials avatar" initials="AB" />
-  <Avatar color="blue" alt="blue initials avatar" initials="AB" />
-  <Avatar color="purple" alt="purple initials avatar" initials="AB" />
-  <Avatar color="gray" alt="gray initials avatar" initials="AB" />
+  <Avatar color="red" alt="red AB avatar" initials="AB" />
+  <Avatar color="orangered" alt="orangered AB avatar" initials="AB" />
+  <Avatar color="orange" alt="orange AB avatar" initials="AB" />
+  <Avatar color="yellow" alt="yellow AB avatar" initials="AB" />
+  <Avatar color="green" alt="green AB avatar" initials="AB" />
+  <Avatar color="teal" alt="teal AB avatar" initials="AB" />
+  <Avatar color="blue" alt="blue AB avatar" initials="AB" />
+  <Avatar color="purple" alt="purple AB avatar" initials="AB" />
+  <Avatar color="gray" alt="gray AB avatar" initials="AB" />
 </Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/avatar.css b/packages/react-core/src/components/Avatar/examples/avatar.css
index 97c8fe16ee0..6bde99cf5e9 100644
--- a/packages/react-core/src/components/Avatar/examples/avatar.css
+++ b/packages/react-core/src/components/Avatar/examples/avatar.css
@@ -2,5 +2,6 @@
 #ws-react-c-avatar-with-initials,
 #ws-react-c-avatar-with-icons {
   display: flex;
+  flex-wrap: wrap;
   gap: 3px;
 }