diff --git a/packages/app/src/components/header/header-right-items/SyncUser.tsx b/packages/app/src/components/header/header-right-items/SyncUser.tsx
index 60af1b461a..0923de9893 100644
--- a/packages/app/src/components/header/header-right-items/SyncUser.tsx
+++ b/packages/app/src/components/header/header-right-items/SyncUser.tsx
@@ -1,15 +1,41 @@
-import { CloudUnsyncedIcon, CloudInsyncIcon } from '@blocksuite/icons';
+import { CloudUnsyncedIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
 import { IconButton } from '@/ui/button';
 
+// Temporary solution to use this component, since the @blocksuite/icons has not been published yet
+const DefaultSyncIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z"
+        stroke="#888A9E"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4571 9L9 16H10.4392L12.0021 11.1586L13.5657 16H15L12.5425 9H11.4571Z"
+        fill="#888A9E"
+      />
+    </svg>
+  );
+};
 export const SyncUser = () => {
   const { triggerLoginModal } = useModal();
   const appState = useAppState();
 
   return appState.user ? (
     <IconButton iconSize="middle" disabled>
-      <CloudInsyncIcon />
+      <DefaultSyncIcon />
     </IconButton>
   ) : (
     <IconButton