diff --git a/src/renderer/components/Sidebar.test.tsx b/src/renderer/components/Sidebar.test.tsx
index 8ba1d00f6..5d840f792 100644
--- a/src/renderer/components/Sidebar.test.tsx
+++ b/src/renderer/components/Sidebar.test.tsx
@@ -215,7 +215,9 @@ describe('renderer/components/Sidebar.tsx', () => {
         isFetching: true,
       });
 
-      expect(screen.getByTestId('sidebar-refresh')).toHaveClass('animate-spin');
+      const refreshButton = screen.getByTestId('sidebar-refresh');
+      expect(refreshButton).not.toHaveClass('animate-spin');
+      expect(refreshButton.querySelector('svg')).toHaveClass('animate-spin');
     });
 
     it('does not animate the refresh icon when settled and no fetch is in flight', () => {
@@ -225,7 +227,8 @@ describe('renderer/components/Sidebar.tsx', () => {
         isFetching: false,
       });
 
-      expect(screen.getByTestId('sidebar-refresh')).not.toHaveClass('animate-spin');
+      const refreshButton = screen.getByTestId('sidebar-refresh');
+      expect(refreshButton.querySelector('svg')).not.toHaveClass('animate-spin');
     });
   });
 
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index bcc0e1c68..a3d30c667 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import {
   BellIcon,
@@ -21,6 +21,10 @@ import { useAccountsStore, useFiltersStore, useSettingsStore } from '../stores';
 
 import { LogoIcon } from './icons/LogoIcon';
 
+const SpinningSyncIcon: FC<ComponentProps<typeof SyncIcon>> = (props) => (
+  <SyncIcon {...props} className="animate-spin" />
+);
+
 export const Sidebar: FC = () => {
   const { status, notificationCount, hasUnreadNotifications, isFetching } = useNotifications();
 
@@ -124,11 +128,10 @@ export const Sidebar: FC = () => {
           <>
             <IconButton
               aria-label="Refresh"
-              className={status === 'loading' || isFetching ? 'animate-spin' : ''}
               data-testid="sidebar-refresh"
               description="Refresh notifications"
               disabled={isLoading}
-              icon={SyncIcon}
+              icon={status === 'loading' || isFetching ? SpinningSyncIcon : SyncIcon}
               keybindingHint={shortcuts.refresh.key}
               // loading={status === 'loading'}
               onClick={() => shortcuts.refresh.action()}