diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
index f7fd27c3f..a421738ce 100644
--- a/playroom/snippets.tsx
+++ b/playroom/snippets.tsx
@@ -945,9 +945,9 @@ const tabsSnippets: Array<Snippet> = [
             selectedIndex={getState('tabIndex', 0)}
             onChange={setState('tabIndex')}
             tabs={[
-                {text: 'Tab 1', icon: <IconAppointmentRegular color="currentColor" />},
-                {text: 'Tab 2', icon: <IconBrainRegular color="currentColor" />},
-                {text: 'Tab 3', icon: <IconBusRegular color="currentColor" />},
+                {text: 'Tab 1', Icon: IconAppointmentRegular},
+                {text: 'Tab 2', Icon: IconBrainRegular},
+                {text: 'Tab 3', Icon: IconBusRegular},
             ]}
         />`,
     },
@@ -1440,20 +1440,20 @@ const layoutSnippets: Array<Snippet> = [
                 {
                     categoryName: "Personal information",
                     settings: [
-                    { title: "Personal details", icon: <IconUserAccountRegular /> },
-                    { title: "Security", icon: <IconLockClosedRegular /> },
+                    { title: "Personal details", asset: <IconUserAccountRegular /> },
+                    { title: "Security", asset: <IconLockClosedRegular /> },
                     {
                         title: "Payment methods",
-                        icon: <IconCreditCardVisaRegular />,
+                        asset: <IconCreditCardVisaRegular />,
                     },
                     ],
                 },
                 {
                     categoryName: "Configuration",
                     settings: [
-                    { title: "Notifications", icon: <IconBellRegular /> },
-                    { title: "FAQs", icon: <IconSupportAgentRegular /> },
-                    { title: "About", icon: <IconInformationUserRegular /> },
+                    { title: "Notifications", asset: <IconBellRegular /> },
+                    { title: "FAQs", asset: <IconSupportAgentRegular /> },
+                    { title: "About", asset: <IconInformationUserRegular /> },
                     ],
                 },
                 ].map((category) => (
@@ -1619,21 +1619,21 @@ const exampleScreens: Array<Snippet> = [
                     settings: [
                       {
                         title: "Personal details",
-                        icon: <IconUserAccountRegular />,
+                        asset: <IconUserAccountRegular />,
                       },
-                      { title: "Security", icon: <IconLockClosedRegular /> },
+                      { title: "Security", asset: <IconLockClosedRegular /> },
                       {
                         title: "Payment methods",
-                        icon: <IconCreditCardVisaRegular />,
+                        asset: <IconCreditCardVisaRegular />,
                       },
                     ],
                   },
                   {
                     categoryName: "Configuration",
                     settings: [
-                      { title: "Notifications", icon: <IconBellRegular /> },
-                      { title: "FAQs", icon: <IconSupportAgentRegular /> },
-                      { title: "About", icon: <IconInformationUserRegular /> },
+                      { title: "Notifications", asset: <IconBellRegular /> },
+                      { title: "FAQs", asset: <IconSupportAgentRegular /> },
+                      { title: "About", asset: <IconInformationUserRegular /> },
                     ],
                   },
                 ].map((category) => (
@@ -2647,7 +2647,7 @@ const alertSnippets = [
             forceWeb: true,
             showCancel: true,
             link: <ButtonLink href="https://google.com">Link</ButtonLink>,
-            icon: <IconInformationUserLight color={colors.brand} />,
+            asset: <IconInformationUserLight color={colors.brand} />,
         })
     }
 >
diff --git a/src/__acceptance_tests__/__ssr_pages__/card.tsx b/src/__acceptance_tests__/__ssr_pages__/card.tsx
index e235d13d5..ee4f7adac 100644
--- a/src/__acceptance_tests__/__ssr_pages__/card.tsx
+++ b/src/__acceptance_tests__/__ssr_pages__/card.tsx
@@ -21,7 +21,7 @@ const CardsTest = (): JSX.Element => (
             title="title"
             subtitle="subtitle"
             description="description"
-            icon={<IconAcademicLight />}
+            asset={<IconAcademicLight />}
             button={
                 <ButtonPrimary small href="https://google.com">
                     Action
diff --git a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
index 1f2ad0135..3d6f84fd0 100644
--- a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
+++ b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
@@ -80,7 +80,7 @@ export const Default: StoryComponent<Args> = ({
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices"
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <GridLayout
                         template="8+4"
diff --git a/src/__private_stories__/skin-components-story.tsx b/src/__private_stories__/skin-components-story.tsx
index ac0122d5b..301f51981 100644
--- a/src/__private_stories__/skin-components-story.tsx
+++ b/src/__private_stories__/skin-components-story.tsx
@@ -161,7 +161,7 @@ export const Default: StoryComponent<Args> = ({variant}) => {
 
                         {/** Callout */}
                         <Callout
-                            icon={<IconBoxLight />}
+                            asset={<IconBoxLight />}
                             onClose={() => {}}
                             title="Title"
                             description="Description"
diff --git a/src/__stories__/callout-story.tsx b/src/__stories__/callout-story.tsx
index ef71df4e8..e27ab7084 100644
--- a/src/__stories__/callout-story.tsx
+++ b/src/__stories__/callout-story.tsx
@@ -42,7 +42,7 @@ export const Default: StoryComponent<Args> = ({title, description, asset, action
         <ResponsiveLayout isInverse={inverse}>
             <Box paddingY={24}>
                 <Callout
-                    icon={asset ? <IconBoxLight /> : undefined}
+                    asset={asset ? <IconBoxLight /> : undefined}
                     onClose={closable ? () => {} : undefined}
                     title={title}
                     description={description}
diff --git a/src/__stories__/card-action-icon-button-story.tsx b/src/__stories__/card-action-icon-button-story.tsx
index 6f6444ecd..27c629d56 100644
--- a/src/__stories__/card-action-icon-button-story.tsx
+++ b/src/__stories__/card-action-icon-button-story.tsx
@@ -66,7 +66,7 @@ export const Default: StoryComponent = () => {
                     <MyCustomCardActionComponent key="2" />,
                     <MyCustomCardActionToggleComponent key="3" />,
                 ]}
-                icon={
+                asset={
                     <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
                         <IconShopRegular color={skinVars.colors.brand} />
                     </Circle>
diff --git a/src/__stories__/carousel-story.tsx b/src/__stories__/carousel-story.tsx
index baa615311..a8365fd85 100644
--- a/src/__stories__/carousel-story.tsx
+++ b/src/__stories__/carousel-story.tsx
@@ -62,7 +62,7 @@ export const Default: StoryComponent<Args> = ({
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices"
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <Carousel
                         dataAttributes={{testid: 'carousel-story'}}
diff --git a/src/__stories__/centered-carousel-story.tsx b/src/__stories__/centered-carousel-story.tsx
index 8d86c8498..fc80ebf87 100644
--- a/src/__stories__/centered-carousel-story.tsx
+++ b/src/__stories__/centered-carousel-story.tsx
@@ -34,7 +34,7 @@ export const Default: StoryComponent<Args> = ({numItems, initialActiveItem}) =>
                 <Stack space={16}>
                     <Callout
                         description="Resize the window to see centerd carousel style in mobile. Arrow controls disappear in touch devices."
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <CenteredCarousel
                         onPageChange={setPageInfo}
diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx
index c72dde78f..b0170c1df 100644
--- a/src/__stories__/data-card-story.tsx
+++ b/src/__stories__/data-card-story.tsx
@@ -57,15 +57,15 @@ export const Default: StoryComponent<DataCardArgs> = ({
     topAction,
     aspectRatio,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -92,7 +92,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
     return (
         <DataCard
             onClose={closable ? () => {} : undefined}
-            icon={icon}
+            asset={assetElement}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
             title={title}
@@ -191,7 +191,7 @@ export const Group: StoryComponent = () => {
                             title="Title"
                             subtitle="Subtitle"
                             description="Description"
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                 </Circle>
@@ -201,7 +201,7 @@ export const Group: StoryComponent = () => {
                         <DataCard
                             title="Title"
                             description="Description"
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                 </Circle>
diff --git a/src/__stories__/dialog-story.tsx b/src/__stories__/dialog-story.tsx
index 6bd6e8df8..247b41863 100644
--- a/src/__stories__/dialog-story.tsx
+++ b/src/__stories__/dialog-story.tsx
@@ -120,7 +120,7 @@ export const Dialog: StoryComponent<DialogArgs> = ({
                                 </Stack>
                             ) : undefined,
                             link: link ? <ButtonLink href="https://google.com">Link</ButtonLink> : undefined,
-                            icon: asset ? (
+                            asset: asset ? (
                                 <IconInformationUserLight color={skinVars.colors.brand} />
                             ) : undefined,
                             onAccept: onAccept ? () => console.log('Accepted') : undefined,
diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx
index ac8a4b4ba..4f705aa8e 100644
--- a/src/__stories__/display-data-card-story.tsx
+++ b/src/__stories__/display-data-card-story.tsx
@@ -66,19 +66,19 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     isInverse,
     aspectRatio,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle + icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle + image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     } else if (asset === 'icon') {
-        icon = <IconInvoicePlanFileRegular size={40} />;
+        assetElement = <IconInvoicePlanFileRegular size={40} />;
     } else if (asset === 'image') {
-        icon = <Image src={avatarImg} width={40} height={40} />;
+        assetElement = <Image src={avatarImg} width={40} height={40} />;
     }
 
     const interactiveActions = {
@@ -134,7 +134,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
                       ]
                     : undefined
             }
-            icon={icon}
+            asset={assetElement}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
             title={title}
@@ -221,7 +221,7 @@ export const Group: StoryComponent = () => {
                             }
                         />,
                         <DisplayDataCard
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
                                 </Circle>
diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx
index 50a1c439f..59aa36531 100644
--- a/src/__stories__/display-media-card-story.tsx
+++ b/src/__stories__/display-media-card-story.tsx
@@ -76,15 +76,15 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     emptySource,
     inverse,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle with icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle with image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -146,7 +146,7 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
             <Box padding={16}>
                 <DisplayMediaCard
                     {...backgroundProps}
-                    icon={icon}
+                    asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
                     title={title}
diff --git a/src/__stories__/empty-state-card-story.tsx b/src/__stories__/empty-state-card-story.tsx
index 9081e4b94..51c518e9d 100644
--- a/src/__stories__/empty-state-card-story.tsx
+++ b/src/__stories__/empty-state-card-story.tsx
@@ -28,15 +28,15 @@ export const Default: StoryComponent<Args> = ({actions, title, description, asse
 
     if (asset === 'Icon') {
         assetProps = {
-            icon: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
+            asset: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
         };
     } else if (asset === 'icon as Image') {
         assetProps = {
-            icon: <Image src={avatars4Img} />,
+            asset: <Image src={avatars4Img} />,
         };
     } else if (asset === 'icon as img') {
         assetProps = {
-            icon: <img src={avatars4Img} width="100%" />,
+            asset: <img src={avatars4Img} width="100%" />,
         };
     } else {
         assetProps = {
diff --git a/src/__stories__/empty-state-story.tsx b/src/__stories__/empty-state-story.tsx
index 6e558aa40..f5bd1ac40 100644
--- a/src/__stories__/empty-state-story.tsx
+++ b/src/__stories__/empty-state-story.tsx
@@ -50,15 +50,15 @@ export const WithIcon: StoryComponent<WithIconArgs> = ({actions, asset}) => {
     let assetProps;
     if (asset === 'Icon') {
         assetProps = {
-            icon: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
+            asset: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
         };
     } else if (asset === 'Image') {
         assetProps = {
-            icon: <Image src={avatars4Img} />,
+            asset: <Image src={avatars4Img} />,
         };
     } else {
         assetProps = {
-            icon: <img src={avatars4Img} width="100%" />,
+            asset: <img src={avatars4Img} width="100%" />,
         };
     }
 
diff --git a/src/__stories__/feedback-screen-story.tsx b/src/__stories__/feedback-screen-story.tsx
index 17548a436..52bc27a6f 100644
--- a/src/__stories__/feedback-screen-story.tsx
+++ b/src/__stories__/feedback-screen-story.tsx
@@ -103,7 +103,7 @@ export const FeedbackScreenStory: StoryComponent<FeedbackScreenArgs> = ({
                             multipleParagraphs ? [description, 'paragraph 2', 'paragraph 3'] : description
                         }
                         animateText={animateText}
-                        icon={icon ? <IconOrders /> : undefined}
+                        asset={icon ? <IconOrders /> : undefined}
                         imageUrl={imageUrl ?? undefined}
                         imageFit={imageFit}
                         primaryButton={
diff --git a/src/__stories__/grid-story.tsx b/src/__stories__/grid-story.tsx
index f4bc73945..6f1b26ab1 100644
--- a/src/__stories__/grid-story.tsx
+++ b/src/__stories__/grid-story.tsx
@@ -39,7 +39,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                     <Grid columns={3} rows={3} gap={gap}>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -50,7 +50,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -61,7 +61,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -72,7 +72,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem columnSpan={2}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -83,7 +83,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -94,7 +94,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem columnSpan="full">
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -111,7 +111,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                     <Grid columns={3} rows={3} gap={gap}>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -122,7 +122,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem rowSpan={2}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -133,7 +133,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem rowSpan={3}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -144,7 +144,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -155,7 +155,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -166,7 +166,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -183,7 +183,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                     <Grid columns={3} rows={3} gap={gap}>
                         <GridItem columnSpan={2}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -194,7 +194,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem rowSpan={3}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -205,7 +205,7 @@ export const Default: StoryComponent<Args> = ({gap}) => (
                         </GridItem>
                         <GridItem rowSpan={2} columnSpan={2}>
                             <SnapCard
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconAcademicRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -240,7 +240,7 @@ export const AutoColumns: StoryComponent<AutoColumnsArgs> = ({gap, columnsMinSiz
                 {Array.from({length: numItems}, (_, idx) => (
                     <SnapCard
                         key={idx}
-                        icon={
+                        asset={
                             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                 <IconAcademicRegular color={skinVars.colors.brand} />
                             </Circle>
diff --git a/src/__stories__/header-story.tsx b/src/__stories__/header-story.tsx
index 58e7a6195..f91e05203 100644
--- a/src/__stories__/header-story.tsx
+++ b/src/__stories__/header-story.tsx
@@ -91,7 +91,7 @@ export const Default: StoryComponent<Args> = ({
             />
             <ResponsiveLayout>
                 <Callout
-                    icon={<IconInformationUserLight />}
+                    asset={<IconInformationUserLight />}
                     title="Note:"
                     description="A HeaderLayout can be rendered without a Header (in webviews) to allow delegating the
                         header visualization to the native app. For example, in Novum App (Mi Movistar, Meu
diff --git a/src/__stories__/media-card-story.tsx b/src/__stories__/media-card-story.tsx
index c5bea2f4d..c18adde3b 100644
--- a/src/__stories__/media-card-story.tsx
+++ b/src/__stories__/media-card-story.tsx
@@ -61,15 +61,15 @@ export const Default: StoryComponent<Args> = ({
     asset,
     emptySource,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle with icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle with image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -98,7 +98,7 @@ export const Default: StoryComponent<Args> = ({
             title={title}
             subtitle={subtitle}
             description={description}
-            icon={icon}
+            asset={assetElement}
             media={
                 media === 'video' ? (
                     <Video
diff --git a/src/__stories__/mosaic-story.tsx b/src/__stories__/mosaic-story.tsx
index 41c49b491..703a14b27 100644
--- a/src/__stories__/mosaic-story.tsx
+++ b/src/__stories__/mosaic-story.tsx
@@ -54,7 +54,7 @@ export const HorizontalMosaicStory: StoryComponent<HorizontalMosaicProps> = ({it
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices"
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <HorizontalMosaic
                         items={Array.from({length: items}, (_, index) => renderItem(index + 1))}
diff --git a/src/__stories__/naked-card-story.tsx b/src/__stories__/naked-card-story.tsx
index 09f5e4353..197301002 100644
--- a/src/__stories__/naked-card-story.tsx
+++ b/src/__stories__/naked-card-story.tsx
@@ -66,15 +66,15 @@ export const Default: StoryComponent<Args> = ({
     asset,
     emptySource,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle with icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle with image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -114,7 +114,7 @@ export const Default: StoryComponent<Args> = ({
                             <Image circular src={emptySource ? '' : IMAGE_SRC} />
                         )
                     }
-                    icon={icon}
+                    asset={assetElement}
                     {...interactiveActions}
                     extra={extra ? <Placeholder /> : undefined}
                     onClose={closable ? () => {} : undefined}
diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx
index 99b52940b..d134708ef 100644
--- a/src/__stories__/poster-card-story.tsx
+++ b/src/__stories__/poster-card-story.tsx
@@ -77,15 +77,15 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     emptySource,
     inverse,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle with icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle with image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const topActionsProps = {
@@ -141,7 +141,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                 <PosterCard
                     dataAttributes={{testid: 'poster-card'}}
                     {...backgroundProps}
-                    icon={icon}
+                    asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
                     title={title}
diff --git a/src/__stories__/sheet-story.tsx b/src/__stories__/sheet-story.tsx
index e4518e373..7916a7e0d 100644
--- a/src/__stories__/sheet-story.tsx
+++ b/src/__stories__/sheet-story.tsx
@@ -52,7 +52,7 @@ export const Default: StoryComponent = () => {
                 </ButtonPrimary>
                 <Callout
                     description="Check Sheet component docs for more info."
-                    icon={<IconInformationRegular />}
+                    asset={<IconInformationRegular />}
                     buttonLink={
                         <ButtonLink href="https://github.com/Telefonica/mistica-web/blob/master/doc/sheet.md">
                             See docs
diff --git a/src/__stories__/slideshow-story.tsx b/src/__stories__/slideshow-story.tsx
index 9c1e9aafc..5564cc2f9 100644
--- a/src/__stories__/slideshow-story.tsx
+++ b/src/__stories__/slideshow-story.tsx
@@ -32,7 +32,7 @@ export const Default: StoryComponent<Args> = ({numItems, autoplay, loop, bullets
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices."
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <Slideshow
                         withBullets={bullets}
diff --git a/src/__stories__/snap-card-story.tsx b/src/__stories__/snap-card-story.tsx
index 1126e693a..68f34b961 100644
--- a/src/__stories__/snap-card-story.tsx
+++ b/src/__stories__/snap-card-story.tsx
@@ -71,7 +71,7 @@ export const Default: StoryComponent<Args> = ({
 
     return (
         <SnapCard
-            icon={assetToIcon[asset]}
+            asset={assetToIcon[asset]}
             title={title}
             subtitle={subtitle}
             description={description}
@@ -131,7 +131,7 @@ export const Group: StoryComponent = () => {
                             <SnapCard
                                 title="Title 1"
                                 subtitle="Subtitle"
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                     </Circle>
@@ -139,7 +139,7 @@ export const Group: StoryComponent = () => {
                             />,
                             <SnapCard
                                 title="Title 2"
-                                icon={
+                                asset={
                                     <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                         <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                     </Circle>
diff --git a/src/__stories__/tabs-story.tsx b/src/__stories__/tabs-story.tsx
index 37d0c63af..6c04e9e82 100644
--- a/src/__stories__/tabs-story.tsx
+++ b/src/__stories__/tabs-story.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Box, IconCloseRegular, pxToRem, ResponsiveLayout, Tabs} from '..';
+import {Box, IconCloseRegular, ResponsiveLayout, Tabs} from '..';
 
 import type {Variant} from '../theme-variant-context';
 
@@ -35,7 +35,7 @@ export const Default: StoryComponent<Args> = ({tabCount, text, theme, icon}) =>
                     onChange={setSelectedIndex}
                     tabs={Array.from({length: tabCount}).map((_, index) => ({
                         text: `${text} ${index + 1}`,
-                        icon: icon ? <IconCloseRegular size={pxToRem(24)} color="currentColor" /> : undefined,
+                        Icon: icon ? IconCloseRegular : undefined,
                     }))}
                 />
             </Box>
diff --git a/src/callout.tsx b/src/callout.tsx
index 745c90655..3a5befb6e 100644
--- a/src/callout.tsx
+++ b/src/callout.tsx
@@ -26,7 +26,7 @@ type Props = {
     description: string;
     onClose?: () => void;
     closeButtonLabel?: string;
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
@@ -40,7 +40,7 @@ const Callout = ({
     title,
     titleAs = 'h2',
     description,
-    icon,
+    asset,
     onClose,
     closeButtonLabel,
     button,
@@ -72,7 +72,7 @@ const Callout = ({
             {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
         >
             <ThemeVariant isInverse={false}>
-                {icon && <Box paddingRight={16}>{icon}</Box>}
+                {asset && <Box paddingRight={16}>{asset}</Box>}
                 <div className={styles.content}>
                     <Stack space={16}>
                         <Inline fullWidth alignItems="flex-start" space="between">
diff --git a/src/card.css.ts b/src/card.css.ts
index 0b81eb7aa..0998e54b9 100644
--- a/src/card.css.ts
+++ b/src/card.css.ts
@@ -215,7 +215,7 @@ export const mediaCardContent = style([
     },
 ]);
 
-export const mediaCardIcon = style([
+export const mediaCardAsset = style([
     {
         position: 'absolute',
         zIndex: 1,
diff --git a/src/card.tsx b/src/card.tsx
index dd1c7d9c2..9e9864258 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -509,7 +509,7 @@ type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
 
 interface MediaCardBaseProps {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
@@ -542,7 +542,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
     (
         {
             media,
-            icon,
+            asset,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -611,9 +611,9 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                     buttonLink={buttonLink}
                                 />
                             </div>
-                            {icon && (
+                            {asset && (
                                 <Box
-                                    className={styles.mediaCardIcon}
+                                    className={styles.mediaCardAsset}
                                     paddingLeft={{mobile: 16, desktop: 24}}
                                     paddingTop={{mobile: 16, desktop: 24}}
                                 >
@@ -622,7 +622,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
                                     >
-                                        {icon}
+                                        {asset}
                                     </div>
                                 </Box>
                             )}
@@ -644,7 +644,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
     (
         {
             media,
-            icon,
+            asset,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -719,9 +719,9 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                 buttonLink={buttonLink}
                             />
                         </div>
-                        {icon && (
+                        {asset && (
                             <Box
-                                className={styles.mediaCardIcon}
+                                className={styles.mediaCardAsset}
                                 paddingLeft={{mobile: 16, desktop: 24}}
                                 paddingTop={{mobile: 16, desktop: 24}}
                             >
@@ -730,7 +730,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                         [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                     })}
                                 >
-                                    {icon}
+                                    {asset}
                                 </div>
                             </Box>
                         )}
@@ -856,7 +856,7 @@ interface DataCardBaseProps {
     /**
      * Typically a mistica-icons component element
      */
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
@@ -890,7 +890,7 @@ type DataCardProps = DataCardBaseProps &
 export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
     (
         {
-            icon,
+            asset,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -914,7 +914,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
         },
         ref
     ) => {
-        const hasIconOrHeadline = !!icon || !!headline;
+        const hasIconOrHeadline = !!asset || !!headline;
         const isTouchable = !!(touchableProps.href || touchableProps.to || touchableProps.onPress);
         const {text: headlineText, ref: headlineRef} = useInnerText();
         const {text: extraText, ref: extraRef} = useInnerText();
@@ -944,14 +944,14 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                         <div className={styles.dataCard}>
                             <Inline space={0}>
                                 <Stack space={16}>
-                                    {icon && (
+                                    {asset && (
                                         <div
                                             style={applyCssVars({
                                                 [mediaStyles.vars.mediaBorderRadius]:
                                                     vars.borderRadii.mediaSmall,
                                             })}
                                         >
-                                            {icon}
+                                            {asset}
                                         </div>
                                     )}
                                     <CardContent
@@ -1001,7 +1001,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
 );
 
 type SnapCardProps = MaybeTouchableCard<{
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     title?: string;
     titleAs?: HeadingType;
     titleLinesMax?: number;
@@ -1021,7 +1021,7 @@ type SnapCardProps = MaybeTouchableCard<{
 export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
     (
         {
-            icon,
+            asset,
             title,
             titleAs = 'h3',
             titleLinesMax,
@@ -1064,13 +1064,13 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                         {isTouchable && <div className={overlayStyle} />}
                         <section className={styles.snapCard}>
                             <div>
-                                {icon && (
+                                {asset && (
                                     <div
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
                                     >
-                                        <Box paddingBottom={16}>{icon}</Box>
+                                        <Box paddingBottom={16}>{asset}</Box>
                                     </div>
                                 )}
                                 <Stack space={4}>
@@ -1172,7 +1172,7 @@ interface CommonDisplayCardProps {
     /**
      * Typically a mistica-icons component element
      */
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     actions?: ReadonlyArray<CardAction | React.ReactElement>;
     onClose?: () => void;
     closeButtonLabel?: string;
@@ -1239,7 +1239,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
             backgroundVideo,
             backgroundVideoRef,
             poster,
-            icon,
+            asset,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -1336,17 +1336,18 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                             <div
                                 className={styles.displayCardContent}
                                 style={{
-                                    paddingTop: withGradient && !icon && !hasTopActions && !hasVideo ? 0 : 24,
+                                    paddingTop:
+                                        withGradient && !asset && !hasTopActions && !hasVideo ? 0 : 24,
                                 }}
                             >
-                                {icon ? (
+                                {asset ? (
                                     <div
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
                                     >
                                         <Box paddingBottom={withGradient ? 0 : 40} paddingX={24}>
-                                            {icon}
+                                            {asset}
                                         </Box>
                                     </div>
                                 ) : (
@@ -1465,7 +1466,7 @@ interface PosterCardBaseProps {
     aspectRatio?: AspectRatio | number;
     width?: number | string;
     height?: number | string;
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     actions?: ReadonlyArray<CardAction | React.ReactElement>;
     onClose?: () => void;
     closeButtonLabel?: string;
@@ -1523,7 +1524,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             actions,
             onClose,
             closeButtonLabel,
-            icon,
+            asset,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -1630,12 +1631,12 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                             <Box
                                 className={styles.displayCardContent}
                                 paddingTop={
-                                    withGradient && !icon && !hasTopActions && !hasVideo
+                                    withGradient && !asset && !hasTopActions && !hasVideo
                                         ? 0
-                                        : {mobile: icon ? 16 : 24, desktop: 24}
+                                        : {mobile: asset ? 16 : 24, desktop: 24}
                                 }
                             >
-                                {icon ? (
+                                {asset ? (
                                     <div
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
@@ -1645,7 +1646,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                             paddingBottom={withGradient ? 0 : 40}
                                             paddingX={{mobile: 16, desktop: 24}}
                                         >
-                                            {icon}
+                                            {asset}
                                         </Box>
                                     </div>
                                 ) : (
diff --git a/src/dialog.tsx b/src/dialog.tsx
index f4c303bfe..241a40ccb 100644
--- a/src/dialog.tsx
+++ b/src/dialog.tsx
@@ -43,7 +43,7 @@ export interface ConfirmProps extends BaseDialogProps {
 }
 
 export interface ExtendedDialogProps extends BaseDialogProps {
-    icon?: React.ReactElement;
+    asset?: React.ReactElement;
     subtitle?: string;
     extra?: React.ReactNode;
     cancelText?: string;
@@ -63,7 +63,7 @@ const InternalDialog = (props: InternalDialogProps) => {
         className,
         title,
         message,
-        icon,
+        asset,
         extra,
         showCancelButton,
         showAcceptButton,
@@ -85,9 +85,9 @@ const InternalDialog = (props: InternalDialogProps) => {
 
     return (
         <div className={classnames(styles.variants[isDialog ? 'dialog' : 'default'], className)}>
-            {icon && (
+            {asset && (
                 <Box paddingBottom={24}>
-                    <div className={styles.iconContainer}>{React.cloneElement(icon, {size: '100%'})}</div>
+                    <div className={styles.iconContainer}>{React.cloneElement(asset, {size: '100%'})}</div>
                 </Box>
             )}
             {title && (
diff --git a/src/empty-state-card.css.ts b/src/empty-state-card.css.ts
index 3901ef9ca..9d08017a9 100644
--- a/src/empty-state-card.css.ts
+++ b/src/empty-state-card.css.ts
@@ -24,7 +24,7 @@ export const image = style([
     },
 ]);
 
-export const iconContainer = style([
+export const assetContainer = style([
     sprinkles({
         width: 48,
         height: 48,
diff --git a/src/empty-state-card.tsx b/src/empty-state-card.tsx
index f896beb0b..c80f26149 100644
--- a/src/empty-state-card.tsx
+++ b/src/empty-state-card.tsx
@@ -26,13 +26,13 @@ interface CommonProps {
 }
 
 interface IconProps extends CommonProps {
-    icon: React.ReactElement;
+    asset: React.ReactElement;
     imageUrl?: undefined;
 }
 
 interface ImageProps extends CommonProps {
     imageUrl: string;
-    icon?: undefined;
+    asset?: undefined;
 }
 
 type Props = IconProps | ImageProps;
@@ -44,7 +44,7 @@ const EmptyStateCard = ({
     button,
     secondaryButton,
     buttonLink,
-    icon,
+    asset,
     imageUrl,
     'aria-label': ariaLabel,
     dataAttributes,
@@ -63,7 +63,7 @@ const EmptyStateCard = ({
             <Box paddingY={{mobile: 24, desktop: 40}} paddingX={{mobile: 16, desktop: 40}}>
                 <section className={styles.container} aria-label={ariaLabel}>
                     <Stack space={16}>
-                        {image ?? (icon && <div className={styles.iconContainer}>{icon}</div>)}
+                        {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
                         <Box>
                             <Stack space={8}>
                                 <Text {...textProps.text4} weight={textPresets.cardTitle.weight} as={titleAs}>
diff --git a/src/empty-state.css.ts b/src/empty-state.css.ts
index e2c17af4a..4aadf7cea 100644
--- a/src/empty-state.css.ts
+++ b/src/empty-state.css.ts
@@ -76,7 +76,7 @@ export const largeImage = style([
     },
 ]);
 
-export const iconContainer = style([
+export const assetContainer = style([
     sprinkles({
         width: 64,
         height: 64,
diff --git a/src/empty-state.tsx b/src/empty-state.tsx
index 3d8192d86..1cab65acf 100644
--- a/src/empty-state.tsx
+++ b/src/empty-state.tsx
@@ -34,18 +34,18 @@ interface ImageProps extends BaseProps {
     imageUrl: string;
 
     largeImageUrl?: undefined;
-    icon?: undefined;
+    asset?: undefined;
 }
 
 interface LargeImageProps extends BaseProps {
     largeImageUrl: string;
 
     imageUrl?: undefined;
-    icon?: undefined;
+    asset?: undefined;
 }
 
 interface IconProps extends BaseProps {
-    icon: React.ReactElement;
+    asset: React.ReactElement;
 
     imageUrl?: undefined;
     largeImageUrl?: undefined;
@@ -61,7 +61,7 @@ const EmptyState = ({
     buttonLink,
     largeImageUrl,
     imageUrl,
-    icon,
+    asset,
     'aria-label': ariaLabel,
     dataAttributes,
 }: Props): JSX.Element => {
@@ -96,7 +96,7 @@ const EmptyState = ({
                         largeImageUrl ? styles.contentVariants.largeImage : styles.contentVariants.default
                     }
                 >
-                    {image ?? (icon && <div className={styles.iconContainer}>{icon}</div>)}
+                    {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
                     <Stack space={16}>
                         <Text6 as={titleAs}>{title}</Text6>
                         <Text3
diff --git a/src/feedback.css.ts b/src/feedback.css.ts
index 3151368ca..891fe3074 100644
--- a/src/feedback.css.ts
+++ b/src/feedback.css.ts
@@ -49,7 +49,7 @@ export const innerContainerWithButtons = style({
     },
 });
 
-export const iconContainer = sprinkles({
+export const assetContainer = sprinkles({
     width: 48,
     height: 48,
 });
diff --git a/src/feedback.tsx b/src/feedback.tsx
index db4a0e19f..8aec585c6 100644
--- a/src/feedback.tsx
+++ b/src/feedback.tsx
@@ -60,7 +60,12 @@ const useHapticFeedback = (type?: HapticFeedback) => {
 };
 
 const renderFeedbackBody = (
-    {icon, title, description, extra}: Pick<FeedbackScreenProps, 'icon' | 'title' | 'description' | 'extra'>,
+    {
+        asset,
+        title,
+        description,
+        extra,
+    }: Pick<FeedbackScreenProps, 'asset' | 'title' | 'description' | 'extra'>,
     animateText: boolean
 ) => {
     const normalizedDescription =
@@ -75,7 +80,7 @@ const renderFeedbackBody = (
         );
     return (
         <Stack space={24}>
-            <div className={styles.iconContainer}>{icon}</div>
+            <div className={styles.assetContainer}>{asset}</div>
             <Stack space={16} className={classnames(styles.feedbackData)}>
                 <div className={classnames(animateText && styles.feedbackTextAppearFast)}>
                     <Text6 as="h1">{title}</Text6>
@@ -185,7 +190,7 @@ interface AssetFeedbackProps extends FeedbackProps {
 
 interface FeedbackScreenProps extends AssetFeedbackProps {
     hapticFeedback?: HapticFeedback;
-    icon?: React.ReactNode;
+    asset?: React.ReactNode;
     animateText?: boolean;
     isInverse?: boolean;
 }
@@ -198,7 +203,7 @@ export const FeedbackScreen = ({
     secondaryButton,
     link,
     hapticFeedback,
-    icon,
+    asset,
     animateText = false,
     isInverse = false,
     unstable_inlineInDesktop,
@@ -213,7 +218,7 @@ export const FeedbackScreen = ({
     const hasButtons = checkHasButtons({primaryButton, secondaryButton, link});
 
     const feedbackBody = renderFeedbackBody(
-        {icon, title, description, extra},
+        {asset, title, description, extra},
         animateText && areAnimationsSupported(platformOverrides)
     );
 
@@ -284,7 +289,7 @@ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackP
             {...props}
             isInverse={!props.unstable_inlineInDesktop || isTabletOrSmaller}
             hapticFeedback="success"
-            icon={
+            asset={
                 skinName === VIVO_SKIN ? (
                     <IconSuccessVivo size="100%" />
                 ) : skinName === VIVO_NEW_SKIN ? (
@@ -314,7 +319,7 @@ export const ErrorFeedbackScreen = ({
         <FeedbackScreen
             {...otherProps}
             hapticFeedback="error"
-            icon={<IconError size="100%" />}
+            asset={<IconError size="100%" />}
             animateText
             dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}}
             extra={
@@ -342,7 +347,7 @@ export const InfoFeedbackScreen = ({
     return (
         <FeedbackScreen
             dataAttributes={{'component-name': 'InfoFeedbackScreen', ...dataAttributes}}
-            icon={<Icon size="100%" />}
+            asset={<Icon size="100%" />}
             {...props}
         />
     );
@@ -362,7 +367,7 @@ export const SuccessFeedback = ({
     useHapticFeedback('success');
     const {skinName, platformOverrides} = useTheme();
 
-    const icon =
+    const asset =
         skinName === VIVO_SKIN ? (
             <IconSuccessVivo size="100%" />
         ) : skinName === VIVO_NEW_SKIN ? (
@@ -371,7 +376,7 @@ export const SuccessFeedback = ({
             <IconSuccess size="100%" />
         );
     const feedbackBody = renderFeedbackBody(
-        {icon, title, description, extra},
+        {asset, title, description, extra},
         areAnimationsSupported(platformOverrides)
     );
     const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
diff --git a/src/tabs.tsx b/src/tabs.tsx
index 5b4d296b0..f8d637ad9 100644
--- a/src/tabs.tsx
+++ b/src/tabs.tsx
@@ -12,7 +12,7 @@ import Inline from './inline';
 import {useIsInverseVariant} from './theme-variant-context';
 import {vars} from './skins/skin-contract.css';
 
-import type {DataAttributes, TrackingEvent} from './utils/types';
+import type {DataAttributes, IconProps, TrackingEvent} from './utils/types';
 
 const LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
 
@@ -33,7 +33,7 @@ export type TabsProps = {
     tabs: ReadonlyArray<{
         readonly text: string;
         readonly trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-        readonly icon?: React.ReactNode;
+        readonly Icon?: (props: IconProps) => JSX.Element;
         readonly 'aria-controls'?: string;
     }>;
     children?: void;
@@ -87,7 +87,7 @@ const Tabs = ({selectedIndex, onChange, tabs, dataAttributes}: TabsProps): JSX.E
                 <div className={styles.outer}>
                     <div ref={scrollableContainerRef} className={styles.inner}>
                         <div className={styles.tabsContainer}>
-                            {tabs.map(({text, trackingEvent, icon, 'aria-controls': ariaControls}, index) => {
+                            {tabs.map(({text, trackingEvent, Icon, 'aria-controls': ariaControls}, index) => {
                                 const isSelected = index === selectedIndex;
                                 return (
                                     <BaseTouchable
@@ -119,8 +119,12 @@ const Tabs = ({selectedIndex, onChange, tabs, dataAttributes}: TabsProps): JSX.E
                                         aria-controls={ariaControls}
                                         aria-selected={isSelected ? 'true' : 'false'}
                                     >
-                                        <Inline space={!!icon && !!text ? 8 : 0} alignItems="center">
-                                            {icon && <div className={styles.icon}>{icon}</div>}
+                                        <Inline space={!!Icon && !!text ? 8 : 0} alignItems="center">
+                                            {Icon && (
+                                                <div className={styles.icon}>
+                                                    <Icon size="100%" color="currentColor" />
+                                                </div>
+                                            )}
                                             <Text
                                                 as="div"
                                                 desktopSize={textPresets.tabsLabel.size.desktop}