diff --git a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx
index f6e5845f4a889..13add8317412a 100644
--- a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx
+++ b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx
@@ -97,14 +97,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
     }
   }, []);
 
-  const providerIcon = useMemo(
-    () =>
-      Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
-        ? SERVICE_PROVIDERS[config?.provider as ServiceProviderKeys].icon
-        : undefined,
-    [config?.provider]
-  );
-
   const providerName = useMemo(
     () =>
       Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
@@ -252,7 +244,7 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
         isDisabled={isEdit}
         isInvalid={isInvalid}
         fullWidth
-        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : providerIcon}
+        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : undefined}
       >
         <EuiFieldText
           onClick={toggleProviderPopover}
@@ -278,7 +270,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
       isEdit,
       onClearProvider,
       config?.provider,
-      providerIcon,
       toggleProviderPopover,
       handleProviderKeyboardOpen,
       providerName,
diff --git a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx
index f5e379f94e85b..a1aa8a614164f 100644
--- a/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx
+++ b/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHighlight, EuiIcon } from '@elastic/eui';
+import { EuiAvatar, EuiHighlight } from '@elastic/eui';
 import React from 'react';
 
 import { ServiceProviderKeys } from '../../../constants';
@@ -118,7 +118,14 @@ export const ServiceProviderIcon: React.FC<ServiceProviderProps> = ({ providerKe
   const provider = SERVICE_PROVIDERS[providerKey];
 
   return provider ? (
-    <EuiIcon data-test-subj={`icon-service-provider-${providerKey}`} type={provider.icon} />
+    <EuiAvatar
+      name={providerKey}
+      data-test-subj={`icon-service-provider-${providerKey}`}
+      iconType={provider.icon}
+      color="#fff"
+      size="s"
+      type="space"
+    />
   ) : null;
 };