diff --git a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
index 8f05f0a27bc..bf0231a515c 100644
--- a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
@@ -19,10 +19,13 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 const meta: Meta<typeof Accordion> = {
@@ -151,3 +154,34 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: args => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>Files content</AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField
+                label="Name"
+                styles={style({maxWidth: 176})}
+                placeholder="Enter your name"
+              />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
index 584201eef4c..c5177cdc95f 100644
--- a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {Text} from '../src/Content';
 
 const meta: Meta<typeof Disclosure> = {
   component: Disclosure,
@@ -77,3 +79,19 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: args => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>Files content</DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};
diff --git a/packages/@react-spectrum/s2/exports/Accordion.ts b/packages/@react-spectrum/s2/exports/Accordion.ts
index 73f9700bf40..40b202750d2 100644
--- a/packages/@react-spectrum/s2/exports/Accordion.ts
+++ b/packages/@react-spectrum/s2/exports/Accordion.ts
@@ -16,3 +16,5 @@ export type {
   AccordionItemRenderProps
 } from '../src/Accordion';
 export type {Key} from '@react-types/shared';
+
+export {Text} from '../src/Content';
diff --git a/packages/@react-spectrum/s2/exports/Disclosure.ts b/packages/@react-spectrum/s2/exports/Disclosure.ts
index c664f884e6a..e2633249431 100644
--- a/packages/@react-spectrum/s2/exports/Disclosure.ts
+++ b/packages/@react-spectrum/s2/exports/Disclosure.ts
@@ -6,3 +6,5 @@ export {
   DisclosureTitle
 } from '../src/Disclosure';
 export type {DisclosureProps, DisclosurePanelProps} from '../src/Disclosure';
+
+export {Text} from '../src/Content';
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 2a70116de82..27a54dd8ae9 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -23,12 +23,13 @@ import {
   baseColor,
   centerPadding,
   focusRing,
+  fontRelative,
   lightDark,
   space,
   style
 } from '../style' with {type: 'macro'};
 import {Button} from 'react-aria-components/Button';
-import {CenterBaseline} from './CenterBaseline';
+import {CenterBaseline, centerBaseline} from './CenterBaseline';
 
 import Chevron from '../ui-icons/Chevron';
 
@@ -43,7 +44,9 @@ import {
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Heading} from 'react-aria-components/Heading';
+import {IconContext} from './Icon';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -171,12 +174,16 @@ const buttonStyles = style({
     }
   },
   lineHeight: 'ui',
-  display: 'flex',
-  flexGrow: 1,
+  display: 'grid',
+  gridTemplateAreas: ['expand-button icon label'],
+  gridTemplateColumns: ['auto', 'auto', 'minmax(0, 1fr)'],
   alignItems: 'baseline',
-  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
+  '--spacingGap': {
+    type: 'marginEnd',
+    value: 'calc(self(minHeight) * 3/8 - 1px)'
+  },
+  paddingX: '--spacingGap',
   paddingY: centerPadding(),
-  gap: 'calc(self(minHeight) * 3/8 - 1px)',
   minHeight: {
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
@@ -238,8 +245,7 @@ const chevronStyles = style({
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
-  },
-  flexShrink: 0
+  }
 });
 
 const InternalDisclosureHeader = createContext<{} | null>(null);
@@ -306,10 +312,29 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(
       <Button
         className={renderProps => buttonStyles({...renderProps, size, density, isQuiet})}
         slot="trigger">
-        <CenterBaseline>
+        <CenterBaseline styles={style({gridArea: 'expand-button', marginEnd: '--spacingGap'})}>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
-        {props.children}
+        <Provider
+          values={[
+            [
+              IconContext,
+              {
+                render: centerBaseline({
+                  slot: 'icon',
+                  styles: style({
+                    gridArea: 'icon',
+                    marginEnd: 'text-to-visual',
+                    '--iconPrimary': {type: 'fill', value: 'currentColor'}
+                  })
+                }),
+                styles: style({size: fontRelative(16)})
+              }
+            ],
+            [TextContext, {styles: style({gridArea: 'label'})}]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+        </Provider>
       </Button>
     </Heading>
   );
diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
index 64bc6fb0d16..60c84e04573 100644
--- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
@@ -19,11 +19,14 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import {Key} from '@react-types/shared';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style' with {type: 'macro'};
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 const meta: Meta<typeof Accordion> = {
@@ -185,7 +188,10 @@ export const WithActionButton: Story = {
         <Accordion {...args}>
           <AccordionItem id="files">
             <AccordionItemHeader>
-              <AccordionItemTitle>Files</AccordionItemTitle>
+              <AccordionItemTitle>
+                <File />
+                Files
+              </AccordionItemTitle>
               <ActionButton aria-label="Add new file">
                 <NewIcon />
               </ActionButton>
@@ -212,3 +218,34 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: args => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>Files content</AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField
+                label="Name"
+                styles={style({maxWidth: 176})}
+                placeholder="Enter your name"
+              />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
index 5efb5403da9..a42a1039e7d 100644
--- a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style' with {type: 'macro'};
+import {Text} from '../src/Content';
 
 const meta: Meta<typeof Disclosure> = {
   component: Disclosure,
@@ -121,3 +123,19 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: args => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>Files content</DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};
diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index 803e70e6edd..160058c30ff 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -91,6 +91,41 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Accordion>
 ```
 
+### Slots
+
+`AccordionItemTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client";
+import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, Text} from '@react-spectrum/s2/Accordion';
+import Project from '@react-spectrum/s2/icons/Project';
+import Settings from '@react-spectrum/s2/icons/Settings';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Accordion>
+  <AccordionItem styles={style({width: 250})}>
+    <AccordionItemHeader>
+      {/*- begin highlight -*/}
+      <AccordionItemTitle>
+        <Project />
+        <Text>Project Settings</Text>
+      </AccordionItemTitle>
+      {/*- end highlight -*/}
+    </AccordionItemHeader>
+    <AccordionItemPanel>
+      Configure your project settings including name, description, and permissions.
+    </AccordionItemPanel>
+  </AccordionItem>
+  <AccordionItem id="preferences">
+    <AccordionItemTitle>
+      <Settings />
+      <Text>Preferences</Text>
+    </AccordionItemTitle>
+    <AccordionItemPanel>User preferences content</AccordionItemPanel>
+  </AccordionItem>
+</Accordion>
+```
+
 ## API
 
 ```tsx links={{Accordion: '#accordion', AccordionItem: '#accordionitem', AccordionItemHeader: '#accordionitemheader', AccordionItemTitle: '#accordionitemtitle', AccordionItemPanel: '#accordionitempanel'}}
diff --git a/packages/dev/s2-docs/pages/s2/Disclosure.mdx b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
index 1651edcc993..ae403e16d9a 100644
--- a/packages/dev/s2-docs/pages/s2/Disclosure.mdx
+++ b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
@@ -73,6 +73,32 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Disclosure>
 ```
 
+### Slots
+
+`DisclosureTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client"
+
+import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, Text} from '@react-spectrum/s2/Disclosure';
+import Project from '@react-spectrum/s2/icons/Project';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Disclosure styles={style({width: 250})}>
+  <DisclosureHeader>
+    {/*- begin highlight -*/}
+    <DisclosureTitle>
+      <Project />
+      <Text>Project Settings</Text>
+    </DisclosureTitle>
+    {/*- end highlight -*/}
+  </DisclosureHeader>
+  <DisclosurePanel>
+    Configure your project settings including name, description, and permissions.
+  </DisclosurePanel>
+</Disclosure>
+```
+
 ## API
 
 ```tsx links={{Disclosure: '#disclosure', DisclosureHeader: '#disclosureheader', DisclosureTitle: '#disclosuretitle', DisclosurePanel: '#disclosurepanel'}}