diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index c5e719a904ebd..9216f5b21d7f5 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -94,3 +94,20 @@ export const LazyIconButtonGroup = React.lazy(() =>
* The IconButtonGroup component that is wrapped by the `withSuspence` HOC.
*/
export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
+
+/**
+ * The Lazily-loaded `KibanaSolutionAvatar` component. Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
+ */
+export const KibanaSolutionAvatarLazy = React.lazy(() =>
+ import('./solution_avatar').then(({ KibanaSolutionAvatar }) => ({
+ default: KibanaSolutionAvatar,
+ }))
+);
+
+/**
+ * A `KibanaSolutionAvatar` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavAvatarLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaSolutionAvatar = withSuspense(KibanaSolutionAvatarLazy);
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
new file mode 100644
index 0000000000000..9817d7cdd8d45
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaSolutionAvatar renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/assets/texture.svg b/packages/kbn-shared-ux-components/src/solution_avatar/assets/texture.svg
new file mode 100644
index 0000000000000..fea0d6954343d
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/assets/texture.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
new file mode 100644
index 0000000000000..db31c0fd5a3d4
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { KibanaSolutionAvatar } from './solution_avatar';
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss
new file mode 100644
index 0000000000000..3064ef0a04a67
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss
@@ -0,0 +1,14 @@
+.kbnSolutionAvatar {
+ @include euiBottomShadowSmall;
+
+ &--xxl {
+ @include euiBottomShadowMedium;
+ @include size(100px);
+ line-height: 100px;
+ border-radius: 100px;
+ display: inline-block;
+ background: $euiColorEmptyShade url('/assets/texture.svg') no-repeat;
+ background-size: cover, 125%;
+ text-align: center;
+ }
+}
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
new file mode 100644
index 0000000000000..bc26806016df0
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avatar';
+
+export default {
+ title: 'Solution Avatar',
+ description: 'A wrapper around EuiAvatar, specifically to stylize Elastic Solutions',
+};
+
+type Params = Pick;
+
+export const PureComponent = (params: Params) => {
+ return ;
+};
+
+PureComponent.argTypes = {
+ name: {
+ control: 'text',
+ defaultValue: 'Kibana',
+ },
+ size: {
+ control: 'radio',
+ options: ['s', 'm', 'l', 'xl', 'xxl'],
+ defaultValue: 'xxl',
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx
new file mode 100644
index 0000000000000..7a8b20c3f8d64
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { KibanaSolutionAvatar } from './solution_avatar';
+
+describe('KibanaSolutionAvatar', () => {
+ test('renders', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx
new file mode 100644
index 0000000000000..78459b90e4b3b
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import './solution_avatar.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+
+export type KibanaSolutionAvatarProps = DistributiveOmit & {
+ /**
+ * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
+ */
+ size?: EuiAvatarProps['size'] | 'xxl';
+};
+
+/**
+ * Applies extra styling to a typical EuiAvatar;
+ * The `name` value will be appended to 'logo' to configure the `iconType` unless `iconType` is provided.
+ */
+export const KibanaSolutionAvatar = ({ className, size, ...rest }: KibanaSolutionAvatarProps) => {
+ return (
+ // @ts-ignore Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
+
+ );
+};