diff --git a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx b/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx
index 14e001a992..bba9ba21bf 100644
--- a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx
@@ -25,6 +25,7 @@ export const E2EAvatarTest: React.FunctionComponent = () => {
       <Avatar
         name="Richard"
         badge={{ status: 'available' }}
+        avatarColor={'colorful'}
         /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
         {...testProps(AVATAR_SECONDARY_TEST_COMPONENT)}
       />
diff --git a/change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json b/change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json
new file mode 100644
index 0000000000..49208d7586
--- /dev/null
+++ b/change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix default avatar rendering and e2e section",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json b/change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json
new file mode 100644
index 0000000000..45c0f68b2e
--- /dev/null
+++ b/change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Fix default avatar rendering and e2e section",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/Avatar/src/AvatarTokens.mobile.ts b/packages/components/Avatar/src/AvatarTokens.mobile.ts
index ab7fa152f9..de208618ca 100644
--- a/packages/components/Avatar/src/AvatarTokens.mobile.ts
+++ b/packages/components/Avatar/src/AvatarTokens.mobile.ts
@@ -6,15 +6,10 @@ import type { AvatarTokens } from '.';
 
 export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme) =>
   ({
-    badgeSize: 'small',
     color: t.colors.neutralForeground3,
     backgroundColor: t.colors.neutralBackground5,
     avatarOpacity: 1,
     fontFamily: t.typography.variants.body1.face,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size200,
-    size: 56,
-    iconSize: 16,
     iconColor: t.colors.neutralForeground2,
     ringBackgroundColor: t.colors.neutralBackground1,
     ringColor: t.colors.neutralStroke1,
@@ -22,6 +17,16 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     circular: {
       borderRadius: globalTokens.corner.radiusCircular,
     },
+    size: 24,
+    badgeSize: 'small',
+    badgeY: -1 - globalTokens.stroke.width20, // width20 subtracted to accomodate border width of presence badge
+    badgeX: 1 - globalTokens.stroke.width20, // sign negated to flip x-axis based on design assumption
+    iconSize: 16,
+    fontSize: globalTokens.font.size100,
+    fontWeight: globalTokens.font.weight.regular,
+    square: {
+      borderRadius: globalTokens.corner.radius40,
+    },
     // Badge is not shown for size 16 on Android.
     size16: {
       size: 16,
diff --git a/packages/components/Avatar/src/__tests__/Avatar.test.jsx b/packages/components/Avatar/src/__tests__/Avatar.test.tsx
similarity index 85%
rename from packages/components/Avatar/src/__tests__/Avatar.test.jsx
rename to packages/components/Avatar/src/__tests__/Avatar.test.tsx
index 0f1cc71dd8..494d8d6914 100644
--- a/packages/components/Avatar/src/__tests__/Avatar.test.jsx
+++ b/packages/components/Avatar/src/__tests__/Avatar.test.tsx
@@ -92,13 +92,6 @@ const edgeCaseData = [
   ['1x1', 'X'],
 ];
 
-describe('Avatar rendering', () => {
-  it('renders Avatar', () => {
-    const tree = renderer.create(<Avatar />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
-
 describe('getInitials method', () => {
   it.each(emptyData)("returns an empty string for '%s'", (text, expected) => {
     expect(getInitials(text)).toBe(expected);
@@ -140,3 +133,30 @@ describe('resolveColorfulToSpecificColor method', () => {
     expect(resolveColorfulToSpecificColor('x', undefined)).toBe('darkRed');
   });
 });
+
+describe('Avatar component tests', () => {
+  it('Avatar default', () => {
+    const tree = renderer.create(<Avatar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar circular', () => {
+    const tree = renderer.create(<Avatar shape="circular" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar square', () => {
+    const tree = renderer.create(<Avatar shape="square" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar badge', () => {
+    const tree = renderer.create(<Avatar badge={{ status: 'available', outOfOffice: false }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar ring', () => {
+    const tree = renderer.create(<Avatar active="active" activeAppearance="ring" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap
deleted file mode 100644
index 57aa9ec47d..0000000000
--- a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap
+++ /dev/null
@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Avatar rendering renders Avatar 1`] = `
-<View
-  accessibilityLabel=""
-  accessibilityRole="image"
-  accessible={true}
-  icon={null}
-  image={
-    Object {
-      "accessibilityLabel": undefined,
-      "source": undefined,
-    }
-  }
-  initials=""
-  shape="circular"
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "aspectRatio": 1,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minHeight": 24,
-      "minWidth": 24,
-      "opacity": 1,
-    }
-  }
->
-  <View
-    accessible={false}
-    style={
-      Object {
-        "alignItems": "center",
-        "aspectRatio": 1,
-        "backgroundColor": "#e6e6e6",
-        "borderColor": "#d1d1d1",
-        "borderRadius": 9999,
-        "borderWidth": 0,
-        "justifyContent": "center",
-        "minHeight": 24,
-        "minWidth": 24,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight={16}
-      bbWidth={16}
-      color={4284572001}
-      focusable={false}
-      height={16}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          Object {
-            "flex": 0,
-            "height": 16,
-            "width": 16,
-          },
-        ]
-      }
-      tintColor={4284572001}
-      vbHeight={16}
-      vbWidth={14}
-      width={16}
-    >
-      <RNSVGGroup>
-        <RNSVGPath
-          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
-          fill={
-            Array [
-              2,
-            ]
-          }
-          propList={
-            Array [
-              "fill",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
diff --git a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap
new file mode 100644
index 0000000000..0b22e5cb15
--- /dev/null
+++ b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -0,0 +1,560 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar component tests Avatar badge 1`] = `
+<View
+  accessibilityLabel=", available"
+  accessibilityRole="image"
+  accessible={true}
+  badgeStatus="available"
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  outOfOffice={false}
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    accessible={true}
+    iconPosition="before"
+    position="absolute"
+    style={
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "aspectRatio": 1,
+        "backgroundColor": "#ffffff",
+        "borderColor": "#ffffff",
+        "borderRadius": 9999,
+        "borderWidth": 1,
+        "bottom": -1,
+        "flexDirection": "row",
+        "height": 8,
+        "justifyContent": "center",
+        "paddingHorizontal": 0,
+        "position": "absolute",
+        "right": -1,
+        "width": 8,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={6}
+      bbWidth={6}
+      color={4279476494}
+      fill="none"
+      focusable={false}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "aspectRatio": 1,
+            "color": "#13a10e",
+            "height": 6,
+            "width": 6,
+          },
+          Object {
+            "flex": 0,
+            "height": 6,
+            "width": 6,
+          },
+        ]
+      }
+      tintColor={4279476494}
+      vbHeight={16}
+      vbWidth={16}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          Array [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.7-9.3l-4 4a1 1 0 01-1.41 0l-2-2a1 1 0 111.42-1.4L7 8.58l3.3-3.3a1 1 0 011.4 1.42z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar circular 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar default 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar ring 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  active="active"
+  activeAppearance="ring"
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 32,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "aspectRatio": 1,
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 9999,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "marginLeft": 2,
+        "marginTop": 2,
+        "minHeight": 32,
+        "minWidth": 32,
+      }
+    }
+  >
+    <View
+      accessible={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "aspectRatio": 1,
+          "backgroundColor": "#e6e6e6",
+          "borderColor": "#d1d1d1",
+          "borderRadius": 9999,
+          "borderWidth": 0,
+          "justifyContent": "center",
+          "marginLeft": 2,
+          "marginTop": 2,
+          "minHeight": 24,
+          "minWidth": 24,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={16}
+        bbWidth={16}
+        color={4284572001}
+        focusable={false}
+        height={16}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 16,
+              "width": 16,
+            },
+          ]
+        }
+        tintColor={4284572001}
+        vbHeight={16}
+        vbWidth={14}
+        width={16}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+            fill={
+              Array [
+                2,
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar square 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="square"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 4,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;