diff --git a/packages/accordions/src/elements/accordion/components/Header.tsx b/packages/accordions/src/elements/accordion/components/Header.tsx
index df3da202dd6..4aba2b5e940 100644
--- a/packages/accordions/src/elements/accordion/components/Header.tsx
+++ b/packages/accordions/src/elements/accordion/components/Header.tsx
@@ -64,10 +64,10 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       >
         {children}
         <StyledRotateIcon
-          isCompact={isCompact}
-          isHovered={isHovered}
-          isRotated={isExpanded}
-          isCollapsible={isCollapsible}
+          $isCompact={isCompact}
+          $isHovered={isHovered}
+          $isRotated={isExpanded}
+          $isCollapsible={isCollapsible}
           onMouseOver={composeEventHandlers(onMouseOver, () => setIsHovered(true))}
           onMouseOut={composeEventHandlers(onMouseOut, () => setIsHovered(false))}
         >
diff --git a/packages/accordions/src/elements/timeline/components/Content.tsx b/packages/accordions/src/elements/timeline/components/Content.tsx
index 9197a7a0460..66b149950dc 100644
--- a/packages/accordions/src/elements/timeline/components/Content.tsx
+++ b/packages/accordions/src/elements/timeline/components/Content.tsx
@@ -17,7 +17,7 @@ const ContentComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElemen
     return (
       <>
         <StyledSeparator>
-          <StyledItemIcon surfaceColor={surfaceColor}>{icon || <CircleIcon />}</StyledItemIcon>
+          <StyledItemIcon $surfaceColor={surfaceColor}>{icon || <CircleIcon />}</StyledItemIcon>
         </StyledSeparator>
         <StyledTimelineContent ref={ref} {...props} />
       </>
diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
index 4826a28b180..857350f49b8 100644
--- a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
+++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
@@ -26,9 +26,9 @@ describe('StyledRotateIcon', () => {
     );
   });
 
-  it('renders isRotated styling correctly', () => {
+  it('renders $isRotated styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isRotated>
+      <StyledRotateIcon $isRotated>
         <svg />
       </StyledRotateIcon>
     );
@@ -36,9 +36,9 @@ describe('StyledRotateIcon', () => {
     expect(container.firstChild).toHaveStyleRule('transform', 'rotate(+180deg)');
   });
 
-  it('renders isCompact styling correctly', () => {
+  it('renders $isCompact styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isCompact>
+      <StyledRotateIcon $isCompact>
         <svg />
       </StyledRotateIcon>
     );
@@ -46,9 +46,9 @@ describe('StyledRotateIcon', () => {
     expect(container.firstChild).toHaveStyleRule('padding', '6px 12px');
   });
 
-  it('renders isRotated styling correctly for RTL', () => {
+  it('renders $isRotated styling correctly for RTL', () => {
     const { container } = renderRtl(
-      <StyledRotateIcon isRotated>
+      <StyledRotateIcon $isRotated>
         <svg />
       </StyledRotateIcon>
     );
@@ -56,9 +56,9 @@ describe('StyledRotateIcon', () => {
     expect(container.firstChild).toHaveStyleRule('transform', 'rotate(-180deg)');
   });
 
-  it('renders isHovered styling correctly', () => {
+  it('renders $isHovered styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isHovered>
+      <StyledRotateIcon $isHovered>
         <svg />
       </StyledRotateIcon>
     );
diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
index 1772567ea37..a93704ab360 100644
--- a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
+++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
@@ -5,21 +5,28 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { cloneElement, Children } from 'react';
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import {
+  getColorV8,
+  retrieveComponentStyles,
+  DEFAULT_THEME,
+  StyledBaseIcon
+} from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 
 interface IStyledRotateIcon {
-  isCompact?: boolean;
+  $isCompact?: boolean;
+  $isRotated?: boolean;
+  $isHovered?: boolean;
+  $isCollapsible?: boolean;
 }
 
 const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
-  const showColor = props.isCollapsible || !props.isRotated;
+  const showColor = props.$isCollapsible || !props.$isRotated;
   let color = getColorV8('neutralHue', 600, props.theme);
 
-  if (showColor && props.isHovered) {
+  if (showColor && props.$isHovered) {
     color = getColorV8('primaryHue', 600, props.theme);
   }
 
@@ -32,21 +39,17 @@ const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
   `;
 };
 
-export const StyledRotateIcon = styled(
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  ({ children, isRotated, isHovered, isCompact, isCollapsible, ...props }) =>
-    cloneElement(Children.only(children), props)
-).attrs({
+export const StyledRotateIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledRotateIcon>`
-  transform: ${props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
+  transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
   transition:
     transform 0.25s ease-in-out,
     color 0.1s ease-in-out;
   box-sizing: content-box;
   padding: ${props =>
-    props.isCompact
+    props.$isCompact
       ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px`
       : `${props.theme.space.base * 5}px`};
   width: ${props => props.theme.iconSizes.md};
diff --git a/packages/accordions/src/styled/timeline/StyledItemIcon.ts b/packages/accordions/src/styled/timeline/StyledItemIcon.ts
index cfd42234a24..fc5da8329e9 100644
--- a/packages/accordions/src/styled/timeline/StyledItemIcon.ts
+++ b/packages/accordions/src/styled/timeline/StyledItemIcon.ts
@@ -5,31 +5,32 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { cloneElement, Children } from 'react';
 import styled from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import {
+  getColorV8,
+  retrieveComponentStyles,
+  DEFAULT_THEME,
+  StyledBaseIcon
+} from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
 
 interface IStyledItemIcon {
-  surfaceColor?: string;
+  $surfaceColor?: string;
 }
 
 /**
  * 1. Odd sizing allows the timeline line to center respective of the circle icon.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const StyledItemIcon = styled(({ surfaceColor, children, ...props }) =>
-  cloneElement(Children.only(children), props)
-).attrs({
+export const StyledItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledItemIcon>`
   z-index: 1;
   box-sizing: content-box;
   background-color: ${props =>
-    props.surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
+    props.$surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
   padding: ${props => props.theme.space.base}px 0;
   width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
   height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts
index 8ba8aee362d..02933a944e7 100644
--- a/packages/theming/src/index.ts
+++ b/packages/theming/src/index.ts
@@ -24,6 +24,7 @@ export { useWindow } from './utils/useWindow';
 export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
+export { StyledBaseIcon } from './utils/StyledBaseIcon';
 
 export {
   ARROW_POSITION,
diff --git a/packages/theming/src/utils/StyledBaseIcon.ts b/packages/theming/src/utils/StyledBaseIcon.ts
new file mode 100644
index 00000000000..8f32276a7e4
--- /dev/null
+++ b/packages/theming/src/utils/StyledBaseIcon.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import styled from 'styled-components';
+import React, { Children } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,garden-local/require-default-theme
+export const StyledBaseIcon = styled(({ children, theme, ...props }) =>
+  React.cloneElement(Children.only(children), props)
+)`
+  /* stylelint-disable no-empty-block */
+`;