diff --git a/package.json b/package.json
index af4358baf02f..65b9659dc98d 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "@langchain/community": "^0.2.31",
     "@lobehub/chat-plugin-sdk": "^1.32.4",
     "@lobehub/chat-plugins-gateway": "^1.9.0",
-    "@lobehub/icons": "^1.28.0",
+    "@lobehub/icons": "^1.30.0",
     "@lobehub/tts": "^1.24.3",
     "@lobehub/ui": "^1.149.2",
     "@neondatabase/serverless": "^0.9.4",
diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx
index 385a0e21d509..4fda8e3a813c 100644
--- a/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx
+++ b/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx
@@ -1,8 +1,8 @@
+import { ModelTag } from '@lobehub/icons';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ModelTag from '@/components/ModelTag';
 import ModelSwitchPanel from '@/features/ModelSwitchPanel';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
diff --git a/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx b/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx
index 62408f385c55..0553a12544a6 100644
--- a/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx
+++ b/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx
@@ -1,3 +1,4 @@
+import { ModelTag } from '@lobehub/icons';
 import { Avatar, ChatHeaderTitle, Markdown } from '@lobehub/ui';
 import { LobeChat } from '@lobehub/ui/brand';
 import { memo } from 'react';
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ModelTag from '@/components/ModelTag';
 import ChatList from '@/features/Conversation/components/ChatList';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
diff --git a/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx
index b3f514a8af62..4a33685435ce 100644
--- a/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx
+++ b/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx
@@ -1,8 +1,8 @@
+import { ModelTag } from '@lobehub/icons';
 import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import ModelTag from '@/components/ModelTag';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
diff --git a/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx b/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx
index 4b2bfe586496..0a87d9bf9ca5 100644
--- a/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx
+++ b/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx
@@ -1,11 +1,9 @@
 'use client';
 
-import { Azure, OpenAI } from '@lobehub/icons';
 import { Markdown } from '@lobehub/ui';
-import { AutoComplete, Divider, Input } from 'antd';
+import { AutoComplete, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { AzureProviderCard } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -29,16 +27,6 @@ const useStyles = createStyles(({ css, token }) => ({
 
 const providerKey = ModelProvider.Azure;
 
-const AzureOpenAIBrand = () => {
-  return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      <Azure.Combine size={22} type={'color'}></Azure.Combine>
-      <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-      <OpenAI.Combine size={24}></OpenAI.Combine>
-    </Flexbox>
-  );
-};
-
 export const useAzureProvider = (): ProviderItem => {
   const { t } = useTranslation('modelProvider');
   const { styles } = useStyles();
@@ -105,6 +93,5 @@ export const useAzureProvider = (): ProviderItem => {
       notFoundContent: t('azure.empty'),
       placeholder: t('azure.modelListPlaceholder'),
     },
-    title: <AzureOpenAIBrand />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx b/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx
index 1192de646c3b..a44527de74b1 100644
--- a/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx
+++ b/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import { Aws, Bedrock } from '@lobehub/icons';
-import { Divider, Input, Select } from 'antd';
+import { Input, Select } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { BedrockProviderCard } from '@/config/modelProviders';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
@@ -57,12 +55,5 @@ export const useBedrockProvider = (): ProviderItem => {
         name: [KeyVaultsConfigKey, providerKey, 'region'],
       },
     ],
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Aws.Color size={32} />
-        <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-        <Bedrock.Combine size={26} type={'color'} />
-      </Flexbox>
-    ),
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx b/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx
index fc3ad0b82bc0..8c3744ee323f 100644
--- a/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx
+++ b/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Ollama } from '@lobehub/icons';
 import { useTranslation } from 'react-i18next';
 
 import { OllamaProviderCard } from '@/config/modelProviders';
@@ -24,6 +23,5 @@ export const useOllamaProvider = (): ProviderItem => {
       placeholder: 'http://127.0.0.1:11434',
       title: t('ollama.endpoint.title'),
     },
-    title: <Ollama.Combine size={28} />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx b/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx
index 8e0b88a5ba67..461c4ba91bb0 100644
--- a/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx
+++ b/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { OpenAI } from '@lobehub/icons';
-
 import { OpenAIProviderCard } from '@/config/modelProviders';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -15,6 +13,5 @@ export const useOpenAIProvider = (): ProviderItem => {
       placeholder: 'https://api.openai.com/v1',
     },
     showApiKey: showOpenAIApiKey,
-    title: <OpenAI.Combine size={24} />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/providers.tsx b/src/app/(main)/settings/llm/ProviderList/providers.tsx
index 6a0711780db2..59c1f46d7eaf 100644
--- a/src/app/(main)/settings/llm/ProviderList/providers.tsx
+++ b/src/app/(main)/settings/llm/ProviderList/providers.tsx
@@ -1,31 +1,4 @@
-import {
-  Ai360,
-  AiMass,
-  Anthropic,
-  Baichuan,
-  Claude,
-  DeepSeek,
-  Gemini,
-  Google,
-  Groq,
-  Minimax,
-  Mistral,
-  Moonshot,
-  Novita,
-  OpenRouter,
-  Perplexity,
-  SiliconCloud,
-  Stepfun,
-  Together,
-  Tongyi,
-  ZeroOne,
-  Zhipu,
-} from '@lobehub/icons';
-import { Divider } from 'antd';
-import { useTheme } from 'antd-style';
 import { useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
 
 import {
   Ai360ProviderCard,
@@ -55,157 +28,38 @@ import { useBedrockProvider } from './Bedrock';
 import { useOllamaProvider } from './Ollama';
 import { useOpenAIProvider } from './OpenAI';
 
-const BASE_DOC_URL = 'https://lobehub.com/docs/usage/providers';
-
-const AnthropicBrand = () => {
-  const { isDarkMode } = useTheme();
-  return <Anthropic.Text color={isDarkMode ? undefined : Claude.colorPrimary} size={15} />;
-};
-
-const MoonshotBrand = () => {
-  const theme = useTheme();
-  return (
-    <Moonshot.Combine
-      color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
-      size={22}
-    />
-  );
-};
-
-const GroqBrand = () => {
-  const theme = useTheme();
-
-  return <Groq.Text color={theme.isDarkMode ? theme.colorText : Groq.colorPrimary} size={20} />;
-};
-
-const GoogleBrand = () => (
-  <Flexbox align={'center'} gap={8} horizontal>
-    <Google.BrandColor size={22} />
-    <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-    <Gemini.Combine size={22} type={'color'} />
-  </Flexbox>
-);
-
 export const useProviderList = (): ProviderItem[] => {
-  const azureProvider = useAzureProvider();
-  const ollamaProvider = useOllamaProvider();
-  const openAIProvider = useOpenAIProvider();
-  const bedrockProvider = useBedrockProvider();
+  const AzureProvider = useAzureProvider();
+  const OllamaProvider = useOllamaProvider();
+  const OpenAIProvider = useOpenAIProvider();
+  const BedrockProvider = useBedrockProvider();
 
   return useMemo(
     () => [
-      {
-        ...openAIProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'openai'),
-      },
-      {
-        ...ollamaProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'ollama'),
-      },
-      {
-        ...azureProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'azure'),
-      },
-      {
-        ...GoogleProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'gemini'),
-        title: <GoogleBrand />,
-      },
-      {
-        ...AnthropicProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'anthropic'),
-        title: <AnthropicBrand />,
-      },
-      {
-        ...bedrockProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'bedrock'),
-      },
-      {
-        ...GroqProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'groq'),
-        title: <GroqBrand />,
-      },
-      {
-        ...OpenRouterProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'openrouter'),
-        title: <OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />,
-      },
-      {
-        ...NovitaProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'novita'),
-        title: <Novita.Combine size={20} type={'color'} />,
-      },
-      {
-        ...TogetherAIProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'togetherai'),
-        title: <Together.Combine size={26} type={'color'} />,
-      },
-      {
-        ...QwenProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'qwen'),
-        title: <Tongyi.Combine extra={'千问'} size={26} type={'color'} />,
-      },
-      {
-        ...DeepSeekProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'deepseek'),
-        title: <DeepSeek.Combine size={28} type={'color'} />,
-      },
-      {
-        ...MinimaxProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'minimax'),
-        title: <Minimax.Combine size={32} type={'color'} />,
-      },
-      {
-        ...MistralProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'mistral'),
-        title: <Mistral.Combine size={26} type={'color'} />,
-      },
-      {
-        ...MoonshotProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'moonshot'),
-        title: <MoonshotBrand />,
-      },
-      {
-        ...PerplexityProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'perplexity'),
-        title: <Perplexity.Combine size={24} type={'color'} />,
-      },
-      {
-        ...ZhiPuProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'zhipu'),
-        title: <Zhipu.Combine size={32} type={'color'} />,
-      },
-      {
-        ...ZeroOneProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, '01ai'),
-        title: <ZeroOne.Text size={20} />,
-      },
-      {
-        ...StepfunProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'stepfun'),
-        title: <Stepfun.Combine size={20} type={'color'} />,
-      },
-      {
-        ...BaichuanProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'baichuan'),
-        title: <Baichuan.Combine size={20} type={'color'} />,
-      },
-      {
-        ...TaichuProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'taichu'),
-        title: <AiMass.Combine size={28} type={'color'} />,
-      },
-      {
-        ...Ai360ProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'ai360'),
-        title: <Ai360.Combine size={ 20 } type={ 'color' } />,
-      },
-      {
-        ...SiliconCloudProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'siliconcloud'),
-        title: <SiliconCloud.Combine size={20} type={'color'} />,
-      },
+      OpenAIProvider,
+      OllamaProvider,
+      AzureProvider,
+      GoogleProviderCard,
+      AnthropicProviderCard,
+      BedrockProvider,
+      GroqProviderCard,
+      OpenRouterProviderCard,
+      NovitaProviderCard,
+      TogetherAIProviderCard,
+      QwenProviderCard,
+      DeepSeekProviderCard,
+      MinimaxProviderCard,
+      MistralProviderCard,
+      MoonshotProviderCard,
+      PerplexityProviderCard,
+      ZhiPuProviderCard,
+      ZeroOneProviderCard,
+      StepfunProviderCard,
+      BaichuanProviderCard,
+      TaichuProviderCard,
+      Ai360ProviderCard,
+      SiliconCloudProviderCard,
     ],
-    [azureProvider, ollamaProvider, ollamaProvider, bedrockProvider],
+    [AzureProvider, OllamaProvider, OpenAIProvider, BedrockProvider],
   );
 };
diff --git a/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx b/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx
index 2716c344718e..003adf7106c6 100644
--- a/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx
+++ b/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { ProviderCombine } from '@lobehub/icons';
 import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
@@ -9,6 +10,7 @@ import Link from 'next/link';
 import { ReactNode, memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import {
@@ -19,7 +21,7 @@ import {
   LLMProviderModelListKey,
 } from '@/app/(main)/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { AES_GCM_URL } from '@/const/url';
+import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isServerMode } from '@/const/version';
 import { useUserStore } from '@/store/user';
 import { keyVaultsConfigSelectors, modelConfigSelectors } from '@/store/user/selectors';
@@ -90,7 +92,6 @@ export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'cha
   canDeactivate?: boolean;
   checkerItem?: FormItemProps;
   className?: string;
-  docUrl?: string;
   extra?: ReactNode;
   hideSwitch?: boolean;
   id: GlobalLLMProviderKey;
@@ -101,7 +102,6 @@ export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'cha
     showModelFetcher?: boolean;
   };
   showAceGcm?: boolean;
-  title: ReactNode;
 }
 
 const ProviderConfig = memo<ProviderConfigProps>(
@@ -112,14 +112,12 @@ const ProviderConfig = memo<ProviderConfigProps>(
     showApiKey = true,
     checkModel,
     canDeactivate = true,
-    title,
     checkerItem,
     modelList,
     defaultShowBrowserRequest,
     disableBrowserRequest,
     className,
     name,
-    docUrl,
     showAceGcm = true,
     extra,
   }) => {
@@ -146,7 +144,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
     const apiKeyItem: FormItemProps[] = !showApiKey
       ? []
-      : apiKeyItems ?? [
+      : (apiKeyItems ?? [
           {
             children: (
               <Input.Password
@@ -158,7 +156,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
             label: t(`llm.apiKey.title`),
             name: [KeyVaultsConfigKey, id, LLMProviderApiTokenKey],
           },
-        ];
+        ]);
 
     const aceGcmItem: FormItemProps = {
       children: (
@@ -245,15 +243,17 @@ const ProviderConfig = memo<ProviderConfigProps>(
       extra: (
         <Flexbox align={'center'} gap={8} horizontal>
           {extra}
-          {docUrl && (
-            <Tooltip title={t('llm.helpDoc')}>
-              <Link href={docUrl} onClick={(e) => e.stopPropagation()} target={'_blank'}>
-                <Center className={styles.help} height={20} width={20}>
-                  ?
-                </Center>
-              </Link>
-            </Tooltip>
-          )}
+          <Tooltip title={t('llm.helpDoc')}>
+            <Link
+              href={urlJoin(BASE_PROVIDER_DOC_URL, id)}
+              onClick={(e) => e.stopPropagation()}
+              target={'_blank'}
+            >
+              <Center className={styles.help} height={20} width={20}>
+                ?
+              </Center>
+            </Link>
+          </Tooltip>
           {canDeactivate ? (
             <Switch
               onChange={(enabled) => {
@@ -275,7 +275,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
             ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
           }}
         >
-          {title}
+          <ProviderCombine provider={id} size={24} />
         </Flexbox>
       ),
     };
diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx
index 1245b21830e8..7a53c7027d44 100644
--- a/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx
+++ b/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx
@@ -1,3 +1,4 @@
+import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
@@ -6,7 +7,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors, modelProviderSelectors } from '@/store/user/selectors';
diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx
index e9fc61ed87ff..c37901ee48d1 100644
--- a/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx
+++ b/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx
@@ -1,3 +1,4 @@
+import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
@@ -7,7 +8,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
diff --git a/src/app/(main)/settings/tts/features/const.ts b/src/app/(main)/settings/tts/features/const.tsx
similarity index 57%
rename from src/app/(main)/settings/tts/features/const.ts
rename to src/app/(main)/settings/tts/features/const.tsx
index c3e26a5847b7..cfe99b39b235 100644
--- a/src/app/(main)/settings/tts/features/const.ts
+++ b/src/app/(main)/settings/tts/features/const.tsx
@@ -1,19 +1,22 @@
+import { OpenAI } from '@lobehub/icons';
 import { SelectProps } from 'antd';
 
+import { LabelRenderer } from '@/components/ModelSelect';
+
 export const opeanaiTTSOptions: SelectProps['options'] = [
   {
-    label: 'tts-1',
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'tts-1'} />,
     value: 'tts-1',
   },
   {
-    label: 'tts-1-hd',
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'tts-1-hd'} />,
     value: 'tts-1-hd',
   },
 ];
 
 export const opeanaiSTTOptions: SelectProps['options'] = [
   {
-    label: 'whisper-1',
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'stt-1'} />,
     value: 'whisper-1',
   },
 ];
diff --git a/src/components/ModelIcon/index.tsx b/src/components/ModelIcon/index.tsx
deleted file mode 100644
index 8a313554fcdf..000000000000
--- a/src/components/ModelIcon/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import {
-  Adobe,
-  Ai21,
-  Ai360,
-  AiMass,
-  Aws,
-  Aya,
-  Azure,
-  Baichuan,
-  ByteDance,
-  ChatGLM,
-  Claude,
-  CodeGeeX,
-  Cohere,
-  Dbrx,
-  DeepSeek,
-  FishAudio,
-  Gemini,
-  Gemma,
-  Hunyuan,
-  LLaVA,
-  Meta,
-  Minimax,
-  Mistral,
-  Moonshot,
-  OpenAI,
-  OpenChat,
-  OpenRouter,
-  Perplexity,
-  Rwkv,
-  Spark,
-  Stability,
-  Stepfun,
-  Tongyi,
-  Wenxin,
-  Yi,
-} from '@lobehub/icons';
-import { memo } from 'react';
-
-interface ModelProviderIconProps {
-  model?: string;
-  size?: number;
-}
-
-const ModelIcon = memo<ModelProviderIconProps>(({ model: originModel, size = 12 }) => {
-  if (!originModel) return;
-
-  // lower case the origin model so to better match more model id case
-  const model = originModel.toLowerCase();
-
-  // currently supported models, maybe not in its own provider
-  if (model.includes('text-embedding-')) return <OpenAI.Avatar size={size} />;
-  if (model.includes('gpt-3')) return <OpenAI.Avatar size={size} type={'gpt3'} />;
-  if (model.includes('gpt-4')) return <OpenAI.Avatar size={size} type={'gpt4'} />;
-  if (model.includes('glm-') || model.includes('chatglm')) return <ChatGLM.Avatar size={size} />;
-  if (model.startsWith('codegeex')) return <CodeGeeX.Avatar size={size} />;
-  if (model.includes('deepseek')) return <DeepSeek.Avatar size={size} />;
-  if (model.includes('claude')) return <Claude.Avatar size={size} />;
-  if (model.includes('titan')) return <Aws.Avatar size={size} />;
-  if (model.includes('llama')) return <Meta.Avatar size={size} />;
-  if (model.includes('llava')) return <LLaVA.Avatar size={size} />;
-  if (model.includes('gemini')) return <Gemini.Avatar size={size} />;
-  if (model.includes('gemma')) return <Gemma.Avatar size={size} />;
-  if (model.includes('moonshot')) return <Moonshot.Avatar size={size} />;
-  if (model.includes('qwen')) return <Tongyi.Avatar background={Tongyi.colorPrimary} size={size} />;
-  if (model.includes('minmax') || model.includes('abab')) return <Minimax.Avatar size={size} />;
-  if (
-    model.includes('mistral') ||
-    model.includes('mixtral') ||
-    model.includes('codestral') ||
-    model.includes('mathstral')
-  )
-    return <Mistral.Avatar size={size} />;
-  if (model.includes('pplx') || model.includes('sonar')) return <Perplexity.Avatar size={size} />;
-  if (model.includes('yi-')) return <Yi.Avatar size={size} />;
-  if (model.startsWith('openrouter')) return <OpenRouter.Avatar size={size} />; // only for Cinematika and Auto
-  if (model.startsWith('openchat')) return <OpenChat.Avatar size={size} />;
-  if (model.includes('aya')) return <Aya.Avatar size={size} />;
-  if (model.includes('command')) return <Cohere.Avatar size={size} />;
-  if (model.includes('dbrx')) return <Dbrx.Avatar size={size} />;
-  if (model.includes('step')) return <Stepfun.Avatar size={size} />;
-  if (model.includes('taichu')) return <AiMass.Avatar size={size} />;
-  if (model.includes('360gpt')) return <Ai360.Avatar size={size} />;
-
-  // below: To be supported in providers, move up if supported
-  if (model.includes('baichuan'))
-    return <Baichuan.Avatar background={Baichuan.colorPrimary} size={size} />;
-  if (model.includes('rwkv')) return <Rwkv.Avatar size={size} />;
-  if (model.includes('ernie')) return <Wenxin.Avatar size={size} />;
-  if (model.includes('spark')) return <Spark.Avatar size={size} />;
-  if (model.includes('hunyuan')) return <Hunyuan.Avatar size={size} />;
-  // ref https://github.com/fishaudio/Bert-VITS2/blob/master/train_ms.py#L702
-  if (model.startsWith('d_') || model.startsWith('g_') || model.startsWith('wd_'))
-    return <FishAudio.Avatar size={size} />;
-  if (model.includes('skylark')) return <ByteDance.Avatar size={size} />;
-
-  if (
-    model.includes('stable-diffusion') ||
-    model.includes('stable-video') ||
-    model.includes('stable-cascade') ||
-    model.includes('sdxl') ||
-    model.includes('stablelm') ||
-    model.startsWith('stable-') ||
-    model.startsWith('sd3')
-  )
-    return <Stability.Avatar size={size} />;
-
-  if (model.includes('phi3') || model.includes('phi-3') || model.includes('wizardlm'))
-    return <Azure.Avatar size={size} />;
-  if (model.includes('firefly')) return <Adobe.Avatar size={size} />;
-  if (model.includes('jamba') || model.includes('j2-')) return <Ai21.Avatar size={size} />;
-});
-
-export default ModelIcon;
diff --git a/src/components/ModelProviderIcon/index.tsx b/src/components/ModelProviderIcon/index.tsx
deleted file mode 100644
index df480060f55e..000000000000
--- a/src/components/ModelProviderIcon/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import {
-  Ai360,
-  AiMass,
-  Anthropic,
-  Azure,
-  Baichuan,
-  Bedrock,
-  DeepSeek,
-  Google,
-  Groq,
-  LobeHub,
-  Minimax,
-  Mistral,
-  Moonshot,
-  Novita,
-  Ollama,
-  OpenAI,
-  OpenRouter,
-  Perplexity,
-  SiliconCloud,
-  Stepfun,
-  Together,
-  Tongyi,
-  ZeroOne,
-  Zhipu,
-} from '@lobehub/icons';
-import { memo } from 'react';
-import { Center } from 'react-layout-kit';
-
-import { ModelProvider } from '@/libs/agent-runtime';
-
-interface ModelProviderIconProps {
-  provider?: string;
-}
-
-const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
-  switch (provider) {
-    case 'lobehub': {
-      return <LobeHub.Color size={20} />;
-    }
-
-    case ModelProvider.ZhiPu: {
-      return <Zhipu size={20} />;
-    }
-
-    case ModelProvider.Bedrock: {
-      return <Bedrock size={20} />;
-    }
-
-    case ModelProvider.DeepSeek: {
-      return <DeepSeek size={20} />;
-    }
-
-    case ModelProvider.Google: {
-      return (
-        <Center height={20} width={20}>
-          <Google size={14} />
-        </Center>
-      );
-    }
-
-    case ModelProvider.Azure: {
-      return (
-        <Center height={20} width={20}>
-          <Azure size={14} />
-        </Center>
-      );
-    }
-
-    case ModelProvider.Moonshot: {
-      return <Moonshot size={20} />;
-    }
-
-    case ModelProvider.OpenAI: {
-      return <OpenAI size={20} />;
-    }
-
-    case ModelProvider.Ollama: {
-      return <Ollama size={20} />;
-    }
-
-    case ModelProvider.Perplexity: {
-      return <Perplexity size={20} />;
-    }
-
-    case ModelProvider.Minimax: {
-      return <Minimax size={20} />;
-    }
-
-    case ModelProvider.Mistral: {
-      return <Mistral size={20} />;
-    }
-
-    case ModelProvider.Anthropic: {
-      return <Anthropic size={20} />;
-    }
-
-    case ModelProvider.Groq: {
-      return <Groq size={20} />;
-    }
-
-    case ModelProvider.OpenRouter: {
-      return <OpenRouter size={20} />;
-    }
-
-    case ModelProvider.ZeroOne: {
-      return <ZeroOne size={20} />;
-    }
-
-    case ModelProvider.TogetherAI: {
-      return <Together size={20} />;
-    }
-
-    case ModelProvider.Qwen: {
-      return <Tongyi size={20} />;
-    }
-
-    case ModelProvider.Stepfun: {
-      return <Stepfun size={20} />;
-    }
-
-    case ModelProvider.Novita: {
-      return <Novita size={20} />;
-    }
-
-    case ModelProvider.Baichuan: {
-      return <Baichuan size={20} />;
-    }
-
-    case ModelProvider.Taichu: {
-      return <AiMass size={20} />;
-    }
-
-    case ModelProvider.Ai360: {
-      return <Ai360 size={20} />;
-    }
-
-    case ModelProvider.SiliconCloud: {
-      return <SiliconCloud size={20} />;
-    }
-
-    default: {
-      return null;
-    }
-  }
-});
-
-export default ModelProviderIcon;
diff --git a/src/components/ModelSelect/index.tsx b/src/components/ModelSelect/index.tsx
index b961a00a3105..12b61d5ee1a8 100644
--- a/src/components/ModelSelect/index.tsx
+++ b/src/components/ModelSelect/index.tsx
@@ -1,18 +1,16 @@
+import { IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
 import { Icon, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { Infinity, LucideEye, LucidePaperclip, ToyBrick } from 'lucide-react';
 import numeral from 'numeral';
 import { rgba } from 'polished';
-import { memo } from 'react';
+import { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { ChatModelCard } from '@/types/llm';
 
-import ModelIcon from '../ModelIcon';
-import ModelProviderIcon from '../ModelProviderIcon';
-
 const useStyles = createStyles(({ css, token }) => ({
   custom: css`
     width: 36px;
@@ -160,7 +158,19 @@ interface ProviderItemRenderProps {
 
 export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider, name }) => (
   <Flexbox align={'center'} gap={4} horizontal>
-    <ModelProviderIcon provider={provider} />
+    <ProviderIcon provider={provider} size={20} type={'mono'} />
     {name}
   </Flexbox>
 ));
+
+interface LabelRendererProps {
+  Icon: FC<IconAvatarProps>;
+  label: string;
+}
+
+export const LabelRenderer = memo<LabelRendererProps>(({ Icon, label }) => (
+  <Flexbox align={'center'} gap={8} horizontal>
+    <Icon size={20} />
+    <span>{label}</span>
+  </Flexbox>
+));
diff --git a/src/components/ModelTag/ModelIcon.tsx b/src/components/ModelTag/ModelIcon.tsx
deleted file mode 100644
index 7e7b58ba837c..000000000000
--- a/src/components/ModelTag/ModelIcon.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {
-  AdobeFirefly,
-  Ai21,
-  Ai360,
-  AiMass,
-  Aws,
-  Aya,
-  Azure,
-  Baichuan,
-  ByteDance,
-  ChatGLM,
-  Claude,
-  CodeGeeX,
-  Cohere,
-  Dbrx,
-  DeepSeek,
-  FishAudio,
-  Gemini,
-  Gemma,
-  Hunyuan,
-  LLaVA,
-  Meta,
-  Minimax,
-  Mistral,
-  Moonshot,
-  OpenAI,
-  OpenChat,
-  OpenRouter,
-  Perplexity,
-  Rwkv,
-  Spark,
-  Stability,
-  Stepfun,
-  Tongyi,
-  Wenxin,
-  Yi,
-} from '@lobehub/icons';
-import { memo } from 'react';
-
-interface ModelIconProps {
-  model?: string;
-  size?: number;
-}
-
-const ModelIcon = memo<ModelIconProps>(({ model: originModel, size = 12 }) => {
-  if (!originModel) return;
-
-  // lower case the origin model so to better match more model id case
-  const model = originModel.toLowerCase();
-  
-  // currently supported models, maybe not in its own provider
-  if (model.startsWith('gpt')) return <OpenAI size={size} />;
-  if (model.startsWith('glm') || model.includes('chatglm')) return <ChatGLM size={size} />;
-  if (model.includes('codegeex')) return <CodeGeeX size={size} />;
-  if (model.includes('claude')) return <Claude size={size} />;
-  if (model.includes('deepseek')) return <DeepSeek size={size} />;
-  if (model.includes('titan')) return <Aws size={size} />;
-  if (model.includes('llama')) return <Meta size={size} />;
-  if (model.includes('llava')) return <LLaVA size={size} />;
-  if (model.includes('gemini')) return <Gemini size={size} />;
-  if (model.includes('gemma')) return <Gemma.Simple size={size} />;
-  if (model.includes('moonshot')) return <Moonshot size={size} />;
-  if (model.includes('qwen')) return <Tongyi size={size} />;
-  if (model.includes('minmax')) return <Minimax size={size} />;
-  if (model.includes('abab')) return <Minimax size={size} />;
-  if (model.includes('mistral') || model.includes('mixtral') || model.includes('codestral') || model.includes('mathstral')) return <Mistral size={size} />;
-  if (model.includes('pplx') || model.includes('sonar')) return <Perplexity size={size} />;
-  if (model.includes('yi-')) return <Yi size={size} />;
-  if (model.startsWith('openrouter')) return <OpenRouter size={size} />; // only for Cinematika and Auto
-  if (model.startsWith('openchat')) return <OpenChat size={size} />;
-  if (model.includes('aya')) return <Aya.Avatar size={size} />;
-  if (model.includes('command')) return <Cohere size={size} />;
-  if (model.includes('dbrx')) return <Dbrx size={size} />;
-  if (model.includes('step')) return <Stepfun size={size} />;
-  if (model.includes('taichu')) return <AiMass size={size} />;
-  if (model.includes('360gpt')) return <Ai360 size={size} />;
-
-  // below: To be supported in providers, move up if supported
-  if (model.includes('baichuan')) return <Baichuan size={size} />;
-  if (model.includes('rwkv')) return <Rwkv size={size} />;
-  if (model.includes('ernie')) return <Wenxin size={size} />;
-  if (model.includes('spark')) return <Spark size={size} />;
-  if (model.includes('hunyuan')) return <Hunyuan size={size} />;
-  // ref https://github.com/fishaudio/Bert-VITS2/blob/master/train_ms.py#L702
-  if (model.startsWith('d_') || model.startsWith('g_') || model.startsWith('wd_'))
-    return <FishAudio size={size} />;
-  if (model.includes('skylark')) return <ByteDance size={size} />;
-
-  if (
-    model.includes('stable-diffusion') ||
-    model.includes('stable-video') ||
-    model.includes('stable-cascade') ||
-    model.includes('sdxl') ||
-    model.includes('stablelm') ||
-    model.startsWith('stable-') ||
-    model.startsWith('sd3')
-  )
-    return <Stability size={size} />;
-
-  if (model.includes('phi3') || model.includes('phi-3') || model.includes('wizardlm')) return <Azure size={size} />;
-  if (model.includes('firefly')) return <AdobeFirefly size={size} />;
-  if (model.includes('jamba') || model.includes('j2-')) return <Ai21 size={size} />;
-});
-
-export default ModelIcon;
diff --git a/src/components/ModelTag/index.tsx b/src/components/ModelTag/index.tsx
deleted file mode 100644
index 97def18b52e4..000000000000
--- a/src/components/ModelTag/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Tag } from '@lobehub/ui';
-import { memo } from 'react';
-
-import ModelIcon from './ModelIcon';
-
-interface ModelTagProps {
-  model: string;
-}
-const ModelTag = memo<ModelTagProps>(({ model }) => (
-  <Tag icon={<ModelIcon model={model} />}>{model}</Tag>
-));
-
-export default ModelTag;
diff --git a/src/const/url.ts b/src/const/url.ts
index 22b48c9635f6..2e4e56f77f59 100644
--- a/src/const/url.ts
+++ b/src/const/url.ts
@@ -69,3 +69,4 @@ export const RELEASES_URL = urlJoin(GITHUB, 'releases');
 export const mailTo = (email: string) => `mailto:${email}`;
 
 export const AES_GCM_URL = 'https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01';
+export const BASE_PROVIDER_DOC_URL = 'https://lobehub.com/docs/usage/providers';
diff --git a/src/features/AgentSetting/AgentTTS/options.ts b/src/features/AgentSetting/AgentTTS/options.ts
deleted file mode 100644
index e5205afe4b9e..000000000000
--- a/src/features/AgentSetting/AgentTTS/options.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { SelectProps } from 'antd';
-
-export const ttsOptions: SelectProps['options'] = [
-  {
-    label: 'OpenAI',
-    value: 'openai',
-  },
-  {
-    label: 'Edge Speech',
-    value: 'edge',
-  },
-  {
-    label: 'Microsoft Speech',
-    value: 'microsoft',
-  },
-];
diff --git a/src/features/AgentSetting/AgentTTS/options.tsx b/src/features/AgentSetting/AgentTTS/options.tsx
new file mode 100644
index 000000000000..fd467f60b170
--- /dev/null
+++ b/src/features/AgentSetting/AgentTTS/options.tsx
@@ -0,0 +1,19 @@
+import { Azure, OpenAI } from '@lobehub/icons';
+import { SelectProps } from 'antd';
+
+import { LabelRenderer } from '@/components/ModelSelect';
+
+export const ttsOptions: SelectProps['options'] = [
+  {
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'OpenAI'} />,
+    value: 'openai',
+  },
+  {
+    label: <LabelRenderer Icon={Azure.Avatar} label={'Edge Speech'} />,
+    value: 'edge',
+  },
+  {
+    label: <LabelRenderer Icon={Azure.Avatar} label={'Microsoft Speech'} />,
+    value: 'microsoft',
+  },
+];
diff --git a/src/features/Conversation/Extras/Assistant.tsx b/src/features/Conversation/Extras/Assistant.tsx
index 7a6b8e6a9d1f..3cde88198c3d 100644
--- a/src/features/Conversation/Extras/Assistant.tsx
+++ b/src/features/Conversation/Extras/Assistant.tsx
@@ -1,7 +1,7 @@
+import { ModelTag } from '@lobehub/icons';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ModelTag from '@/components/ModelTag';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';