Type fixes

1 files changed, 6 insertions, 4 deletions

diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 04479e80a..d9632a3c7 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,10 +1,12 @@
 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;
+    name?: string;
     component?: React.ReactNode;
     size?: 'small' | 'medium' | 'large' | 'hero' | number;
 }
@@ -13,7 +15,7 @@ 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: () => 'Loading',
+            loading: () => <Paragraph>Loading</Paragraph>,
         });
 
         return (
@@ -34,7 +36,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
     return null;
 };
 
-export const InlineIconWrap = styled.div<IconProps>`
+export const InlineIconWrap = styled.div<PaddingInterface>`
     margin: ${props => getCSSPadding(props.margin)};
     display: flex;
     align-items: center;
@@ -46,7 +48,7 @@ export const InlineIconWrap = styled.div<IconProps>`
 `;
 
 const _getSize = (size: string | number = 'small'): string => {
-    if (isNaN(size)) {
+    if (typeof size === 'string') {
         return `var(--${size}Icon)`;
     }