Dashboard: add icon + alignment for new sandbox button (codesandbox#4011)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx

@@ -8,6 +8,7 @@ import {
   Text,
   Link,
   Button,
+  Icon,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { SandboxCard } from 'app/pages/NewDashboard/Components/SandboxCard';
@@ -87,7 +88,10 @@ export const StartSandboxes = () => {
                   },
                 })}
               >
-                New Sandbox
+                <Stack direction="vertical" align="center" gap={4}>
+                  <Icon name="plusInCircle" size={24} />
+                  <Text>New Sandbox</Text>
+                </Stack>
               </Button>
             </Column>
             {sandboxes.RECENT_START_PAGE.map(sandbox => (

packages/components/src/components/Icon/icons.tsx

@@ -215,6 +215,22 @@ export const plus = props => (
   </Element>
 );
 
+export const plusInCircle = props => (
+  <Element
+    as="svg"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM7.467 2.66667H8.53366V7.46666H13.3337V8.53333H8.53366V13.3333H7.467V8.53333H2.66699V7.46666H7.467V2.66667Z"
+      fill="currentColor"
+    />
+  </Element>
+);
+
 export const menu = props => (
   <Element
     as="svg"