diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx
index 9c5c548a49..0e6e76208f 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx
@@ -1,12 +1,12 @@
 import { Button, FlexWrapper, MuiFade } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import type React from 'react';
 import { useState } from 'react';
 
 import { useIsWorkspaceOwner } from '../../../../../hooks/affine/use-is-workspace-owner';
-import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
 import { Upload } from '../../../../pure/file-upload';
 import {
   CloudWorkspaceIcon,
diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
index 19ade733a3..d313c1ae93 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
@@ -1,11 +1,11 @@
 import { Content, FlexWrapper, styled } from '@affine/component';
 import { Trans, useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import type React from 'react';
 
 import { useCurrentUser } from '../../../../../hooks/current/use-current-user';
-import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
 import { WorkspaceAvatar } from '../../../../pure/footer';
 import type { PanelProps } from '../../index';
 
diff --git a/apps/web/src/components/pure/workspace-avatar/index.tsx b/apps/web/src/components/pure/workspace-avatar/index.tsx
index 1e1e906192..d00b1dfc2f 100644
--- a/apps/web/src/components/pure/workspace-avatar/index.tsx
+++ b/apps/web/src/components/pure/workspace-avatar/index.tsx
@@ -1,8 +1,8 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import type React from 'react';
 import { memo } from 'react';
 
-import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
 import type { AllWorkspace, BlockSuiteWorkspace } from '../../../shared';
 import { stringToColour } from '../../../utils';
 
diff --git a/apps/web/src/pages/public-workspace/[workspaceId].tsx b/apps/web/src/pages/public-workspace/[workspaceId].tsx
index c1d166cdd3..897536d94b 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId].tsx
@@ -1,5 +1,6 @@
 import { Breadcrumbs, IconButton, ListSkeleton } from '@affine/component';
 import { SearchIcon } from '@blocksuite/icons';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import { useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
@@ -16,7 +17,6 @@ import { QueryParamError } from '../../components/affine/affine-error-eoundary';
 import { StyledTableContainer } from '../../components/blocksuite/block-suite-page-list/page-list/styles';
 import { WorkspaceAvatar } from '../../components/pure/footer';
 import { PageLoading } from '../../components/pure/loading';
-import { useBlockSuiteWorkspaceAvatarUrl } from '../../hooks/use-blocksuite-workspace-avatar-url';
 import { PublicWorkspaceLayout } from '../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../shared';
 import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]';
diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
index 7209e8cccf..de70ddb2c6 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -1,6 +1,7 @@
 import { Breadcrumbs, displayFlex, styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { PageIcon } from '@blocksuite/icons';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import { useAtomValue, useSetAtom } from 'jotai';
 import Link from 'next/link';
@@ -16,7 +17,6 @@ import { QueryParamError } from '../../../components/affine/affine-error-eoundar
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
-import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
 import { PublicWorkspaceLayout } from '../../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../../shared';
 import { initPage } from '../../../utils';
diff --git a/apps/web/src/hooks/use-blocksuite-workspace-avatar-url.ts b/packages/hooks/src/use-blocksuite-workspace-avatar-url.ts
similarity index 61%
rename from apps/web/src/hooks/use-blocksuite-workspace-avatar-url.ts
rename to packages/hooks/src/use-blocksuite-workspace-avatar-url.ts
index 4216539d26..81ec664fbb 100644
--- a/apps/web/src/hooks/use-blocksuite-workspace-avatar-url.ts
+++ b/packages/hooks/src/use-blocksuite-workspace-avatar-url.ts
@@ -1,23 +1,26 @@
+import type { Workspace } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 import { useCallback } from 'react';
 import useSWR from 'swr';
 
-import { QueryKey } from '../plugins/affine/fetcher';
-import type { BlockSuiteWorkspace } from '../shared';
-
 export function useBlockSuiteWorkspaceAvatarUrl(
   // todo: remove `null` from type
-  blockSuiteWorkspace: BlockSuiteWorkspace | null
+  blockSuiteWorkspace: Workspace | null
 ) {
   const { data: avatar, mutate } = useSWR(
-    blockSuiteWorkspace
-      ? [
-          QueryKey.getImage,
-          blockSuiteWorkspace.id,
-          blockSuiteWorkspace.meta.avatar,
-        ]
+    blockSuiteWorkspace && blockSuiteWorkspace.meta.avatar
+      ? [blockSuiteWorkspace.id, blockSuiteWorkspace.meta.avatar]
       : null,
     {
+      fetcher: async ([id, avatar]) => {
+        assertExists(blockSuiteWorkspace);
+        const blobs = await blockSuiteWorkspace.blobs;
+        if (blobs) {
+          return blobs.get(avatar);
+        }
+        return null;
+      },
+      suspense: true,
       fallbackData: null,
     }
   );