1 files changed, 72 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
new file mode 100644
index 000000000..fc9d488f9
--- /dev/null
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Loadable from 'react-loadable';
+import styled from 'styled-components';
+
+import { Paragraph } from 'ts/@next/components/text';
+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) => {
+    if (props.name && !props.component) {
+        const IconSVG = Loadable({
+            loader: async () => import(/* webpackChunkName: "icon" */ `ts/@next/icons/illustrations/${props.name}.svg`),
+            loading: () => <Paragraph>Loading</Paragraph>,
+        });
+
+        return (
+            <StyledIcon {...props}>
+                <IconSVG />
+            </StyledIcon>
+        );
+    }
+
+    if (props.component) {
+        return <StyledIcon {...props}>{props.component}</StyledIcon>;
+    }
+
+    return null;
+};
+
+export const InlineIconWrap =
+    styled.div <
+    PaddingInterface >
+    `
+    margin: ${props => getCSSPadding(props.margin)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > figure {
+        margin: 0 5px;
+    }
+`;
+
+const _getSize = (size: string | number = 'small'): string => {
+    if (typeof size === 'string') {
+        return `var(--${size}Icon)`;
+    }
+
+    return `${size}px`;
+};
+
+const StyledIcon =
+    styled.figure <
+    IconProps >
+    `
+    width: ${props => _getSize(props.size)};
+    height: ${props => _getSize(props.size)};
+    margin: ${props => getCSSPadding(props.margin)};
+    display: inline-block;
+    flex-shrink: 0;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+`;