diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index 0bd87b741901ba..97b377556b2392 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -224,7 +224,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 			<Root className="components-range-control__root">
 				{ beforeIcon && (
 					<BeforeIconWrapper>
-						<Icon icon={ beforeIcon } role="img" />
+						<Icon icon={ beforeIcon } />
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
@@ -288,7 +288,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 				</Wrapper>
 				{ afterIcon && (
 					<AfterIconWrapper>
-						<Icon icon={ afterIcon } role="img" />
+						<Icon icon={ afterIcon } />
 					</AfterIconWrapper>
 				) }
 				{ hasInputField && (
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index c02eb07c17e69d..1d241ddbe0f333 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -41,18 +41,22 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should render with icons', () => {
-			render(
+			const { container } = render(
 				<RangeControl
 					beforeIcon="format-image"
 					afterIcon="format-video"
 				/>
 			);
 
-			const icons = screen.getAllByRole( 'img' );
+			const beforeIcon = container.querySelector(
+				'.dashicons-format-image'
+			);
+			const afterIcon = container.querySelector(
+				'.dashicons-format-video'
+			);
 
-			expect( icons.length ).toBe( 2 );
-			expect( icons[ 0 ] ).toHaveClass( 'dashicons-format-image' );
-			expect( icons[ 1 ] ).toHaveClass( 'dashicons-format-video' );
+			expect( beforeIcon ).toBeInTheDocument();
+			expect( afterIcon ).toBeInTheDocument();
 		} );
 	} );