diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
new file mode 100644
index 000000000..35458afd1
--- /dev/null
+++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountPicker renders properly 1`] = `
+
+
+
+`;
diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js
new file mode 100644
index 000000000..a1e95438c
--- /dev/null
+++ b/ui/components/multichain/account-picker/account-picker.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import {
+ Button,
+ ICON_NAMES,
+ AvatarAccount,
+ AvatarAccountVariant,
+ Text,
+ Icon,
+} from '../../component-library';
+import {
+ AlignItems,
+ BackgroundColor,
+ BorderRadius,
+ DISPLAY,
+ FONT_WEIGHT,
+ IconColor,
+ Size,
+} from '../../../helpers/constants/design-system';
+
+export const AccountPicker = ({ address, name, onClick }) => {
+ const useBlockie = useSelector((state) => state.metamask.useBlockie);
+
+ return (
+
+ );
+};
+
+AccountPicker.propTypes = {
+ /**
+ * Account name
+ */
+ name: PropTypes.string.isRequired,
+ /**
+ * Account address, used for blockie or jazzicon
+ */
+ address: PropTypes.string.isRequired,
+ /**
+ * Action to perform when the account picker is clicked
+ */
+ onClick: PropTypes.func.isRequired,
+};
diff --git a/ui/components/multichain/account-picker/account-picker.stories.js b/ui/components/multichain/account-picker/account-picker.stories.js
new file mode 100644
index 000000000..d82c2c490
--- /dev/null
+++ b/ui/components/multichain/account-picker/account-picker.stories.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { AccountPicker } from '.';
+
+const CHAOS_ACCOUNT = {
+ address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"',
+ name: 'Account That Has A Really Really Really Really Really Long Name',
+};
+
+export default {
+ title: 'Components/Multichain/AccountPicker',
+ component: AccountPicker,
+ argTypes: {
+ name: {
+ control: 'string',
+ },
+ address: {
+ control: 'string',
+ },
+ onClick: {
+ action: 'onClick',
+ },
+ },
+ args: {
+ address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"',
+ name: 'Account 1',
+ onClick: () => undefined,
+ },
+};
+
+export const DefaultStory = (args) => ;
+DefaultStory.storyName = 'Default';
+
+export const ChaosStory = (args) => (
+
+);
+ChaosStory.storyName = 'Chaos';
+ChaosStory.args = { name: CHAOS_ACCOUNT.name };
diff --git a/ui/components/multichain/account-picker/account-picker.test.js b/ui/components/multichain/account-picker/account-picker.test.js
new file mode 100644
index 000000000..b16bccd04
--- /dev/null
+++ b/ui/components/multichain/account-picker/account-picker.test.js
@@ -0,0 +1,47 @@
+/* eslint-disable jest/require-top-level-describe */
+import React from 'react';
+import 'jest-canvas-mock';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+import mockState from '../../../../test/data/mock-state.json';
+import { AccountPicker } from '.';
+
+const DEFAULT_PROPS = {
+ name: 'Account 1',
+ address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+ onClick: () => undefined,
+};
+
+const render = (props = {}, state = {}) => {
+ const store = configureStore({
+ metamask: {
+ ...mockState.metamask,
+ provider: {
+ chainId: '0x99',
+ },
+ ...state,
+ },
+ });
+ return renderWithProvider(
+ ,
+ store,
+ );
+};
+
+describe('AccountPicker', () => {
+ it('renders properly', () => {
+ const { container } = render({}, { useBlockie: true });
+ expect(container).toMatchSnapshot();
+ });
+
+ it('displays a blockie per the setting', () => {
+ const { container } = render({}, { useBlockie: true });
+ expect(container.querySelector('canvas')).toBeDefined();
+ expect(container.querySelector('img')).toBeDefined();
+ });
+
+ it('displays a jazzicon per the setting', () => {
+ const { container } = render({}, { useBlockie: false });
+ expect(container.querySelector('svg')).toBeDefined();
+ });
+});
diff --git a/ui/components/multichain/account-picker/index.js b/ui/components/multichain/account-picker/index.js
new file mode 100644
index 000000000..e561ae61c
--- /dev/null
+++ b/ui/components/multichain/account-picker/index.js
@@ -0,0 +1 @@
+export { AccountPicker } from './account-picker';
diff --git a/ui/components/multichain/account-picker/index.scss b/ui/components/multichain/account-picker/index.scss
new file mode 100644
index 000000000..4640ac384
--- /dev/null
+++ b/ui/components/multichain/account-picker/index.scss
@@ -0,0 +1,7 @@
+.multichain-account-picker {
+ &:hover,
+ &:focus {
+ box-shadow: none;
+ background: var(--color-background-default-hover);
+ }
+}
diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js
index edf6785b9..b686c0948 100644
--- a/ui/components/multichain/index.js
+++ b/ui/components/multichain/index.js
@@ -1,6 +1,7 @@
export { AccountListItem } from './account-list-item';
export { AccountListItemMenu } from './account-list-item-menu';
export { AccountListMenu } from './account-list-menu';
+export { AccountPicker } from './account-picker';
export { DetectedTokensBanner } from './detected-token-banner';
export { GlobalMenu } from './global-menu';
export { MultichainImportTokenLink } from './multichain-import-token-link';
diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss
index 8fe555f0b..a2a2dbd20 100644
--- a/ui/components/multichain/multichain-components.scss
+++ b/ui/components/multichain/multichain-components.scss
@@ -7,4 +7,5 @@
@import 'address-copy-button/index';
@import 'account-list-item/index';
@import 'account-list-menu/index';
+@import 'account-picker/index';
@import 'multichain-token-list-item/multichain-token-list-item';