diff --git a/packages/frontend/component/src/index.ts b/packages/frontend/component/src/index.ts
index bd9d76dc72..aed6a07316 100644
--- a/packages/frontend/component/src/index.ts
+++ b/packages/frontend/component/src/index.ts
@@ -7,6 +7,7 @@ export * from './ui/divider';
 export * from './ui/empty';
 export * from './ui/input';
 export * from './ui/layout';
+export * from './ui/loading';
 export * from './ui/lottie/collections-icon';
 export * from './ui/lottie/delete-icon';
 export * from './ui/menu';
diff --git a/packages/frontend/component/src/ui/loading/loading.stories.tsx b/packages/frontend/component/src/ui/loading/loading.stories.tsx
index 59a08780a8..ec1d8ca25a 100644
--- a/packages/frontend/component/src/ui/loading/loading.stories.tsx
+++ b/packages/frontend/component/src/ui/loading/loading.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Loading, type LoadingProps } from '.';
+import { Loading, type LoadingProps } from './loading';
 
 export default {
   title: 'UI/Loading',
diff --git a/packages/frontend/component/src/ui/loading/loading.tsx b/packages/frontend/component/src/ui/loading/loading.tsx
index 78f7f39513..49e72705c2 100644
--- a/packages/frontend/component/src/ui/loading/loading.tsx
+++ b/packages/frontend/component/src/ui/loading/loading.tsx
@@ -11,20 +11,25 @@ export const Loading = ({ size, speed = 1.2 }: LoadingProps) => {
   return (
     <svg
       className={loading}
-      viewBox="0 0 1024 1024"
-      focusable="false"
-      data-icon="loading"
-      width={size ? `${size}px` : '.8em'}
-      height={size ? `${size}px` : '.8em'}
-      fill="currentColor"
-      aria-hidden="true"
+      width={size ? `${size}px` : '16px'}
+      height={size ? `${size}px` : '16px'}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
       style={{
         ...assignInlineVars({
           [speedVar]: `${speed}s`,
         }),
       }}
     >
-      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM4.95017 12C4.95017 15.8935 8.10648 19.0498 12 19.0498C15.8935 19.0498 19.0498 15.8935 19.0498 12C19.0498 8.10648 15.8935 4.95017 12 4.95017C8.10648 4.95017 4.95017 8.10648 4.95017 12Z"
+        fill="var(--affine-black-10)"
+      />
+      <path
+        d="M20.525 12C21.3396 12 22.0111 11.3361 21.8914 10.5303C21.7714 9.72269 21.5527 8.93094 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C15.0691 2.44732 14.2773 2.22859 13.4697 2.10859C12.6639 1.98886 12 2.66038 12 3.475C12 4.28962 12.6674 4.93455 13.4643 5.10374C13.8853 5.19314 14.2983 5.32113 14.6979 5.48665C15.5533 5.84095 16.3304 6.36024 16.9851 7.0149C17.6398 7.66955 18.1591 8.44674 18.5133 9.30208C18.6789 9.70167 18.8069 10.1147 18.8963 10.5357C19.0655 11.3326 19.7104 12 20.525 12Z"
+        fill="var(--affine-primary-color)"
+      />
     </svg>
   );
 };
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
index 4aaef0b709..b28d545861 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/update-check-section.tsx
@@ -1,3 +1,4 @@
+import { Loading } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Button } from '@affine/component/ui/button';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -13,7 +14,6 @@ import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Loading } from '../../../../pure/workspace-slider-bar/workspace-card/loading-icon';
 import * as styles from './style.css';
 
 enum CheckUpdateStatus {
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.css.ts
deleted file mode 100644
index 465f98986e..0000000000
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.css.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createVar, keyframes, style } from '@vanilla-extract/css';
-
-export const speedVar = createVar('speedVar');
-
-const rotate = keyframes({
-  '0%': { transform: 'rotate(0deg)' },
-  '50%': { transform: 'rotate(180deg)' },
-  '100%': { transform: 'rotate(360deg)' },
-});
-export const loading = style({
-  vars: {
-    [speedVar]: '1.5s',
-  },
-  textRendering: 'optimizeLegibility',
-  WebkitFontSmoothing: 'antialiased',
-  animation: `${rotate} ${speedVar} infinite linear`,
-});
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
index ce005f65b9..ed06618827 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
@@ -1,4 +1,5 @@
 import { Avatar } from '@affine/component/ui/avatar';
+import { Loading } from '@affine/component/ui/loading';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useCurrentSyncEngine } from '@affine/core/hooks/current/use-current-sync-engine';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -27,7 +28,6 @@ import {
 
 import { useSystemOnline } from '../../../../hooks/use-system-online';
 import type { AllWorkspace } from '../../../../shared';
-import { Loading } from './loading-icon';
 import {
   StyledSelectorContainer,
   StyledSelectorWrapper,
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/loading-icon.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/loading-icon.tsx
deleted file mode 100644
index 9921cf517d..0000000000
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/loading-icon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-
-import { loading, speedVar } from './index.css';
-
-export type LoadingProps = {
-  size?: number;
-  speed?: number;
-};
-
-export const Loading = ({ size, speed = 1.2 }: LoadingProps) => {
-  return (
-    <svg
-      className={loading}
-      width={size ? `${size}px` : '16px'}
-      height={size ? `${size}px` : '16px'}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        ...assignInlineVars({
-          [speedVar]: `${speed}s`,
-        }),
-      }}
-    >
-      <path
-        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM4.95017 12C4.95017 15.8935 8.10648 19.0498 12 19.0498C15.8935 19.0498 19.0498 15.8935 19.0498 12C19.0498 8.10648 15.8935 4.95017 12 4.95017C8.10648 4.95017 4.95017 8.10648 4.95017 12Z"
-        fill="var(--affine-black-10)"
-      />
-      <path
-        d="M20.525 12C21.3396 12 22.0111 11.3361 21.8914 10.5303C21.7714 9.72269 21.5527 8.93094 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C15.0691 2.44732 14.2773 2.22859 13.4697 2.10859C12.6639 1.98886 12 2.66038 12 3.475C12 4.28962 12.6674 4.93455 13.4643 5.10374C13.8853 5.19314 14.2983 5.32113 14.6979 5.48665C15.5533 5.84095 16.3304 6.36024 16.9851 7.0149C17.6398 7.66955 18.1591 8.44674 18.5133 9.30208C18.6789 9.70167 18.8069 10.1147 18.8963 10.5357C19.0655 11.3326 19.7104 12 20.525 12Z"
-        fill="var(--affine-primary-color)"
-      />
-    </svg>
-  );
-};