feat: icons

src/components/home/sections/hero.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 import { Box, Grid, space, color } from '@blockstack/ui';
 import { CircleIcon } from '@components/home/common';
 import { CONTENT_MAX_WIDTH } from '@common/constants';
-import { AtomAltIcon } from '@components/icons/atom-alt';
-import { BoxIcon } from '@components/icons/box';
-import { EditIcon } from '@components/icons/edit';
 import { Card } from '@components/home/card';
 import { Body, H1, BodyLarge, SubHeading } from '@components/home/text';
 

src/components/icons/apps.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const AppsIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <rect x="4" y="4" width="6" height="6" rx="1" />
+    <rect x="4" y="14" width="6" height="6" rx="1" />
+    <rect x="14" y="14" width="6" height="6" rx="1" />
+    <line x1="14" y1="7" x2="20" y2="7" />
+    <line x1="17" y1="4" x2="17" y2="10" />
+  </BaseSvg>
+);

src/components/icons/braces.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const BracesIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M7 4a2 2 0 0 0 -2 2v3a2 3 0 0 1 -2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2" />
+    <path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0 -2 3v3a2 2 0 0 1 -2 2" />
+  </BaseSvg>
+);

src/components/icons/code.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const CodeIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <polyline points="7 8 3 12 7 16" />
+    <polyline points="17 8 21 12 17 16" />
+    <line x1="14" y1="4" x2="10" y2="20" />
+  </BaseSvg>
+);

src/components/icons/server.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const ServerIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <rect x="3" y="4" width="18" height="8" rx="3" />
+    <rect x="3" y="12" width="18" height="8" rx="3" />
+    <line x1="7" y1="8" x2="7" y2="8.01" />
+    <line x1="7" y1="16" x2="7" y2="16.01" />
+  </BaseSvg>
+);

src/components/icons/world.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const WorldIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <circle cx="12" cy="12" r="9" />
+    <line x1="3.6" y1="9" x2="20.4" y2="9" />
+    <line x1="3.6" y1="15" x2="20.4" y2="15" />
+    <path d="M11.5 3a17 17 0 0 0 0 18" />
+    <path d="M12.5 3a17 17 0 0 1 0 18" />
+  </BaseSvg>
+);

src/pages/index.tsx

@@ -3,8 +3,11 @@ import Head from 'next/head';
 import { HomeLayout } from '@components/layouts/home';
 import { Hero } from '@components/home/sections/hero';
 import { AtomAltIcon } from '@components/icons/atom-alt';
-import { BoxIcon } from '@components/icons/box';
-import { EditIcon } from '@components/icons/edit';
+import { CodeIcon } from '@components/icons/code';
+import { AppsIcon } from '@components/icons/apps';
+import { StackIcon } from '@components/icons/stack';
+import { WorldIcon } from '@components/icons/world';
+import { ServerIcon } from '@components/icons/server';
 
 interface Card {
   title: string;
@@ -18,32 +21,32 @@ const cards = [
     title: 'Build an app',
     subtitle: 'Start building your own decentralized app.',
     href: '/browser/todo-list',
-    icon: AtomAltIcon,
+    icon: AppsIcon,
   },
   {
     title: 'Write a smart contract',
     subtitle: 'Learn how to write your contract in the Clarity language.',
     href: '/core/smart/overview',
-    icon: AtomAltIcon,
+    icon: CodeIcon,
   },
   {
     title: 'Stacks blockchain',
     subtitle: 'Learn how to work with nodes, namespaces, zone files, and other advanced topics.',
     href: '/core/naming/introduction',
-    icon: AtomAltIcon,
+    icon: StackIcon,
   },
   {
     title: 'Gaia storage',
     subtitle: 'Learn about storage, interactions between developer APIs, and the Gaia service.',
     href: '/storage/overview',
-    icon: AtomAltIcon,
+    icon: ServerIcon,
   },
   {
     title: 'Evaluate the ecosystem',
     subtitle:
       'Learn the components that make up the Blockstack Ecosystem. Understand the value a blockchain offers.',
     href: '/org/overview',
-    icon: AtomAltIcon,
+    icon: WorldIcon,
   },
   {
     title: 'Join the community',