diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 093653c9bb1..187f3dee149 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -61,8 +61,6 @@ export default {
   },
 };
 
-const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;
-
 const contentHTML = html`
   <p>
     Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
@@ -93,7 +91,7 @@ const footerHTML = html`
   <calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</calcite-button>
 `;
 
-const panelContent = `${headerHTML}
+const panelContent = `
   <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
   <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
   ${contentHTML}
@@ -153,7 +151,15 @@ export const withDescriptionAndIcon = (): string => html`
 `;
 
 export const darkModeRTL_TestOnly = (): string => html`
-  <calcite-panel collapse-direction="down" height-scale="m" dir="rtl" class="calcite-mode-dark">
+  <calcite-panel
+    collapse-direction="down"
+    height-scale="m"
+    dir="rtl"
+    class="calcite-mode-dark"
+    heading="Heading"
+    icon="arrow-bold-left"
+    icon-flip-rtl
+  >
     ${panelContent}
   </calcite-panel>
 `;
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index a9f9825d770..8f1d8ae1185 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -420,7 +420,12 @@ export class Panel extends LitElement implements InteractiveComponent {
     const { heading, headingLevel, description, hasHeaderContent, icon, scale } = this;
 
     const iconNode = icon ? (
-      <calcite-icon class={CSS.icon} icon={icon} scale={getIconScale(scale)} />
+      <calcite-icon
+        class={CSS.icon}
+        flipRtl={this.iconFlipRtl}
+        icon={icon}
+        scale={getIconScale(scale)}
+      />
     ) : null;
 
     const headingNode = heading ? (