diff --git a/web/src/components/AvatarPicker.tsx b/web/src/components/AvatarPicker.tsx
index 1492fa25..e8bfa61b 100644
--- a/web/src/components/AvatarPicker.tsx
+++ b/web/src/components/AvatarPicker.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import { closeModal, openModal } from './Modal';
 import { showToasts, t } from 'tailchat-shared';
 import { Avatar } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { ModalAvatarCropper } from './modals/AvatarCropper';
 import { isGIF } from '@/utils/file-helper';
 
diff --git a/web/src/components/AvatarUploader.tsx b/web/src/components/AvatarUploader.tsx
index f1a3d97e..cdf83a96 100644
--- a/web/src/components/AvatarUploader.tsx
+++ b/web/src/components/AvatarUploader.tsx
@@ -1,5 +1,5 @@
 import { blobUrlToFile } from '@/utils/file-helper';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { uploadFile, UploadFileResult, useAsyncRequest } from 'tailchat-shared';
diff --git a/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/web/src/components/ChatBox/ChatInputBox/Addon.tsx
index c9946480..914ef0a4 100644
--- a/web/src/components/ChatBox/ChatInputBox/Addon.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/Addon.tsx
@@ -3,7 +3,7 @@ import {
   getMessageTextDecorators,
   pluginChatInputActions,
 } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Dropdown, Menu } from 'antd';
 import React from 'react';
 import { t } from 'tailchat-shared';
diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 8d7bddc8..fb9e537c 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -14,7 +14,7 @@ import {
 import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
 import { getMessageRender, pluginMessageExtraParsers } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Divider, Dropdown } from 'antd';
 import { UserName } from '@/components/UserName';
 import clsx from 'clsx';
diff --git a/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx b/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
index 69229bd8..847cca8b 100644
--- a/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Menu } from 'antd';
 import React from 'react';
 import {
diff --git a/web/src/components/ChatBox/ChatMessageList/useRenderPluginMessageInterpreter.tsx b/web/src/components/ChatBox/ChatMessageList/useRenderPluginMessageInterpreter.tsx
index b48a86c3..036a2357 100644
--- a/web/src/components/ChatBox/ChatMessageList/useRenderPluginMessageInterpreter.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/useRenderPluginMessageInterpreter.tsx
@@ -1,5 +1,5 @@
 import { messageInterpreter } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Popover } from 'antd';
 import React from 'react';
 import { useMemo } from 'react';
diff --git a/web/src/components/ChatBox/ChatReply.tsx b/web/src/components/ChatBox/ChatReply.tsx
index b2f1b057..11605faa 100644
--- a/web/src/components/ChatBox/ChatReply.tsx
+++ b/web/src/components/ChatBox/ChatReply.tsx
@@ -3,7 +3,7 @@ import { t, useChatBoxContext } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { getMessageRender } from '@/plugin/common';
 import { UserName } from '../UserName';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 export const ChatReply: React.FC = React.memo(() => {
   const { replyMsg, clearReplyMsg } = useChatBoxContext();
diff --git a/web/src/components/FullModal/index.tsx b/web/src/components/FullModal/index.tsx
index 442ddf59..aee1d689 100644
--- a/web/src/components/FullModal/index.tsx
+++ b/web/src/components/FullModal/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import _isFunction from 'lodash/isFunction';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 
 /**
diff --git a/web/src/components/GroupSection.tsx b/web/src/components/GroupSection.tsx
index b5ef82b7..67474b17 100644
--- a/web/src/components/GroupSection.tsx
+++ b/web/src/components/GroupSection.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React from 'react';
 import { useReducer } from 'react';
 
diff --git a/web/src/components/Icon.tsx b/web/src/components/Icon.tsx
new file mode 100644
index 00000000..bc52d302
--- /dev/null
+++ b/web/src/components/Icon.tsx
@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { Icon as Iconify, IconProps } from '@iconify/react';
+
+export const Icon: React.FC<Omit<IconProps, 'ref'>> = React.memo((props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <>
+      <Iconify {...props} onLoad={() => setLoaded(true)} />
+      {!loaded && <span style={{ width: '1em', height: '1em' }} />}
+    </>
+  );
+});
+Icon.displayName = 'Icon';
diff --git a/web/src/components/IconBtn.tsx b/web/src/components/IconBtn.tsx
index 1d822d5d..b7a2dcee 100644
--- a/web/src/components/IconBtn.tsx
+++ b/web/src/components/IconBtn.tsx
@@ -1,7 +1,7 @@
-import { Icon } from '@iconify/react';
 import { Button, ButtonProps, Tooltip } from 'antd';
 import React from 'react';
 import { isValidStr } from 'tailchat-shared';
+import { Icon } from './Icon';
 
 const btnClassName =
   'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';
diff --git a/web/src/components/IsDeveloping.tsx b/web/src/components/IsDeveloping.tsx
index bd6acf67..16f8aa49 100644
--- a/web/src/components/IsDeveloping.tsx
+++ b/web/src/components/IsDeveloping.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { t } from 'tailchat-shared';
 import React from 'react';
 
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index d60ba9cf..fadc3ae2 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -7,7 +7,7 @@ import _isString from 'lodash/isString';
 import _noop from 'lodash/noop';
 import { PortalAdd, PortalRemove } from './Portal';
 import { Typography } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { useIsMobile } from '@/hooks/useIsMobile';
diff --git a/web/src/components/SectionHeader.tsx b/web/src/components/SectionHeader.tsx
index b3ed6b06..c1d28215 100644
--- a/web/src/components/SectionHeader.tsx
+++ b/web/src/components/SectionHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Dropdown } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 
 interface SectionHeaderProps {
diff --git a/web/src/components/Spinner.tsx b/web/src/components/Spinner.tsx
index 779be7b7..c1d2f5e1 100644
--- a/web/src/components/Spinner.tsx
+++ b/web/src/components/Spinner.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React from 'react';
 
 export const Spinner: React.FC = React.memo(() => {
diff --git a/web/src/components/modals/GroupInvite.tsx b/web/src/components/modals/GroupInvite.tsx
index d0ac7a9c..c4d71e3e 100644
--- a/web/src/components/modals/GroupInvite.tsx
+++ b/web/src/components/modals/GroupInvite.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Button, Typography } from 'antd';
 import React, { useState } from 'react';
 import {
diff --git a/web/src/components/modals/SettingsView/About.tsx b/web/src/components/modals/SettingsView/About.tsx
index 901a8b64..094432e7 100644
--- a/web/src/components/modals/SettingsView/About.tsx
+++ b/web/src/components/modals/SettingsView/About.tsx
@@ -2,7 +2,7 @@ import { Typography } from 'antd';
 import React from 'react';
 import { version } from 'tailchat-shared';
 import logoUrl from '@assets/images/logo.svg';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 const { Paragraph, Text, Link } = Typography;
 
diff --git a/web/src/components/modals/SettingsView/Status.tsx b/web/src/components/modals/SettingsView/Status.tsx
index 67536daa..ac970a70 100644
--- a/web/src/components/modals/SettingsView/Status.tsx
+++ b/web/src/components/modals/SettingsView/Status.tsx
@@ -1,6 +1,6 @@
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { pluginInspectServices } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useMemo } from 'react';
 import { t, useAvailableServices } from 'tailchat-shared';
 
diff --git a/web/src/routes/Entry/GuestView.tsx b/web/src/routes/Entry/GuestView.tsx
index 740d7511..8e10b7ef 100644
--- a/web/src/routes/Entry/GuestView.tsx
+++ b/web/src/routes/Entry/GuestView.tsx
@@ -2,7 +2,7 @@ import { Spinner } from '@/components/Spinner';
 import { useSearchParam } from '@/hooks/useSearchParam';
 import { setUserJWT } from '@/utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '@/utils/user-helper';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import {
diff --git a/web/src/routes/Entry/LoginView.tsx b/web/src/routes/Entry/LoginView.tsx
index 24840333..2a87cf48 100644
--- a/web/src/routes/Entry/LoginView.tsx
+++ b/web/src/routes/Entry/LoginView.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Divider } from 'antd';
 import { isValidStr, loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
 import React, { useState } from 'react';
diff --git a/web/src/routes/Entry/RegisterView.tsx b/web/src/routes/Entry/RegisterView.tsx
index 0bb1e622..082a0889 100644
--- a/web/src/routes/Entry/RegisterView.tsx
+++ b/web/src/routes/Entry/RegisterView.tsx
@@ -2,7 +2,7 @@ import { isValidStr, registerWithEmail, t, useAsyncFn } from 'tailchat-shared';
 import React, { useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { useHistory } from 'react-router';
 import { setUserJWT } from '../../utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '../../utils/user-helper';
diff --git a/web/src/routes/Main/Content/Group/SidebarItem.tsx b/web/src/routes/Main/Content/Group/SidebarItem.tsx
index a32862f5..7d9cbe31 100644
--- a/web/src/routes/Main/Content/Group/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/Group/SidebarItem.tsx
@@ -15,7 +15,7 @@ import { Dropdown, Menu } from 'antd';
 import copy from 'copy-to-clipboard';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 /**
  * 群组面板侧边栏组件
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index d1f176f5..d40e2d8d 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { SidebarItem } from '../SidebarItem';
 import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index 69c71faa..cfa80b8e 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -1,7 +1,7 @@
 import { Avatar } from '@/components/Avatar';
 import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback, useMemo } from 'react';
 import { GroupInfo, t, useAppSelector, useGroupUnread } from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';
diff --git a/web/src/routes/Main/Navbar/MobileMenuBtn.tsx b/web/src/routes/Main/Navbar/MobileMenuBtn.tsx
index e20c1d11..f80da750 100644
--- a/web/src/routes/Main/Navbar/MobileMenuBtn.tsx
+++ b/web/src/routes/Main/Navbar/MobileMenuBtn.tsx
@@ -1,5 +1,5 @@
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback } from 'react';
 import { useSidebarContext } from '../SidebarContext';
 
diff --git a/web/src/routes/Main/Navbar/SettingBtn.tsx b/web/src/routes/Main/Navbar/SettingBtn.tsx
index 91f3d969..ac255e19 100644
--- a/web/src/routes/Main/Navbar/SettingBtn.tsx
+++ b/web/src/routes/Main/Navbar/SettingBtn.tsx
@@ -1,6 +1,6 @@
 import { closeModal, openModal } from '@/components/Modal';
 import { SettingsView } from '@/components/modals/SettingsView';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback } from 'react';
 
 export const SettingBtn: React.FC = React.memo(() => {