diff --git a/site/src/components/Button/CopyButton.tsx b/site/src/components/Button/CopyButton.tsx
index 4608111bb7a62..be2ecc01f2ee6 100644
--- a/site/src/components/Button/CopyButton.tsx
+++ b/site/src/components/Button/CopyButton.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import React, { useState } from "react"
-import { FileCopy } from "../Icons"
+import { FileCopyIcon } from "../Icons/FileCopyIcon"
 
 interface CopyButtonProps {
   text: string
@@ -38,7 +38,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })
     <Tooltip title="Copy to Clipboard" placement="top">
       <div className={`${styles.copyButtonWrapper} ${className}`}>
         <Button className={styles.copyButton} onClick={copyToClipboard} size="small">
-          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
+          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
         </Button>
       </div>
     </Tooltip>
diff --git a/site/src/components/Form/FormCloseButton.tsx b/site/src/components/Form/FormCloseButton.tsx
index 9a04a3171d468..d97cf9437717f 100644
--- a/site/src/components/Form/FormCloseButton.tsx
+++ b/site/src/components/Form/FormCloseButton.tsx
@@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React, { useEffect } from "react"
-import { CloseIcon } from "../Icons/Close"
+import { CloseIcon } from "../Icons/CloseIcon"
 
 export interface FormCloseButtonProps {
   onClose: () => void
diff --git a/site/src/components/Icons/BuildingIcon.stories.tsx b/site/src/components/Icons/BuildingIcon.stories.tsx
new file mode 100644
index 0000000000000..5f490d4755da3
--- /dev/null
+++ b/site/src/components/Icons/BuildingIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { BuildingIcon } from "./BuildingIcon"
+
+export default {
+  title: "icons/BuildingIcon",
+  component: BuildingIcon,
+}
+
+const Template: Story = (args) => <BuildingIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/CloseIcon.stories.tsx b/site/src/components/Icons/CloseIcon.stories.tsx
new file mode 100644
index 0000000000000..e352cd50864cd
--- /dev/null
+++ b/site/src/components/Icons/CloseIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CloseIcon } from "./CloseIcon"
+
+export default {
+  title: "icons/CloseIcon",
+  component: CloseIcon,
+}
+
+const Template: Story = (args) => <CloseIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/Close.tsx b/site/src/components/Icons/CloseIcon.tsx
similarity index 100%
rename from site/src/components/Icons/Close.tsx
rename to site/src/components/Icons/CloseIcon.tsx
diff --git a/site/src/components/Icons/CoderIcon.stories.tsx b/site/src/components/Icons/CoderIcon.stories.tsx
new file mode 100644
index 0000000000000..8581d663ed607
--- /dev/null
+++ b/site/src/components/Icons/CoderIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CoderIcon } from "./CoderIcon"
+
+export default {
+  title: "icons/CoderIcon",
+  component: CoderIcon,
+}
+
+const Template: Story = (args) => <CoderIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/DocsIcon.stories.tsx b/site/src/components/Icons/DocsIcon.stories.tsx
new file mode 100644
index 0000000000000..fa50b9a7ca8ae
--- /dev/null
+++ b/site/src/components/Icons/DocsIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { DocsIcon } from "./DocsIcon"
+
+export default {
+  title: "icons/DocsIcon",
+  component: DocsIcon,
+}
+
+const Template: Story = (args) => <DocsIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/ErrorIcon.stories.tsx b/site/src/components/Icons/ErrorIcon.stories.tsx
new file mode 100644
index 0000000000000..cddba329e6a59
--- /dev/null
+++ b/site/src/components/Icons/ErrorIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { ErrorIcon } from "./ErrorIcon"
+
+export default {
+  title: "icons/ErrorIcon",
+  component: ErrorIcon,
+}
+
+const Template: Story = (args) => <ErrorIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/FileCopyIcon.stories.tsx b/site/src/components/Icons/FileCopyIcon.stories.tsx
new file mode 100644
index 0000000000000..c67afad36b953
--- /dev/null
+++ b/site/src/components/Icons/FileCopyIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { FileCopyIcon } from "./FileCopyIcon"
+
+export default {
+  title: "icons/FileCopyIcon",
+  component: FileCopyIcon,
+}
+
+const Template: Story = (args) => <FileCopyIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/FileCopy.tsx b/site/src/components/Icons/FileCopyIcon.tsx
similarity index 91%
rename from site/src/components/Icons/FileCopy.tsx
rename to site/src/components/Icons/FileCopyIcon.tsx
index d8f33f101ef5f..f4269405c4117 100644
--- a/site/src/components/Icons/FileCopy.tsx
+++ b/site/src/components/Icons/FileCopyIcon.tsx
@@ -1,7 +1,7 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
 import React from "react"
 
-export const FileCopy: typeof SvgIcon = (props) => (
+export const FileCopyIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <path
       d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"
diff --git a/site/src/components/Icons/Logo.stories.tsx b/site/src/components/Icons/Logo.stories.tsx
new file mode 100644
index 0000000000000..7bc33230a8db3
--- /dev/null
+++ b/site/src/components/Icons/Logo.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { Logo } from "./Logo"
+
+export default {
+  title: "icons/Logo",
+  component: Logo,
+}
+
+const Template: Story = (args) => <Logo fill="black" {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/LogoutIcon.stories.tsx b/site/src/components/Icons/LogoutIcon.stories.tsx
new file mode 100644
index 0000000000000..e886d0f41cf95
--- /dev/null
+++ b/site/src/components/Icons/LogoutIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { LogoutIcon } from "./LogoutIcon"
+
+export default {
+  title: "icons/LogoutIcon",
+  component: LogoutIcon,
+}
+
+const Template: Story = (args) => <LogoutIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/Logout.tsx b/site/src/components/Icons/LogoutIcon.tsx
similarity index 100%
rename from site/src/components/Icons/Logout.tsx
rename to site/src/components/Icons/LogoutIcon.tsx
diff --git a/site/src/components/Icons/UsersOutlinedIcon.stories.tsx b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx
new file mode 100644
index 0000000000000..ad2119e17314f
--- /dev/null
+++ b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { UsersOutlinedIcon } from "./UsersOutlinedIcon"
+
+export default {
+  title: "icons/UsersOutlinedIcon",
+  component: UsersOutlinedIcon,
+}
+
+const Template: Story = (args) => <UsersOutlinedIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/WorkspacesIcon.stories.tsx b/site/src/components/Icons/WorkspacesIcon.stories.tsx
new file mode 100644
index 0000000000000..2e44efcf2b7af
--- /dev/null
+++ b/site/src/components/Icons/WorkspacesIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { WorkspacesIcon } from "./WorkspacesIcon"
+
+export default {
+  title: "icons/WorkspacesIcon",
+  component: WorkspacesIcon,
+}
+
+const Template: Story = (args) => <WorkspacesIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/index.test.tsx b/site/src/components/Icons/index.test.tsx
deleted file mode 100644
index 34f4a51fbc58d..0000000000000
--- a/site/src/components/Icons/index.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
-import { render } from "../../testHelpers"
-import * as Icons from "./index"
-
-const getAllIcons = (): [string, typeof SvgIcon][] => {
-  let k: keyof typeof Icons
-  const ret: [string, typeof SvgIcon][] = []
-  for (k in Icons) {
-    ret.push([k, Icons[k]])
-  }
-  return ret
-}
-
-describe("Icons", () => {
-  const allIcons = getAllIcons()
-
-  it.each(allIcons)(`rendering icon %p`, (_name, Icon) => {
-    render(<Icon />)
-  })
-})
diff --git a/site/src/components/Icons/index.ts b/site/src/components/Icons/index.ts
deleted file mode 100644
index bb6950f2f1da9..0000000000000
--- a/site/src/components/Icons/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { CoderIcon } from "./CoderIcon"
-export * from "./FileCopy"
-export { Logo } from "./Logo"
-export * from "./Logout"
-export { WorkspacesIcon } from "./WorkspacesIcon"
diff --git a/site/src/components/Navbar/NavbarView/index.tsx b/site/src/components/Navbar/NavbarView/index.tsx
index 58a9b387f9285..ef7d62ab55d14 100644
--- a/site/src/components/Navbar/NavbarView/index.tsx
+++ b/site/src/components/Navbar/NavbarView/index.tsx
@@ -6,7 +6,7 @@ import { NavLink } from "react-router-dom"
 import { UserResponse } from "../../../api/types"
 import { navHeight } from "../../../theme/constants"
 import { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
-import { Logo } from "../../Icons"
+import { Logo } from "../../Icons/Logo"
 import { UserDropdown } from "../UserDropdown"
 
 export interface NavbarViewProps {
diff --git a/site/src/components/Navbar/UserDropdown/index.tsx b/site/src/components/Navbar/UserDropdown/index.tsx
index e220bd12da2a7..23f3aee71e734 100644
--- a/site/src/components/Navbar/UserDropdown/index.tsx
+++ b/site/src/components/Navbar/UserDropdown/index.tsx
@@ -10,8 +10,8 @@ import { Link } from "react-router-dom"
 import { UserResponse } from "../../../api/types"
 import { BorderedMenu } from "../../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
-import { LogoutIcon } from "../../Icons"
 import { DocsIcon } from "../../Icons/DocsIcon"
+import { LogoutIcon } from "../../Icons/LogoutIcon"
 import { UserAvatar } from "../../User"
 import { UserProfileCard } from "../../User/UserProfileCard"
 
diff --git a/site/src/components/SignIn/Welcome.tsx b/site/src/components/SignIn/Welcome.tsx
index 5b4710670c2c1..309265f5994c3 100644
--- a/site/src/components/SignIn/Welcome.tsx
+++ b/site/src/components/SignIn/Welcome.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CoderIcon } from "../Icons"
+import { CoderIcon } from "../Icons/CoderIcon"
 
 export const Welcome: React.FC = () => {
   const styles = useStyles()