diff --git a/apps/ligo-virgo/src/assets/images/logo.svg b/apps/ligo-virgo/src/assets/images/logo.svg
deleted file mode 100644
index 2180acf189..0000000000
--- a/apps/ligo-virgo/src/assets/images/logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="52" height="52" rx="10" fill="#3E6FDB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z" fill="white"/>
-</svg>
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx
new file mode 100644
index 0000000000..8b33a276c4
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx
@@ -0,0 +1,19 @@
+export const Logo = ({ color, style, ...props }) => {
+    return (
+        <svg
+            width="52"
+            height="52"
+            viewBox="0 0 52 52"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect width="52" height="52" rx="10" fill="#3E6FDB" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts
new file mode 100644
index 0000000000..33af505338
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts
@@ -0,0 +1 @@
+export { Logo } from './Logo';
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
index 35b52ee264..cf6f3a0313 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
@@ -3,14 +3,13 @@ import {
     MuiOutlinedInput as OutlinedInput,
 } from '@toeverything/components/ui';
 import { PinIcon } from '@toeverything/components/icons';
-import logo from '../../../assets/images/logo.svg';
 import {
     useUserAndSpaces,
     useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
 import React, { useCallback, useEffect, useState } from 'react';
-import type { CSSProperties } from 'react';
 import { services } from '@toeverything/datasource/db-service';
+import { Logo } from './components/logo/Logo';
 
 const WorkspaceContainer = styled('div')({
     display: 'flex',
@@ -34,10 +33,6 @@ const LogoContainer = styled('div')({
     minWidth: 24,
 });
 
-export const LogoImg = ({ style = {} }: { style?: CSSProperties }) => {
-    return <img style={style} src={logo} alt="AFFiNE Logo" />;
-};
-
 const StyledPin = styled('div')({
     display: 'flex',
     justifyContent: 'end',
@@ -168,7 +163,7 @@ export const WorkspaceName = () => {
             </StyledPin>
             <LeftContainer>
                 <LogoContainer>
-                    <LogoImg />
+                    <Logo color={undefined} style={undefined} />
                 </LogoContainer>
 
                 <StyledWorkspace>