diff --git a/docs/components/details.md b/docs/components/details.md
index 4181659d..0f60eda4 100644
--- a/docs/components/details.md
+++ b/docs/components/details.md
@@ -48,25 +48,47 @@ const App = () => (
 
 ### Customizing the Summary Icon
 
-Use the `summary-icon` slot to change the summary icon. You can use `<sl-icon>` or your own SVG. By default, the icon will rotate 90º when the details opens and closes. If desired, you can style the `summary-icon` part to change the animation.
+Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below.
 
 ```html preview
-<sl-details summary="Toggle Me">
-  <sl-icon slot="summary-icon" name="arrow-right"></sl-icon>
+<sl-details summary="Toggle Me" class="custom-icon">
+  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </sl-details>
+
+<style>
+  sl-details.custom-icon::part(summary-icon) {
+    /* Disable the expand/collapse animation */
+    rotate: none;
+  }
+</style>
 ```
 
 ```jsx react
 import { SlDetails, SlIcon } from '@shoelace-style/shoelace/dist/react';
 
+const css = `
+  sl-details.custom-icon::part(summary-icon) {
+    /* Disable the expand/collapse animation */
+    rotate: none;
+  }
+`;
+
 const App = () => (
-  <SlDetails summary="Toggle Me">
-    <SlIcon slot="summary-icon" name="arrow-right" />
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </SlDetails>
+  <>
+    <SlDetails summary="Toggle Me" class="custom-icon">
+      <SlIcon name="plus-square" slot="expand-icon" />
+      <SlIcon name="dash-square" slot="collapse-icon" />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </SlDetails>
+
+    <style>{css}</style>
+  </>
 );
 ```
 
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 65951f5b..1bac8563 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,7 +11,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added `header-actions` slot to `<sl-dialog>` and `<sl-drawer>`
-- Added the `summary-icon` slot to `<sl-details>` [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
+- Added the `expand-icon` and `collapse-icon` slots to `<sl-details>` and refactored the icon animation [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
 - Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
 - Fixed a bug in `<sl-button-group>` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
 - Fixed an incorrect default for `flip-fallback-strategy` in `<sl-popup>` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index 8d0ca9a6..fe3da1dd 100644
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -63,6 +63,15 @@ export default css`
     rotate: 90deg;
   }
 
+  .details--open.details--rtl .details__summary-icon {
+    rotate: -90deg;
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
   .details__body {
     overflow: hidden;
   }
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 8d2d3f4b..370b3e01 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -21,7 +21,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The details' content.
  * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
- * @slot summary-icon - The icon to show next to the summary.
+ * @slot expand-icon - The expand icon's `<slot>`.
+ * @slot collapse-icon - The collapse icon's `<slot>`.
  *
  * @event sl-show - Emitted when the details opens.
  * @event sl-after-show - Emitted after the details opens and all animations are complete.
@@ -31,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  * @csspart header - The summary header.
  * @csspart summary - The details summary.
- * @csspart summary-icon - The summary icon's `<slot>` container.
+ * @csspart summary-icon - The container that houses the expand and collapse icons.
  * @csspart content - The details content.
  *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
@@ -44,6 +45,7 @@ export default class SlDetails extends ShoelaceElement {
   @query('.details') details: HTMLElement;
   @query('.details__header') header: HTMLElement;
   @query('.details__body') body: HTMLElement;
+  @query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
 
   private readonly localize = new LocalizeController(this);
 
@@ -153,13 +155,16 @@ export default class SlDetails extends ShoelaceElement {
   }
 
   render() {
+    const isRtl = this.localize.dir() === 'rtl';
+
     return html`
       <div
         part="base"
         class=${classMap({
           details: true,
           'details--open': this.open,
-          'details--disabled': this.disabled
+          'details--disabled': this.disabled,
+          'details--rtl': isRtl
         })}
       >
         <header
@@ -176,9 +181,14 @@ export default class SlDetails extends ShoelaceElement {
         >
           <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
 
-          <slot name="summary-icon" part="summary-icon" class="details__summary-icon">
-            <sl-icon name="chevron-right" library="system"></sl-icon>
-          </slot>
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
+            </slot>
+          </span>
         </header>
 
         <div class="details__body">