diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
index 5b76b568d5415..dec9e25fe2440 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
@@ -6,17 +6,17 @@
 
 import React from 'react';
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import _camelCase from 'lodash/camelCase';
+import { camelCase } from 'lodash';
 
 import { images } from '../assets/source_icons';
+import { imagesFull } from '../assets/sources_full_bleed';
 
 interface SourceIconProps {
   serviceType: string;
   name: string;
   className?: string;
   wrapped?: boolean;
+  fullBleed?: boolean;
 }
 
 export const SourceIcon: React.FC<SourceIconProps> = ({
@@ -24,8 +24,15 @@ export const SourceIcon: React.FC<SourceIconProps> = ({
   serviceType,
   className,
   wrapped,
+  fullBleed = false,
 }) => {
-  const icon = <img src={images[_camelCase(serviceType)]} alt={name} className={className} />;
+  const icon = (
+    <img
+      src={fullBleed ? imagesFull[camelCase(serviceType)] : images[camelCase(serviceType)]}
+      alt={name}
+      className={className}
+    />
+  );
   return wrapped ? (
     <div className="user-group-source" title={name}>
       {icon}