diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index ba828f86f..5024118a9 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -2368,6 +2368,332 @@ export default function SimplePropertyBindingDefaultValue(
 }
 `;
 
+exports[`amplify render tests icon-indices does not return negative indices for icons 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
+import {
+  EscapeHatchProps,
+  Flex,
+  FlexProps,
+  IconArrowForward,
+  IconBookmarkBorder,
+  IconMoreVert,
+  IconShare,
+  Image,
+  Text,
+} from \\"@aws-amplify/ui-react\\";
+
+export type SocialAProps = React.PropsWithChildren<
+  Partial<FlexProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function SocialA(props: SocialAProps): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Flex
+      width=\\"960px\\"
+      padding=\\"24px 24px 24px 24px\\"
+      backgroundColor=\\"rgba(255,255,255,1)\\"
+      position=\\"relative\\"
+      gap=\\"16px\\"
+      direction=\\"column\\"
+      {...rest}
+      {...getOverrideProps(overrides, \\"Flex\\")}
+    >
+      <Flex
+        padding=\\"0px 0px 0px 0px\\"
+        alignSelf=\\"stretch\\"
+        alignItems=\\"flex-start\\"
+        shrink=\\"0\\"
+        gap=\\"40px\\"
+        position=\\"relative\\"
+        direction=\\"row\\"
+        {...getOverrideProps(overrides, \\"Flex.Flex[0]\\")}
+      >
+        <Flex
+          padding=\\"0px 0px 0px 0px\\"
+          grow=\\"1\\"
+          gap=\\"16px\\"
+          width=\\"712px\\"
+          position=\\"relative\\"
+          basis=\\"712px\\"
+          direction=\\"column\\"
+          height=\\"344px\\"
+          {...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0]\\")}
+        >
+          <Flex
+            padding=\\"0px 0px 0px 0px\\"
+            alignSelf=\\"stretch\\"
+            position=\\"relative\\"
+            shrink=\\"0\\"
+            gap=\\"16px\\"
+            direction=\\"column\\"
+            {...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[0]\\")}
+          >
+            <Text
+              padding=\\"0px 0px 0px 0px\\"
+              alignSelf=\\"stretch\\"
+              color=\\"rgba(0,0,0,1)\\"
+              textAlign=\\"left\\"
+              shrink=\\"0\\"
+              display=\\"flex\\"
+              justifyContent=\\"flex-start\\"
+              fontFamily=\\"Inter\\"
+              width=\\"712px\\"
+              fontSize=\\"32px\\"
+              lineHeight=\\"40px\\"
+              position=\\"relative\\"
+              fontWeight=\\"700\\"
+              direction=\\"column\\"
+              children=\\"New Amplify Studio gives designers the ability to export UI to React code\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[0].Text[0]\\"
+              )}
+            ></Text>
+            <Flex
+              padding=\\"0px 0px 0px 0px\\"
+              alignSelf=\\"stretch\\"
+              alignItems=\\"flex-start\\"
+              shrink=\\"0\\"
+              gap=\\"16px\\"
+              position=\\"relative\\"
+              direction=\\"row\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[0].Flex[0]\\"
+              )}
+            >
+              <Text
+                padding=\\"0px 0px 0px 0px\\"
+                color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
+                textAlign=\\"left\\"
+                shrink=\\"0\\"
+                display=\\"flex\\"
+                letterSpacing=\\"0.010000000000000009px\\"
+                justifyContent=\\"flex-start\\"
+                fontFamily=\\"Inter\\"
+                fontSize=\\"16px\\"
+                lineHeight=\\"24px\\"
+                position=\\"relative\\"
+                fontWeight=\\"400\\"
+                direction=\\"column\\"
+                children=\\"Nikhil S\\"
+                {...getOverrideProps(
+                  overrides,
+                  \\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[0]\\"
+                )}
+              ></Text>
+              <Text
+                padding=\\"0px 0px 0px 0px\\"
+                color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
+                textAlign=\\"left\\"
+                shrink=\\"0\\"
+                display=\\"flex\\"
+                letterSpacing=\\"0.010000000000000009px\\"
+                justifyContent=\\"flex-start\\"
+                fontFamily=\\"Inter\\"
+                width=\\"1396px\\"
+                fontSize=\\"16px\\"
+                lineHeight=\\"24px\\"
+                position=\\"relative\\"
+                fontWeight=\\"400\\"
+                direction=\\"column\\"
+                children=\\"2nd December 2021\\"
+                {...getOverrideProps(
+                  overrides,
+                  \\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[1]\\"
+                )}
+              ></Text>
+            </Flex>
+          </Flex>
+          <Flex
+            padding=\\"0px 0px 0px 0px\\"
+            alignSelf=\\"stretch\\"
+            alignItems=\\"flex-start\\"
+            shrink=\\"0\\"
+            gap=\\"16px\\"
+            position=\\"relative\\"
+            direction=\\"row\\"
+            {...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[1]\\")}
+          >
+            <IconArrowForward
+              padding=\\"0px 0px 0px 0px\\"
+              overflow=\\"hidden\\"
+              color=\\"rgba(207.00000286102295,77.00001060962677,193.99995803833008,1)\\"
+              shrink=\\"0\\"
+              width=\\"24px\\"
+              fontSize=\\"24px\\"
+              position=\\"relative\\"
+              type=\\"arrow_forward\\"
+              height=\\"24px\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[1].IconArrowForward[0]\\"
+              )}
+            ></IconArrowForward>
+            <Text
+              padding=\\"0px 0px 0px 0px\\"
+              grow=\\"1\\"
+              color=\\"rgba(0,0,0,1)\\"
+              textAlign=\\"left\\"
+              display=\\"flex\\"
+              basis=\\"672px\\"
+              justifyContent=\\"flex-start\\"
+              fontFamily=\\"Inter\\"
+              width=\\"672px\\"
+              fontSize=\\"16px\\"
+              lineHeight=\\"24px\\"
+              position=\\"relative\\"
+              fontWeight=\\"400\\"
+              direction=\\"column\\"
+              children=\\"AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[1].Text[0]\\"
+              )}
+            ></Text>
+          </Flex>
+          <Flex
+            padding=\\"0px 0px 0px 0px\\"
+            alignItems=\\"flex-start\\"
+            shrink=\\"0\\"
+            gap=\\"16px\\"
+            width=\\"165px\\"
+            position=\\"relative\\"
+            direction=\\"row\\"
+            {...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[2]\\")}
+          >
+            <Text
+              padding=\\"0px 0px 0px 0px\\"
+              color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
+              textAlign=\\"left\\"
+              shrink=\\"0\\"
+              display=\\"flex\\"
+              letterSpacing=\\"0.010000000000000009px\\"
+              justifyContent=\\"flex-start\\"
+              fontFamily=\\"Inter\\"
+              fontSize=\\"16px\\"
+              lineHeight=\\"24px\\"
+              position=\\"relative\\"
+              fontWeight=\\"400\\"
+              direction=\\"column\\"
+              children=\\"Share\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[2].Text[0]\\"
+              )}
+            ></Text>
+            <IconBookmarkBorder
+              padding=\\"0px 0px 0px 0px\\"
+              overflow=\\"hidden\\"
+              color=\\"rgba(0,0,0,1)\\"
+              shrink=\\"0\\"
+              width=\\"24px\\"
+              fontSize=\\"24px\\"
+              position=\\"relative\\"
+              type=\\"bookmark_border\\"
+              height=\\"24px\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[2].IconBookmarkBorder[0]\\"
+              )}
+            ></IconBookmarkBorder>
+            <IconShare
+              padding=\\"0px 0px 0px 0px\\"
+              overflow=\\"hidden\\"
+              color=\\"rgba(0,0,0,1)\\"
+              shrink=\\"0\\"
+              width=\\"24px\\"
+              fontSize=\\"24px\\"
+              position=\\"relative\\"
+              type=\\"share\\"
+              height=\\"24px\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[2].IconShare[0]\\"
+              )}
+            ></IconShare>
+            <IconMoreVert
+              padding=\\"0px 0px 0px 0px\\"
+              overflow=\\"hidden\\"
+              color=\\"rgba(0,0,0,1)\\"
+              shrink=\\"0\\"
+              width=\\"24px\\"
+              fontSize=\\"24px\\"
+              position=\\"relative\\"
+              type=\\"more_vert\\"
+              height=\\"24px\\"
+              {...getOverrideProps(
+                overrides,
+                \\"Flex.Flex[0].Flex[0].Flex[2].IconMoreVert[0]\\"
+              )}
+            ></IconMoreVert>
+          </Flex>
+        </Flex>
+        <Image
+          width=\\"160px\\"
+          padding=\\"0px 0px 0px 0px\\"
+          position=\\"relative\\"
+          borderRadius=\\"16px\\"
+          shrink=\\"0\\"
+          height=\\"160px\\"
+          {...getOverrideProps(overrides, \\"Flex.Flex[0].Image[0]\\")}
+        ></Image>
+      </Flex>
+      <Flex
+        padding=\\"0px 0px 0px 0px\\"
+        alignSelf=\\"stretch\\"
+        alignItems=\\"flex-start\\"
+        shrink=\\"0\\"
+        gap=\\"16px\\"
+        position=\\"relative\\"
+        direction=\\"row\\"
+        {...getOverrideProps(overrides, \\"Flex.Flex[1]\\")}
+      >
+        <IconArrowForward
+          padding=\\"0px 0px 0px 0px\\"
+          overflow=\\"hidden\\"
+          color=\\"rgba(0,0,0,1)\\"
+          shrink=\\"0\\"
+          width=\\"24px\\"
+          fontSize=\\"24px\\"
+          position=\\"relative\\"
+          type=\\"arrow_forward\\"
+          height=\\"24px\\"
+          {...getOverrideProps(overrides, \\"Flex.Flex[1].IconArrowForward[0]\\")}
+        ></IconArrowForward>
+        <Text
+          padding=\\"0px 0px 0px 0px\\"
+          grow=\\"1\\"
+          color=\\"rgba(0,0,0,1)\\"
+          textAlign=\\"left\\"
+          display=\\"flex\\"
+          letterSpacing=\\"0.010000000000000009px\\"
+          textDecoration=\\"underline\\"
+          basis=\\"872px\\"
+          justifyContent=\\"flex-start\\"
+          fontFamily=\\"Inter\\"
+          width=\\"872px\\"
+          fontSize=\\"16px\\"
+          lineHeight=\\"24px\\"
+          position=\\"relative\\"
+          fontWeight=\\"400\\"
+          direction=\\"column\\"
+          children=\\"Read more\\"
+          {...getOverrideProps(overrides, \\"Flex.Flex[1].Text[0]\\")}
+        ></Text>
+      </Flex>
+    </Flex>
+  );
+}
+"
+`;
+
 exports[`amplify render tests primitives Built-in Iconset 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
@@ -2392,10 +2718,10 @@ export default function MyIcons(props: MyIconsProps): React.ReactElement {
     /* @ts-ignore: TS2322 */
     <View {...rest} {...getOverrideProps(overrides, \\"View\\")}>
       <IconCloud
-        {...getOverrideProps(overrides, \\"View.IconCloud[-1]\\")}
+        {...getOverrideProps(overrides, \\"View.IconCloud[0]\\")}
       ></IconCloud>
       <IconBrightness_1
-        {...getOverrideProps(overrides, \\"View.IconBrightness_1[-1]\\")}
+        {...getOverrideProps(overrides, \\"View.IconBrightness_1[0]\\")}
       ></IconBrightness_1>
     </View>
   );
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
index cd0f2d06f..4a25b22ea 100644
--- a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
+++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -410,4 +410,10 @@ describe('amplify render tests', () => {
       expect(generateWithAmplifyRenderer('builtInIconset').componentText).toMatchSnapshot();
     });
   });
+
+  describe('icon-indices', () => {
+    it('does not return negative indices for icons', () => {
+      expect(generateWithAmplifyRenderer('iconBug').componentText).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/iconBug.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/iconBug.json
new file mode 100644
index 000000000..8a46efdcb
--- /dev/null
+++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/iconBug.json
@@ -0,0 +1,745 @@
+{
+  "appId": "d1m9wl849zeqa6",
+  "bindingProperties": {},
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "children": [
+                {
+                  "children": [],
+                  "componentType": "Text",
+                  "name": "New Amplify Studio gives designers the ability to export UI to React code",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "alignSelf": {
+                      "value": "stretch"
+                    },
+                    "color": {
+                      "value": "rgba(0,0,0,1)"
+                    },
+                    "textAlign": {
+                      "value": "left"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "display": {
+                      "value": "flex"
+                    },
+                    "label": {
+                      "value": "New Amplify Studio gives designers the ability to export UI to React code"
+                    },
+                    "justifyContent": {
+                      "value": "flex-start"
+                    },
+                    "fontFamily": {
+                      "value": "Inter"
+                    },
+                    "width": {
+                      "value": "712px"
+                    },
+                    "fontSize": {
+                      "value": "32px"
+                    },
+                    "lineHeight": {
+                      "value": "40px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "fontWeight": {
+                      "value": "700"
+                    },
+                    "direction": {
+                      "value": "column"
+                    }
+                  }
+                },
+                {
+                  "children": [
+                    {
+                      "children": [],
+                      "componentType": "Text",
+                      "name": "Nikhil S",
+                      "properties": {
+                        "padding": {
+                          "value": "0px 0px 0px 0px"
+                        },
+                        "color": {
+                          "value": "rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)"
+                        },
+                        "textAlign": {
+                          "value": "left"
+                        },
+                        "shrink": {
+                          "value": "0"
+                        },
+                        "display": {
+                          "value": "flex"
+                        },
+                        "letterSpacing": {
+                          "value": "0.010000000000000009px"
+                        },
+                        "label": {
+                          "value": "Nikhil S"
+                        },
+                        "justifyContent": {
+                          "value": "flex-start"
+                        },
+                        "fontFamily": {
+                          "value": "Inter"
+                        },
+                        "fontSize": {
+                          "value": "16px"
+                        },
+                        "lineHeight": {
+                          "value": "24px"
+                        },
+                        "position": {
+                          "value": "relative"
+                        },
+                        "fontWeight": {
+                          "value": "400"
+                        },
+                        "direction": {
+                          "value": "column"
+                        }
+                      }
+                    },
+                    {
+                      "children": [],
+                      "componentType": "Text",
+                      "name": "2nd December 2021",
+                      "properties": {
+                        "padding": {
+                          "value": "0px 0px 0px 0px"
+                        },
+                        "color": {
+                          "value": "rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)"
+                        },
+                        "textAlign": {
+                          "value": "left"
+                        },
+                        "shrink": {
+                          "value": "0"
+                        },
+                        "display": {
+                          "value": "flex"
+                        },
+                        "letterSpacing": {
+                          "value": "0.010000000000000009px"
+                        },
+                        "label": {
+                          "value": "2nd December 2021"
+                        },
+                        "justifyContent": {
+                          "value": "flex-start"
+                        },
+                        "fontFamily": {
+                          "value": "Inter"
+                        },
+                        "width": {
+                          "value": "1396px"
+                        },
+                        "fontSize": {
+                          "value": "16px"
+                        },
+                        "lineHeight": {
+                          "value": "24px"
+                        },
+                        "position": {
+                          "value": "relative"
+                        },
+                        "fontWeight": {
+                          "value": "400"
+                        },
+                        "direction": {
+                          "value": "column"
+                        }
+                      }
+                    }
+                  ],
+                  "componentType": "Flex",
+                  "name": "Frame",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "alignSelf": {
+                      "value": "stretch"
+                    },
+                    "alignItems": {
+                      "value": "flex-start"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "gap": {
+                      "value": "16px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "direction": {
+                      "value": "row"
+                    }
+                  }
+                }
+              ],
+              "componentType": "Flex",
+              "name": "Headline",
+              "properties": {
+                "padding": {
+                  "value": "0px 0px 0px 0px"
+                },
+                "alignSelf": {
+                  "value": "stretch"
+                },
+                "position": {
+                  "value": "relative"
+                },
+                "shrink": {
+                  "value": "0"
+                },
+                "gap": {
+                  "value": "16px"
+                },
+                "direction": {
+                  "value": "column"
+                }
+              }
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "componentType": "IconArrowForward",
+                  "name": "Iconynp",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "overflow": {
+                      "value": "hidden"
+                    },
+                    "color": {
+                      "value": "rgba(207.00000286102295,77.00001060962677,193.99995803833008,1)"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "width": {
+                      "value": "24px"
+                    },
+                    "fontSize": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "type": {
+                      "value": "arrow_forward"
+                    },
+                    "height": {
+                      "value": "24px"
+                    }
+                  }
+                },
+                {
+                  "children": [],
+                  "componentType": "Text",
+                  "name": "AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "grow": {
+                      "value": "1"
+                    },
+                    "color": {
+                      "value": "rgba(0,0,0,1)"
+                    },
+                    "textAlign": {
+                      "value": "left"
+                    },
+                    "display": {
+                      "value": "flex"
+                    },
+                    "label": {
+                      "value": "AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user."
+                    },
+                    "basis": {
+                      "value": "672px"
+                    },
+                    "justifyContent": {
+                      "value": "flex-start"
+                    },
+                    "fontFamily": {
+                      "value": "Inter"
+                    },
+                    "width": {
+                      "value": "672px"
+                    },
+                    "fontSize": {
+                      "value": "16px"
+                    },
+                    "lineHeight": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "fontWeight": {
+                      "value": "400"
+                    },
+                    "direction": {
+                      "value": "column"
+                    }
+                  }
+                }
+              ],
+              "componentType": "Flex",
+              "name": "Article",
+              "properties": {
+                "padding": {
+                  "value": "0px 0px 0px 0px"
+                },
+                "alignSelf": {
+                  "value": "stretch"
+                },
+                "alignItems": {
+                  "value": "flex-start"
+                },
+                "shrink": {
+                  "value": "0"
+                },
+                "gap": {
+                  "value": "16px"
+                },
+                "position": {
+                  "value": "relative"
+                },
+                "direction": {
+                  "value": "row"
+                }
+              }
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "componentType": "Text",
+                  "name": "Sharedgc",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "color": {
+                      "value": "rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)"
+                    },
+                    "textAlign": {
+                      "value": "left"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "display": {
+                      "value": "flex"
+                    },
+                    "letterSpacing": {
+                      "value": "0.010000000000000009px"
+                    },
+                    "label": {
+                      "value": "Share"
+                    },
+                    "justifyContent": {
+                      "value": "flex-start"
+                    },
+                    "fontFamily": {
+                      "value": "Inter"
+                    },
+                    "fontSize": {
+                      "value": "16px"
+                    },
+                    "lineHeight": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "fontWeight": {
+                      "value": "400"
+                    },
+                    "direction": {
+                      "value": "column"
+                    }
+                  }
+                },
+                {
+                  "children": [],
+                  "componentType": "IconBookmarkBorder",
+                  "name": "Iconsrv",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "overflow": {
+                      "value": "hidden"
+                    },
+                    "color": {
+                      "value": "rgba(0,0,0,1)"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "width": {
+                      "value": "24px"
+                    },
+                    "fontSize": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "type": {
+                      "value": "bookmark_border"
+                    },
+                    "height": {
+                      "value": "24px"
+                    }
+                  }
+                },
+                {
+                  "children": [],
+                  "componentType": "IconShare",
+                  "name": "Iconwdz",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "overflow": {
+                      "value": "hidden"
+                    },
+                    "color": {
+                      "value": "rgba(0,0,0,1)"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "width": {
+                      "value": "24px"
+                    },
+                    "fontSize": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "type": {
+                      "value": "share"
+                    },
+                    "height": {
+                      "value": "24px"
+                    }
+                  }
+                },
+                {
+                  "children": [],
+                  "componentType": "IconMoreVert",
+                  "name": "Iconxpr",
+                  "properties": {
+                    "padding": {
+                      "value": "0px 0px 0px 0px"
+                    },
+                    "overflow": {
+                      "value": "hidden"
+                    },
+                    "color": {
+                      "value": "rgba(0,0,0,1)"
+                    },
+                    "shrink": {
+                      "value": "0"
+                    },
+                    "width": {
+                      "value": "24px"
+                    },
+                    "fontSize": {
+                      "value": "24px"
+                    },
+                    "position": {
+                      "value": "relative"
+                    },
+                    "type": {
+                      "value": "more_vert"
+                    },
+                    "height": {
+                      "value": "24px"
+                    }
+                  }
+                }
+              ],
+              "componentType": "Flex",
+              "name": "Shareakz",
+              "properties": {
+                "padding": {
+                  "value": "0px 0px 0px 0px"
+                },
+                "alignItems": {
+                  "value": "flex-start"
+                },
+                "shrink": {
+                  "value": "0"
+                },
+                "gap": {
+                  "value": "16px"
+                },
+                "width": {
+                  "value": "165px"
+                },
+                "position": {
+                  "value": "relative"
+                },
+                "direction": {
+                  "value": "row"
+                }
+              }
+            }
+          ],
+          "componentType": "Flex",
+          "name": "Text",
+          "properties": {
+            "padding": {
+              "value": "0px 0px 0px 0px"
+            },
+            "grow": {
+              "value": "1"
+            },
+            "gap": {
+              "value": "16px"
+            },
+            "width": {
+              "value": "712px"
+            },
+            "position": {
+              "value": "relative"
+            },
+            "basis": {
+              "value": "712px"
+            },
+            "direction": {
+              "value": "column"
+            },
+            "height": {
+              "value": "344px"
+            }
+          }
+        },
+        {
+          "children": [],
+          "componentType": "Image",
+          "name": "image",
+          "properties": {
+            "width": {
+              "value": "160px"
+            },
+            "padding": {
+              "value": "0px 0px 0px 0px"
+            },
+            "position": {
+              "value": "relative"
+            },
+            "borderRadius": {
+              "value": "16px"
+            },
+            "shrink": {
+              "value": "0"
+            },
+            "height": {
+              "value": "160px"
+            }
+          }
+        }
+      ],
+      "componentType": "Flex",
+      "name": "Body",
+      "properties": {
+        "padding": {
+          "value": "0px 0px 0px 0px"
+        },
+        "alignSelf": {
+          "value": "stretch"
+        },
+        "alignItems": {
+          "value": "flex-start"
+        },
+        "shrink": {
+          "value": "0"
+        },
+        "gap": {
+          "value": "40px"
+        },
+        "position": {
+          "value": "relative"
+        },
+        "direction": {
+          "value": "row"
+        }
+      }
+    },
+    {
+      "children": [
+        {
+          "children": [],
+          "componentType": "IconArrowForward",
+          "name": "Iconlxm",
+          "properties": {
+            "padding": {
+              "value": "0px 0px 0px 0px"
+            },
+            "overflow": {
+              "value": "hidden"
+            },
+            "color": {
+              "value": "rgba(0,0,0,1)"
+            },
+            "shrink": {
+              "value": "0"
+            },
+            "width": {
+              "value": "24px"
+            },
+            "fontSize": {
+              "value": "24px"
+            },
+            "position": {
+              "value": "relative"
+            },
+            "type": {
+              "value": "arrow_forward"
+            },
+            "height": {
+              "value": "24px"
+            }
+          }
+        },
+        {
+          "children": [],
+          "componentType": "Text",
+          "name": "Read morepbe",
+          "properties": {
+            "padding": {
+              "value": "0px 0px 0px 0px"
+            },
+            "grow": {
+              "value": "1"
+            },
+            "color": {
+              "value": "rgba(0,0,0,1)"
+            },
+            "textAlign": {
+              "value": "left"
+            },
+            "display": {
+              "value": "flex"
+            },
+            "letterSpacing": {
+              "value": "0.010000000000000009px"
+            },
+            "textDecoration": {
+              "value": "underline"
+            },
+            "label": {
+              "value": "Read more"
+            },
+            "basis": {
+              "value": "872px"
+            },
+            "justifyContent": {
+              "value": "flex-start"
+            },
+            "fontFamily": {
+              "value": "Inter"
+            },
+            "width": {
+              "value": "872px"
+            },
+            "fontSize": {
+              "value": "16px"
+            },
+            "lineHeight": {
+              "value": "24px"
+            },
+            "position": {
+              "value": "relative"
+            },
+            "fontWeight": {
+              "value": "400"
+            },
+            "direction": {
+              "value": "column"
+            }
+          }
+        }
+      ],
+      "componentType": "Flex",
+      "name": "Read moreudv",
+      "properties": {
+        "padding": {
+          "value": "0px 0px 0px 0px"
+        },
+        "alignSelf": {
+          "value": "stretch"
+        },
+        "alignItems": {
+          "value": "flex-start"
+        },
+        "shrink": {
+          "value": "0"
+        },
+        "gap": {
+          "value": "16px"
+        },
+        "position": {
+          "value": "relative"
+        },
+        "direction": {
+          "value": "row"
+        }
+      }
+    }
+  ],
+  "componentType": "Flex",
+  "createdAt": "2021-12-01T00:37:25.832Z",
+  "environmentName": "staging",
+  "id": "c-8jT6tlUKxBuGXe7wLt",
+  "modifiedAt": "2021-12-01T00:37:25.832Z",
+  "name": "SocialA",
+  "overrides": {},
+  "properties": {
+    "width": {
+      "value": "960px"
+    },
+    "padding": {
+      "value": "24px 24px 24px 24px"
+    },
+    "backgroundColor": {
+      "value": "rgba(255,255,255,1)"
+    },
+    "position": {
+      "value": "relative"
+    },
+    "gap": {
+      "value": "16px"
+    },
+    "direction": {
+      "value": "column"
+    }
+  },
+  "sourceId": "1715:4398",
+  "variants": []
+}
\ No newline at end of file
diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts
index f2848c2fa..353c56a22 100644
--- a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts
+++ b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -70,14 +70,23 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
     const renderChildren = (children: StudioComponentChild[]) => children.map((child) => this.renderJsx(child, node));
 
     if (isBuiltInIcon(component.componentType)) {
-      return new ReactComponentWithChildrenRenderer<IconProps>(
-        {
-          ...component,
-          componentType: iconsetPascalNameMapping.get(component.componentType) || component.componentType,
-        },
+      const { componentType } = component;
+
+      // need to reassign param so object equality comparison works when finding override index
+      // eslint-disable-next-line no-param-reassign
+      component.componentType = iconsetPascalNameMapping.get(component.componentType) || component.componentType;
+
+      const renderedComponent = new ReactComponentWithChildrenRenderer<IconProps>(
+        component,
         this.importCollection,
         parent,
       ).renderElement(renderChildren);
+
+      // return componentType to original value
+      // eslint-disable-next-line no-param-reassign
+      component.componentType = componentType;
+
+      return renderedComponent;
     }
 
     // add Primitive in alphabetical order