diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss
new file mode 100644
index 0000000000000..a47abba723fc8
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss
@@ -0,0 +1,137 @@
+.user-icon {
+ border-radius: 50%;
+ overflow: hidden;
+ width: 70px;
+ height: 70px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ position: relative;
+ font-weight: 500;
+ background: $euiColorPrimary;
+ color: $euiColorEmptyShade;
+
+ &:not(.user-icon--small) {
+ font-size: 1.75rem;
+ }
+
+ &--small {
+ width: 30px;
+ height: 30px;
+ font-size: .875rem;
+ margin-right: .5rem;
+ }
+
+ &__text {
+ text-shadow: 0 1px 2px rgba(black, 0.08);
+ justify-content: center;
+ align-items: center;
+ font-size: 1.125rem;
+ color: $euiColorEmptyShade;
+ font-weight: 500;
+
+ .user-icon--small & {
+ font-size: .87rem;
+ }
+ }
+
+ &__image {
+ max-width: 100%;
+ width: 100%;
+ height: auto;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.group-avatars {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ padding-top: 4px;
+
+ &__additional {
+ line-height: 2;
+ vertical-align: middle;
+ padding-left: 4px;
+ }
+
+ .group-user-icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ width: 32px;
+ height: 32px;
+
+ & > * {
+ pointer-events: none;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &__text {
+ padding-bottom: 2px;
+ z-index: 2;
+ line-height: 1;
+ font-weight: 500;
+ color: $euiColorEmptyShade;
+ font-size: .875rem;
+ text-shadow: 0 1px 2px rgba(black, 0.08);
+ }
+
+ &__image {
+ width: 24px;
+ height: 24px;
+ }
+ }
+}
+
+.groups-tooltip {
+ position: relative;
+ display: inline-block;
+
+ &:hover &__container {
+ visibility: visible;
+ }
+
+ &__container {
+ visibility: hidden;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ box-shadow: 0px 0px 12px rgba(black, 0.15);
+ background: white;
+ text-align: left;
+ text-overflow: ellipsis;
+ min-width: 125px;
+ padding: 6px 10px 6px 10px;
+ border-radius: 3px;
+ z-index: 5;
+ top: 100%;
+ margin-left: -10px;
+ }
+
+ &__text {
+ line-height: 1.5;
+ white-space: nowrap;
+ }
+
+ &__text:before {
+ content:'';
+ display:block;
+ width:0;
+ height:0;
+ position:absolute;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid white;
+ top: -6px;
+ left: 16px;
+ }
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx
index f8c1d00047825..c8d8540bfbd01 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx
@@ -15,7 +15,7 @@ describe('SourcesTable', () => {
it('renders with picture', () => {
const wrapper = shallow();
- expect(wrapper.find('.avatar')).toHaveLength(1);
+ expect(wrapper.find('.user-icon')).toHaveLength(1);
expect(wrapper.find('.avatar__image')).toHaveLength(1);
});
@@ -26,7 +26,7 @@ describe('SourcesTable', () => {
};
const wrapper = shallow();
- expect(wrapper.find('.avatar')).toHaveLength(1);
+ expect(wrapper.find('.user-icon')).toHaveLength(1);
expect(wrapper.find('.avatar__text')).toHaveLength(1);
});
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx
index 28ea303d14eaf..7abec84173f33 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx
@@ -8,8 +8,10 @@ import React from 'react';
import { IUser } from '../../../types';
+import './user_icon.scss';
+
export const UserIcon: React.FC = ({ name, pictureUrl, color, initials, email }) => (
-
+
{pictureUrl ? (
) : (