diff --git a/src/ProviderCombine/const.tsx b/src/ProviderCombine/const.tsx
index 92d98342..cded15b4 100644
--- a/src/ProviderCombine/const.tsx
+++ b/src/ProviderCombine/const.tsx
@@ -12,6 +12,7 @@ import Baichuan from '@/Baichuan';
 import Bedrock from '@/Bedrock';
 import Claude from '@/Claude';
 import DeepSeek from '@/DeepSeek';
+import Fireworks from '@/Fireworks';
 import Gemini from '@/Gemini';
 import Google from '@/Google';
 import Groq from '@/Groq';
@@ -27,6 +28,7 @@ import Perplexity from '@/Perplexity';
 import { ModelProvider } from '@/ProviderIcon/const';
 import Qwen from '@/Qwen';
 import SiliconCloud from '@/SiliconCloud';
+import Spark from '@/Spark';
 import Stepfun from '@/Stepfun';
 import Together from '@/Together';
 import Upstage from '@/Upstage';
@@ -127,6 +129,8 @@ export const providerMappings: ProviderMapping[] = [
   { Icon: OpenRouter.Combine, keywords: [ModelProvider.OpenRouter], multiple: 0.8 },
   { Icon: ZeroOne.Combine, keywords: [ModelProvider.ZeroOne], multiple: 0.9 },
   { Icon: Together.Combine, keywords: [ModelProvider.TogetherAI] },
+  { Icon: Fireworks.Combine, keywords: [ModelProvider.FireworksAI], multiple: 1.14 },
+  { Icon: Spark.Combine, keywords: [ModelProvider.Spark], multiple: 0.92 },
   { Icon: Qwen.Combine, keywords: [ModelProvider.Qwen] },
   { Icon: Stepfun.Combine, keywords: [ModelProvider.Stepfun], multiple: 0.83 },
   { Icon: Baichuan.Combine, keywords: [ModelProvider.Baichuan], multiple: 0.83 },
diff --git a/src/ProviderCombine/index.tsx b/src/ProviderCombine/index.tsx
index e50c3cab..87959a73 100644
--- a/src/ProviderCombine/index.tsx
+++ b/src/ProviderCombine/index.tsx
@@ -1,20 +1,20 @@
-import { CSSProperties, memo, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import DefaultIcon from '@/ProviderIcon/DefaultIcon';
 import { ModelProviderKey } from '@/ProviderIcon/const';
 
 import { providerMappings } from './const';
 
-export interface ProviderCombineProps {
-  className?: string;
+export interface ProviderCombineProps
+  extends Omit<FlexboxProps, 'children' | 'horizontal' | 'height' | 'width' | 'align' | 'justify'> {
   provider?: ModelProviderKey | string;
   size?: number;
-  style?: CSSProperties;
   type?: 'mono' | 'color';
 }
 
-const ProviderCombine = memo<ProviderCombineProps>(
-  ({ provider: originProvider, size = 12, type = 'color', ...rest }) => {
+const ProviderCombine = forwardRef<HTMLDivElement, ProviderCombineProps>(
+  ({ provider: originProvider, size = 12, type = 'color', ...rest }, ref) => {
     const Render = useMemo(() => {
       if (!originProvider) return;
       const provider = originProvider.toLowerCase();
@@ -26,15 +26,24 @@ const ProviderCombine = memo<ProviderCombineProps>(
       }
     }, [originProvider]);
 
-    if (!Render?.Icon) return <DefaultIcon size={size} {...rest} />;
+    let icon = Render?.Icon ? (
+      <Render.Icon size={size * (Render?.multiple || 1)} type={type} {...(Render?.props || {})} />
+    ) : (
+      <DefaultIcon size={size} />
+    );
 
     return (
-      <Render.Icon
-        size={size * (Render?.multiple || 1)}
-        type={type}
-        {...(Render?.props || {})}
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        height={size * 1.5}
+        horizontal
+        ref={ref}
+        width={'fit-content'}
         {...rest}
-      />
+      >
+        {icon}
+      </Flexbox>
     );
   },
 );
diff --git a/src/ProviderIcon/const.ts b/src/ProviderIcon/const.ts
index 3a1ece57..69d950fd 100644
--- a/src/ProviderIcon/const.ts
+++ b/src/ProviderIcon/const.ts
@@ -7,6 +7,7 @@ import Azure from '@/Azure';
 import Baichuan from '@/Baichuan';
 import Bedrock from '@/Bedrock';
 import DeepSeek from '@/DeepSeek';
+import Fireworks from '@/Fireworks';
 import Google from '@/Google';
 import Groq from '@/Groq';
 import type { IconAvatarProps } from '@/IconAvatar';
@@ -22,6 +23,7 @@ import OpenRouter from '@/OpenRouter';
 import Perplexity from '@/Perplexity';
 import Qwen from '@/Qwen';
 import SiliconCloud from '@/SiliconCloud';
+import Spark from '@/Spark';
 import Stepfun from '@/Stepfun';
 import Together from '@/Together';
 import Upstage from '@/Upstage';
@@ -51,6 +53,7 @@ export enum ModelProvider {
   Baichuan = 'baichuan',
   Bedrock = 'bedrock',
   DeepSeek = 'deepseek',
+  FireworksAI = 'fireworksai',
   Google = 'google',
   Groq = 'groq',
   LobeHub = 'lobehub',
@@ -64,6 +67,7 @@ export enum ModelProvider {
   Perplexity = 'perplexity',
   Qwen = 'qwen',
   SiliconCloud = 'siliconcloud',
+  Spark = 'spark',
   Stepfun = 'stepfun',
   Taichu = 'taichu',
   TogetherAI = 'togetherai',
@@ -95,6 +99,8 @@ export const providerMappings: ProviderMapping[] = [
   { Icon: Together, keywords: [ModelProvider.TogetherAI] },
   { Icon: Qwen, keywords: [ModelProvider.Qwen] },
   { Icon: Stepfun, keywords: [ModelProvider.Stepfun] },
+  { Icon: Spark, keywords: [ModelProvider.Spark] },
+  { Icon: Fireworks, keywords: [ModelProvider.FireworksAI] },
   { Icon: Baichuan, keywords: [ModelProvider.Baichuan] },
   { Icon: AiMass, keywords: [ModelProvider.Taichu] },
   { Icon: Ai360, keywords: [ModelProvider.Ai360] },