diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx
index f1c7194c43..3d14e4a01b 100644
--- a/src/components/List/ListIcon.tsx
+++ b/src/components/List/ListIcon.tsx
@@ -19,6 +19,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Size of the icon.
+   */
+  size?: number;
 };
 
 const ICON_SIZE = 24;
@@ -34,7 +38,7 @@ const ICON_SIZE = 24;
  * const MyComponent = () => (
  *   <>
  *     <List.Icon color={MD3Colors.tertiary70} icon="folder" />
- *     <List.Icon color={MD3Colors.tertiary70} icon="equal" />
+ *     <List.Icon color={MD3Colors.tertiary70} size={20} icon="equal" />
  *     <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
  *   </>
  * );
@@ -47,15 +51,17 @@ const ListIcon = ({
   color: iconColor,
   style,
   theme: themeOverrides,
+  size,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const iconSize = size ? size : ICON_SIZE;
 
   return (
     <View
       style={[theme.isV3 ? styles.itemV3 : styles.item, style]}
       pointerEvents="box-none"
     >
-      <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
+      <Icon source={icon} size={iconSize} color={iconColor} theme={theme} />
     </View>
   );
 };
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index 036697f9ec..1b427355d0 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -159,3 +159,30 @@ it('renders list item with custom content style', () => {
 
   expect(getByTestId('list-item-content')).toHaveStyle(styles.content);
 });
+
+it('renders list item with custom icon size with left and right items', () => {
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      left={() => <Text>GG</Text>}
+      right={() => <ListIcon size={10} icon="folder" />}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders list item on left with a icon that has a custom size', () => {
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      left={() => <ListIcon size={10} icon="folder" />}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index 514fc61c78..f31e4e65f0 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -1,5 +1,194 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list item on left with a icon that has a custom size 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      [
+        {
+          "paddingRight": 24,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+  testID="list-item"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "marginVertical": 6,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontSize": 10,
+            },
+            [
+              {
+                "lineHeight": 10,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+            {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        󰉋
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "paddingLeft": 16,
+          },
+          {
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+      testID="list-item-content"
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 16,
+              },
+              {
+                "color": "rgba(28, 27, 31, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        First Item
+      </Text>
+      <Text
+        numberOfLines={2}
+        onTextLayout={[Function]}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "rgba(73, 69, 79, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Item description
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list item with custom description 1`] = `
 <View
   accessibilityState={
@@ -327,6 +516,198 @@ exports[`renders list item with custom description 1`] = `
 </View>
 `;
 
+exports[`renders list item with custom icon size with left and right items 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      false,
+      [
+        {
+          "paddingRight": 24,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+  testID="list-item"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "marginVertical": 6,
+        "width": "100%",
+      }
+    }
+  >
+    <Text>
+      GG
+    </Text>
+    <View
+      style={
+        [
+          {
+            "paddingLeft": 16,
+          },
+          {
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+      testID="list-item-content"
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 16,
+              },
+              {
+                "color": "rgba(28, 27, 31, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        First Item
+      </Text>
+      <Text
+        numberOfLines={2}
+        onTextLayout={[Function]}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+            },
+            {
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "rgba(73, 69, 79, 1)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Item description
+      </Text>
+    </View>
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
+          [
+            {
+              "color": "rgba(28, 27, 31, 1)",
+              "fontSize": 10,
+            },
+            [
+              {
+                "lineHeight": 10,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+            {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        󰉋
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list item with custom title and description styles 1`] = `
 <View
   accessibilityState={