diff --git a/packages/app-desktop/gui/Button/Button.tsx b/packages/app-desktop/gui/Button/Button.tsx
index 26d844da1f..6c366742f8 100644
--- a/packages/app-desktop/gui/Button/Button.tsx
+++ b/packages/app-desktop/gui/Button/Button.tsx
@@ -225,7 +225,7 @@ const Button = React.forwardRef(({
 			animation={iconAnimation}
 			mr={iconOnly ? '0' : '6px'}
 			color={color}
-			className={iconName}
+			className={`${iconName} icon`}
 			role='img'
 		/>;
 	}
diff --git a/packages/app-desktop/gui/Sidebar/Sidebar.tsx b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
index 41427814c5..5910185e69 100644
--- a/packages/app-desktop/gui/Sidebar/Sidebar.tsx
+++ b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
@@ -25,14 +25,13 @@ interface Props {
 const SidebarComponent = (props: Props) => {
 	const renderSynchronizeButton = (type: string) => {
 		const label = type === 'sync' ? _('Synchronise') : _('Cancel');
-		const iconAnimation = type !== 'sync' ? 'icon-infinite-rotation 1s linear infinite' : '';
 
 		return (
 			<StyledSynchronizeButton
 				level={ButtonLevel.SidebarSecondary}
+				className={`sidebar-sync-button ${type === 'sync' ? '' : '-syncing'}`}
 				iconName="icon-sync"
 				key="sync_button"
-				iconAnimation={iconAnimation}
 				title={label}
 				onClick={() => {
 					void CommandService.instance().execute('synchronize', type !== 'sync');
diff --git a/packages/app-desktop/gui/Sidebar/style.scss b/packages/app-desktop/gui/Sidebar/style.scss
index 206281f564..18ad427619 100644
--- a/packages/app-desktop/gui/Sidebar/style.scss
+++ b/packages/app-desktop/gui/Sidebar/style.scss
@@ -5,4 +5,5 @@
 @use 'styles/sidebar-expand-link.scss';
 @use 'styles/sidebar-header-container.scss';
 @use 'styles/sidebar-spacer-item.scss';
-@use 'styles/sidebar-header-button.scss';
\ No newline at end of file
+@use 'styles/sidebar-header-button.scss';
+@use 'styles/sidebar-sync-button.scss';
\ No newline at end of file
diff --git a/packages/app-desktop/gui/Sidebar/styles/sidebar-sync-button.scss b/packages/app-desktop/gui/Sidebar/styles/sidebar-sync-button.scss
new file mode 100644
index 0000000000..9ec4a64cc3
--- /dev/null
+++ b/packages/app-desktop/gui/Sidebar/styles/sidebar-sync-button.scss
@@ -0,0 +1,16 @@
+
+@keyframes icon-infinite-rotation {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.sidebar-sync-button {
+	&.-syncing > .icon {
+		animation: icon-infinite-rotation 1s linear infinite;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+	}
+}
diff --git a/packages/app-desktop/main.scss b/packages/app-desktop/main.scss
index a1834aaec6..854366dbee 100644
--- a/packages/app-desktop/main.scss
+++ b/packages/app-desktop/main.scss
@@ -97,12 +97,6 @@ a {
 	border-radius: 5px;
 }
 
-@keyframes icon-infinite-rotation{
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 .rdtPicker {
 	min-width: 250px;
 	width: auto !important;