diff --git a/pages/key-value-pairs/permutations.page.tsx b/pages/key-value-pairs/permutations.page.tsx
index 122886af24..deb2bde505 100644
--- a/pages/key-value-pairs/permutations.page.tsx
+++ b/pages/key-value-pairs/permutations.page.tsx
@@ -3,8 +3,10 @@
 import React from 'react';
 
 import { CopyToClipboard, ProgressBar } from '~components';
+import Icon from '~components/icon';
 import KeyValuePairs, { KeyValuePairsProps } from '~components/key-value-pairs';
 import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
 import StatusIndicator from '~components/status-indicator';
 
 import createPermutations from '../utils/permutations';
@@ -356,6 +358,41 @@ const permutations = createPermutations<KeyValuePairsProps>([
       ],
     ],
   },
+  {
+    columns: [3],
+    items: [
+      [
+        {
+          label: (
+            <SpaceBetween size={'xxs'} direction={'horizontal'} alignItems={'center'}>
+              <Icon key={'icon'} name={'status-info'} />
+              <div key={'label'}>Label for key</div>
+            </SpaceBetween>
+          ),
+          value: 'Info icon at the start',
+        },
+        {
+          label: (
+            <SpaceBetween size={'xxs'} direction={'horizontal'} alignItems={'center'}>
+              <div key={'label'}>Label for key</div>
+              <Icon key={'icon'} name={'external'} />
+            </SpaceBetween>
+          ),
+          value: 'External icon at the end',
+        },
+        {
+          label: (
+            <SpaceBetween size={'xxs'} direction={'horizontal'} alignItems={'center'}>
+              <div key={'label'}>Label for key</div>
+              <Icon key={'icon'} name={'external'} />
+            </SpaceBetween>
+          ),
+          value: 'External icon at the end with info link',
+          info: <Link>Info</Link>,
+        },
+      ],
+    ],
+  },
 ]);
 
 export default function KeyValueScenario() {
diff --git a/src/key-value-pairs/__tests__/key-value-pairs.test.tsx b/src/key-value-pairs/__tests__/key-value-pairs.test.tsx
index 1964ab19d0..59017fde74 100644
--- a/src/key-value-pairs/__tests__/key-value-pairs.test.tsx
+++ b/src/key-value-pairs/__tests__/key-value-pairs.test.tsx
@@ -3,9 +3,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
+import Icon from '../../../lib/components/icon';
 import KeyValuePairs from '../../../lib/components/key-value-pairs';
 import Link from '../../../lib/components/link';
-import createWrapper from '../../../lib/components/test-utils/dom';
+import SpaceBetween from '../../../lib/components/space-between';
+import createWrapper, { IconWrapper } from '../../../lib/components/test-utils/dom';
 
 function renderKeyValuePairs(jsx: React.ReactElement) {
   const { container, ...rest } = render(jsx);
@@ -30,6 +32,43 @@ describe('KeyValuePairs', () => {
       expect(wrapper.findItems()[0]!.findValue()!.getElement()).toHaveTextContent('Value');
     });
 
+    test('renders correctly with ReactNode label', () => {
+      const { wrapper } = renderKeyValuePairs(
+        <KeyValuePairs
+          items={[
+            {
+              label: (
+                <SpaceBetween size={'xxs'} direction={'horizontal'} alignItems={'center'}>
+                  <Icon name={'status-info'} />
+                  Label after icon
+                </SpaceBetween>
+              ),
+              value: 'Value',
+            },
+            {
+              label: (
+                <SpaceBetween size={'xxs'} direction={'horizontal'} alignItems={'center'}>
+                  Label before icon
+                  <Icon name={'external'} />
+                </SpaceBetween>
+              ),
+              value: 'Value',
+            },
+          ]}
+        />
+      );
+
+      const firstLabel = wrapper.findItems()[0]!.findLabel();
+      expect(firstLabel!.getElement().firstElementChild!.children).toHaveLength(2);
+      expect(firstLabel!.findIcon()).toBeInstanceOf(IconWrapper);
+      expect(firstLabel!.getElement()).toHaveTextContent('Label after icon');
+
+      const secondLabel = wrapper.findItems()[1]!.findLabel();
+      expect(secondLabel!.getElement().firstElementChild!.children).toHaveLength(2);
+      expect(secondLabel!.findIcon()).toBeInstanceOf(IconWrapper);
+      expect(secondLabel!.getElement()).toHaveTextContent('Label before icon');
+    });
+
     test('renders label with info correctly', () => {
       const { wrapper } = renderKeyValuePairs(
         <KeyValuePairs
diff --git a/src/key-value-pairs/interfaces.ts b/src/key-value-pairs/interfaces.ts
index db6b21ddb3..c24f66276c 100644
--- a/src/key-value-pairs/interfaces.ts
+++ b/src/key-value-pairs/interfaces.ts
@@ -61,7 +61,7 @@ export namespace KeyValuePairsProps {
 
   export interface Pair extends BaseComponentProps {
     type?: 'pair';
-    label: string;
+    label: React.ReactNode;
     value: React.ReactNode;
     info?: React.ReactNode;
   }
diff --git a/src/key-value-pairs/styles.scss b/src/key-value-pairs/styles.scss
index 43337b2838..3912145c55 100644
--- a/src/key-value-pairs/styles.scss
+++ b/src/key-value-pairs/styles.scss
@@ -27,6 +27,7 @@
 
 .term {
   @include styles.font-label;
+  display: inline-flex;
   color: awsui.$color-text-label;
   margin-block-end: awsui.$space-key-value-gap;
 }