diff --git a/packages/react-core/src/components/Brand/examples/Brand.css b/packages/react-core/src/components/Brand/examples/Brand.css
index 811bb7ee236..c959213eedb 100644
--- a/packages/react-core/src/components/Brand/examples/Brand.css
+++ b/packages/react-core/src/components/Brand/examples/Brand.css
@@ -9,4 +9,10 @@
:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
display: inline-flex;
-}
\ No newline at end of file
+}
+
+.pf-v6-theme-dark {
+ img.my-svg {
+ filter: invert(1) hue-rotate(180deg);
+ }
+}
diff --git a/packages/react-core/src/components/Brand/examples/Brand.md b/packages/react-core/src/components/Brand/examples/Brand.md
index fcaa6876480..3cce99909b8 100644
--- a/packages/react-core/src/components/Brand/examples/Brand.md
+++ b/packages/react-core/src/components/Brand/examples/Brand.md
@@ -5,7 +5,9 @@ cssPrefix: null
propComponents: ['Brand']
---
+## Examples
import './Brand.css';
+import pfLogoOptimized from '../../assets/pfLogoOptimized.svg';
import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
@@ -17,6 +19,11 @@ The brand component does not have any built-in theme support. If a brand should
These examples adjust styling when the PatternFly website is toggled between the light and dark theme.
+### Optimized svg
+
+```ts file="./BrandOptimizedSvg.tsx"
+```
+
### Basic
```ts file="./BrandBasic.tsx"
diff --git a/packages/react-core/src/components/Brand/examples/BrandOptimizedSvg.tsx b/packages/react-core/src/components/Brand/examples/BrandOptimizedSvg.tsx
new file mode 100644
index 00000000000..88e50ab726b
--- /dev/null
+++ b/packages/react-core/src/components/Brand/examples/BrandOptimizedSvg.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Brand } from '@patternfly/react-core';
+import pfLogoOptimized from '../../assets/pfLogoOptimized.svg';
+
+export const svgStyle = `.patternfly-text { color: var(--pf-t--global--text--color--regular); }`;
+
+export const OptimizedSvg: React.FunctionComponent = () => (
+ <>
+
+
+ >
+);
diff --git a/packages/react-core/src/components/assets/pfLogoOptimized.svg b/packages/react-core/src/components/assets/pfLogoOptimized.svg
new file mode 100644
index 00000000000..4d063d9143a
--- /dev/null
+++ b/packages/react-core/src/components/assets/pfLogoOptimized.svg
@@ -0,0 +1,84 @@
+
+
\ No newline at end of file