diff --git a/ui/components/component-library/avatar-favicon/README.mdx b/ui/components/component-library/avatar-favicon/README.mdx
index adcaabc69..6559f2855 100644
--- a/ui/components/component-library/avatar-favicon/README.mdx
+++ b/ui/components/component-library/avatar-favicon/README.mdx
@@ -1,5 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
+import { AvatarBase } from '../';
+
 import { AvatarFavicon } from './avatar-favicon';
 
 # AvatarFavicon
@@ -16,29 +18,58 @@ The `AvatarFavicon` accepts all props below as well as all [Box](/docs/ui-compon
 
 <ArgsTable of={AvatarFavicon} />
 
+`AvatarFavicon` accepts all [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props)
+component props
+
+<ArgsTable of={AvatarBase} />
+
 ### Size
 
 Use the `size` prop to set the size of the `AvatarFavicon`.
 
+Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
+
 Possible sizes include:
 
-- `xs` 16px
-- `sm` 24px
-- `md` 32px
-- `lg` 40px
-- `xl` 48px
+- `SIZES.XS` 16px
+- `SIZES.SM` 24px
+- `SIZES.MD` 32px
+- `SIZES.LG` 40px
+- `SIZES.XL` 48px
 
-Defaults to `md`
+Defaults to `SIZES.MD`
 
 <Canvas>
   <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--size" />
 </Canvas>
 
-### Image Source
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { AvatarFavicon } from '../ui/component-library';
 
-Use the `imageSource` prop to set the image to be rendered of the `AvatarFavicon`.
+<AvatarFavicon size={SIZES.XS} />
+<AvatarFavicon size={SIZES.SM} />
+<AvatarFavicon size={SIZES.MD} />
+<AvatarFavicon size={SIZES.LG} />
+<AvatarFavicon size={SIZES.XL} />
+```
+
+### Src
+
+Use the `src` prop to set the image to be rendered of the `AvatarFavicon`.
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--src" />
+</Canvas>
+
+```jsx
+import { AvatarFavicon } from '../ui/component-library';
+
+<AvatarFavicon src="https://uniswap.org/favicon.ico" />
+<AvatarFavicon src="https://1inch.exchange/assets/favicon/favicon-32x32.png" />
+```
 
 ### Fallback Icon Props
 
-If there is no `imageSource` then in that case an [icon](/docs/ui-components-component-library-icon-icon-stories-js--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.
+If there is no `src` then in that case an [icon](/docs/ui-components-component-library-icon-icon-stories-js--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.
 
diff --git a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
new file mode 100644
index 000000000..dfec97d93
--- /dev/null
+++ b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarFavicon should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+    data-testid="avatar-favicon"
+  >
+    <div
+      class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
+      style="mask-image: url('./images/icons/icon-global-filled.svg');"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.constants.js b/ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
new file mode 100644
index 000000000..921b9c3fa
--- /dev/null
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
@@ -0,0 +1,9 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const AVATAR_FAVICON_SIZES = {
+  XS: SIZES.XS,
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  XL: SIZES.XL,
+};
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js
index d04a4d66b..168e30437 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@@ -12,11 +12,12 @@ import {
   ALIGN_ITEMS,
   JUSTIFY_CONTENT,
 } from '../../../helpers/constants/design-system';
+import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
 
 export const AvatarFavicon = ({
   size = SIZES.MD,
-  imageSource,
-  imgAlt = 'avatar-favicon',
+  src,
+  name = 'avatar-favicon',
   className,
   fallbackIconProps,
   borderColor = BORDER_COLORS.TRANSPARENT,
@@ -28,17 +29,20 @@ export const AvatarFavicon = ({
       display={DISPLAY.FLEX}
       alignItems={ALIGN_ITEMS.CENTER}
       justifyContent={JUSTIFY_CONTENT.CENTER}
-      className={classnames('avatar-favicon', className)}
+      className={classnames('mm-avatar-favicon', className)}
       {...{ borderColor, ...props }}
     >
-      {imageSource ? (
-        <img className="avatar-favicon__image" src={imageSource} alt={imgAlt} />
+      {src ? (
+        <img
+          className="mm-avatar-favicon__image"
+          src={src}
+          alt={`${name} logo`}
+        />
       ) : (
         <Icon
           name={ICON_NAMES.GLOBAL_FILLED}
           color={COLORS.ICON_DEFAULT}
           size={size}
-          aria-label={imgAlt}
           {...fallbackIconProps}
         />
       )}
@@ -48,23 +52,23 @@ export const AvatarFavicon = ({
 
 AvatarFavicon.propTypes = {
   /**
-   * The imageSource accepts the string of the image to be rendered
+   * The src accepts the string of the image to be rendered
    */
-  imageSource: PropTypes.string,
+  src: PropTypes.string,
   /**
    * The alt text for the favicon avatar to be rendered
    */
-  imgAlt: PropTypes.string,
+  name: PropTypes.string.isRequired,
   /**
    * Props for the fallback icon. All Icon props can be used
    */
   fallbackIconProps: PropTypes.shape(Icon.PropTypes),
   /**
    * The size of the AvatarFavicon
-   * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
+   * Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px
    * Defaults to SIZES.MD
    */
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
   /**
    * The border color of the AvatarFavicon
    * Defaults to COLORS.TRANSPARENT
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.scss b/ui/components/component-library/avatar-favicon/avatar-favicon.scss
index f9d461c63..a510ff9a9 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.scss
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.scss
@@ -1,4 +1,4 @@
-.avatar-favicon {
+.mm-avatar-favicon {
   &__image {
     width: 100%;
   }
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js b/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
index 92e6b3175..8c5d286d8 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
@@ -9,7 +9,7 @@ import {
 import Box from '../../ui/box/box';
 
 import README from './README.mdx';
-import { AvatarFavicon } from './avatar-favicon';
+import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarFavicon',
@@ -23,9 +23,9 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(SIZES),
+      options: Object.values(AVATAR_FAVICON_SIZES),
     },
-    imageSource: {
+    src: {
       control: 'text',
     },
     borderColor: {
@@ -34,7 +34,7 @@ export default {
     },
   },
   args: {
-    imageSource: 'https://uniswap.org/favicon.ico',
+    src: 'https://uniswap.org/favicon.ico',
     size: SIZES.MD,
   },
 };
@@ -55,3 +55,13 @@ export const Size = (args) => (
     <AvatarFavicon {...args} size={SIZES.XL} />
   </Box>
 );
+
+export const Src = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX} gap={1}>
+    <AvatarFavicon {...args} src="https://uniswap.org/favicon.ico" />
+    <AvatarFavicon
+      {...args}
+      src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
+    />
+  </Box>
+);
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
index 3b508b411..7005c373e 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@@ -2,25 +2,26 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { AvatarFavicon } from './avatar-favicon';
+import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
 
 describe('AvatarFavicon', () => {
   const args = {
-    imageSource: './images/eth_logo.svg',
+    src: './images/eth_logo.svg',
   };
 
   it('should render correctly', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <AvatarFavicon data-testid="avatar-favicon" />,
     );
     expect(getByTestId('avatar-favicon')).toBeDefined();
+    expect(container).toMatchSnapshot();
   });
 
   it('should render image of Avatar Favicon', () => {
     render(<AvatarFavicon data-testid="avatar-favicon" {...args} />);
     const image = screen.getByRole('img');
     expect(image).toBeDefined();
-    expect(image).toHaveAttribute('src', args.imageSource);
+    expect(image).toHaveAttribute('src', args.src);
   });
 
   it('should render fallback image if no ImageSource is provided', () => {
@@ -43,4 +44,62 @@ describe('AvatarFavicon', () => {
       'fallback-icon',
     );
   });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.XS}
+          data-testid={AVATAR_FAVICON_SIZES.XS}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.SM}
+          data-testid={AVATAR_FAVICON_SIZES.SM}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.MD}
+          data-testid={AVATAR_FAVICON_SIZES.MD}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.LG}
+          data-testid={AVATAR_FAVICON_SIZES.LG}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.XL}
+          data-testid={AVATAR_FAVICON_SIZES.XL}
+          {...args}
+        />
+      </>,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.XS)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XS}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.SM)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.SM}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.MD)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.MD}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.LG)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.LG}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.XL)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XL}`,
+    );
+  });
+
+  it('should render with custom classname', () => {
+    const { getByTestId } = render(
+      <AvatarFavicon
+        className="mm-avatar-favicon--test"
+        data-testid="classname"
+        {...args}
+      />,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-avatar-favicon--test');
+  });
 });
diff --git a/ui/components/component-library/avatar-favicon/index.js b/ui/components/component-library/avatar-favicon/index.js
index 5d080ad57..d746275bf 100644
--- a/ui/components/component-library/avatar-favicon/index.js
+++ b/ui/components/component-library/avatar-favicon/index.js
@@ -1 +1,2 @@
 export { AvatarFavicon } from './avatar-favicon';
+export { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
index 003349da8..70b4810ad 100644
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@@ -4,7 +4,7 @@ export {
   AVATAR_ACCOUNT_TYPES,
   AVATAR_ACCOUNT_DIAMETERS,
 } from './avatar-account';
-export { AvatarFavicon } from './avatar-favicon';
+export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
 export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
 export { AvatarToken } from './avatar-token';
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
index 83b451942..faad6d96a 100644
--- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -7,10 +7,9 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
     data-testid="tag-url"
   >
     <div
-      class="box mm-avatar-base mm-avatar-base--size-md avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <div
-        aria-label="avatar-favicon"
         class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
         style="mask-image: url('./images/icons/icon-global-filled.svg');"
       />
diff --git a/ui/components/component-library/tag-url/tag-url.js b/ui/components/component-library/tag-url/tag-url.js
index ae7619875..c481e0a9b 100644
--- a/ui/components/component-library/tag-url/tag-url.js
+++ b/ui/components/component-library/tag-url/tag-url.js
@@ -41,7 +41,7 @@ export const TagUrl = ({
       display={DISPLAY.FLEX}
       {...props}
     >
-      <AvatarFavicon imageSource={src} {...avatarFaviconProps} />
+      <AvatarFavicon src={src} {...avatarFaviconProps} />
       {showLockIcon && (
         <Icon
           className="mm-tag-url__lock-icon"