Edits CTA landing section

1 files changed, 23 insertions, 10 deletions

diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 84d9f4cb4..e3ad83c94 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -5,20 +5,33 @@ import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
 
 interface IconProps extends PaddingInterface {
     name: string;
+    component?: React.ReactNode;
     size?: 'small' | 'medium' | 'large' | 'hero' | number;
 }
 
 export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
-    const IconSVG = Loadable({
-        loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
-        loading: () => 'Loading',
-    });
-
-    return (
-        <StyledIcon {...props}>
-            <IconSVG />
-        </StyledIcon>
-    );
+    if (props.name && !props.component) {
+        const IconSVG = Loadable({
+            loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
+            loading: () => 'Loading',
+        });
+
+        return (
+            <StyledIcon {...props}>
+                <IconSVG />
+            </StyledIcon>
+        );
+    }
+
+    if (props.component) {
+        return (
+            <StyledIcon {...props}>
+                {props.component}
+            </StyledIcon>
+        );
+    }
+
+    return null;
 };
 
 export const InlineIconWrap = styled.div<IconProps>`