From 19d9b8c7d240cebac458bb06fb695ccfefb43775 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Tue, 21 Jul 2020 23:07:36 -0400
Subject: [PATCH] Scaffold out UI components

---
 package.json                               |   1 +
 src/assets/wifi-none.svg                   |   2 +-
 src/components/App/App.css                 |  78 ++-
 src/components/App/App.tsx                 |  28 +-
 src/components/ColorInput/ColorInput.tsx   |  33 ++
 src/components/Footer/Footer.css           |   6 +
 src/components/Footer/Footer.tsx           |  23 +
 src/components/Header/Header.css           |   8 +
 src/components/Header/Header.tsx           |  21 +
 src/components/IconGrid/IconGrid.css       |   3 +-
 src/components/IconGrid/IconGrid.tsx       |  62 +-
 src/components/SearchInput/SearchInput.css |  32 +
 src/components/SearchInput/SearchInput.tsx |  33 ++
 src/components/SizeInput/SizeInput.css     |  56 ++
 src/components/SizeInput/SizeInput.tsx     |  38 ++
 src/components/StyleInput/StyleInput.tsx   |  37 ++
 src/components/Toolbar/Toolbar.css         |  11 +
 src/components/Toolbar/Toolbar.tsx         |  55 +-
 src/components/index.ts                    |   6 +
 src/lib/iconList.ts                        | 368 ------------
 src/lib/icons.ts                           | 642 +++++++++++++++++++++
 src/lib/{Icon.ts => index.ts}              |   9 +-
 src/state/atoms.ts                         |   4 +-
 src/state/selectors.ts                     |  35 +-
 24 files changed, 1063 insertions(+), 528 deletions(-)
 create mode 100644 src/components/ColorInput/ColorInput.tsx
 create mode 100644 src/components/Footer/Footer.css
 create mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Header/Header.css
 create mode 100644 src/components/Header/Header.tsx
 create mode 100644 src/components/SearchInput/SearchInput.css
 create mode 100644 src/components/SearchInput/SearchInput.tsx
 create mode 100644 src/components/SizeInput/SizeInput.css
 create mode 100644 src/components/SizeInput/SizeInput.tsx
 create mode 100644 src/components/StyleInput/StyleInput.tsx
 delete mode 100644 src/lib/iconList.ts
 create mode 100644 src/lib/icons.ts
 rename src/lib/{Icon.ts => index.ts} (76%)

diff --git a/package.json b/package.json
index 560f506..b171f03 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/react-list": "^0.8.5",
     "@types/react-virtualized": "^9.21.10",
     "framer-motion": "^2.1.0",
+    "phosphor-react": "^0.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-list": "^0.8.15",
diff --git a/src/assets/wifi-none.svg b/src/assets/wifi-none.svg
index e323ee1..4ec80c1 100644
--- a/src/assets/wifi-none.svg
+++ b/src/assets/wifi-none.svg
@@ -5,7 +5,7 @@
         <g id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR" transform="translate(-140.000000, -964.000000)">
             <g id="wifi-none" transform="translate(140.000000, 964.000000)">
                 <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                <path d="M0.530320514,4.68854581 C4.84102186,1.10413233 11.1598612,1.10382182 15.4697346,4.68859162 C15.6707894,4.85582047 15.705505,5.14446392 15.5646303,5.35264953 L15.5035534,5.42655339 L15.530262,5.39747995 L8.38126201,13.82348 L8.32347995,13.881262 L8.28745538,13.9091472 L8.24453666,13.9362769 L8.17020757,13.9702819 L8.08317994,13.9930438 L7.99824074,14.000008 L7.91682006,13.9930438 L7.82979243,13.9702819 L7.75026407,13.9332653 L7.67652005,13.881262 L7.61873799,13.82348 L0.497446609,5.42755339 C0.288394924,5.21850171 0.304084973,4.87666409 0.530320514,4.68854581 Z M14.3389493,5.0725781 C10.5887928,2.30917949 5.41198028,2.30941139 1.66109689,5.07264917 L1.566,5.144 L8,12.726 L14.434,5.145 L14.3389493,5.0725781 Z" id="Stroke-2" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M0.530320514,4.68854581 C4.84102186,1.10413233 11.1598612,1.10382182 15.4697346,4.68859162 C15.6707894,4.85582047 15.705505,5.14446392 15.5646303,5.35264953 L15.5035534,5.42655339 L15.530262,5.39747995 L8.38126201,13.82348 L8.32347995,13.881262 L8.28745538,13.9091472 L8.24453666,13.9362769 L8.17020757,13.9702819 L8.08317994,13.9930438 L7.99824074,14.000008 L7.91682006,13.9930438 L7.82979243,13.9702819 L7.75026407,13.9332653 L7.67652005,13.881262 L7.61873799,13.82348 L0.497446609,5.42755339 C0.288394924,5.21850171 0.304084973,4.87666409 0.530320514,4.68854581 Z M14.3389493,5.0725781 C10.5887928,2.30917949 5.41198028,2.30941139 1.66109689,5.07264917 L1.566,5.144 L8,12.726 L14.434,5.145 L14.3389493,5.0725781 Z" id="Stroke-2" fill="currentColor" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>
diff --git a/src/components/App/App.css b/src/components/App/App.css
index a3c3134..9a94f2b 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -1,38 +1,62 @@
-.App {
-  text-align: center;
+body {
+  margin: 0px;
+  font-family: monospace;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+button, select {
+  margin: 4px;
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+button:focus, select:focus {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
 }
 
-.App-header {
-  background-color: #282c34;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+button:active {
+  background-color: lightblue;
 }
 
-.App-link {
-  color: #61dafb;
-  size: 1em;
+input[type="color"] {
+  border: 1px solid black;
+  border-radius: 24px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+input[type="color" i] {
+  -webkit-appearance: square-button;
+  width: 32px;
+  height: 32px;
 }
+
+#color-picker {
+  padding: 0px;
+  border-radius: 100%;
+    height: 32px;
+    width: 32px;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+#color-picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+
+/* input {
+  margin: 4px;
+  padding: 8px;
+  border: 2px solid black;
+  border-radius: 24px;
+  background-color: transparent;
+}
+
+input:focus {
+  outline: none;
+  border: 2px solid violet;
+  border-radius: 24px;
+} */
\ No newline at end of file
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index fa77402..dcbcaff 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,22 +1,18 @@
 import React from "react";
-import { Toolbar, IconGrid } from "../";
 
-const App = () => {
+import { Header, Toolbar, IconGrid, Footer } from "../";
+import "./App.css";
+
+const App: React.FC<any> = () => {
   return (
-    <div>
-      <header>
-        <h1>Phosphor Icons</h1>
-        <a
-          href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          on the play store
-        </a>
-      </header>
-      <Toolbar />
-      <IconGrid />
-    </div>
+    <>
+      <Header />
+      <main>
+        <Toolbar />
+        <IconGrid />
+      </main>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/components/ColorInput/ColorInput.tsx b/src/components/ColorInput/ColorInput.tsx
new file mode 100644
index 0000000..30f4ee5
--- /dev/null
+++ b/src/components/ColorInput/ColorInput.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { iconColorAtom } from "../../state/atoms";
+
+type ColorInputProps = {};
+
+const ColorInput: React.FC<ColorInputProps> = () => {
+  const [color, setColor] = useRecoilState(iconColorAtom);
+
+  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value: color },
+    } = event;
+    if (color[0] === "#") setColor(color);
+  };
+
+  return (
+    <div>
+      <label htmlFor="color-picker" hidden>
+        Icon Color
+      </label>
+      <input
+        id="color-picker"
+        type="color"
+        onChange={handleColorChange}
+        value={color}
+      />
+    </div>
+  );
+};
+
+export default ColorInput;
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
new file mode 100644
index 0000000..14c1eb9
--- /dev/null
+++ b/src/components/Footer/Footer.css
@@ -0,0 +1,6 @@
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..910538f
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Droid } from "phosphor-react";
+import "./Footer.css";
+
+type FooterProps = {};
+
+const Footer: React.FC<FooterProps> = () => {
+  return (
+    <footer>
+      <span role="img" aria-label="Emoji of female technologist, male technologist, and cat">👩🏻‍💻👨🏻‍💻🐱</span>
+      <div>Copyright © 2020 Phosphor Icons</div>
+      <div>
+        Phosphor Icons is designed by{" "}
+        <a href="https://helenazhang.com">Helena Zhang</a> & built by{" "}
+        <a href="https://tobiasfried.com">Tobias Fried</a>, with love.
+      </div>
+      <button style={{ display: "flex", alignItems: "center", padding: 8 }}>Phosphor for <Droid /></button>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..230604d
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,8 @@
+header {
+  display: flex;
+  align-items: center;
+}
+
+header > * {
+  flex: 1;
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..2e640dc
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import "./Header.css";
+
+type HeaderProps = {};
+
+const Header: React.FC<HeaderProps> = () => {
+  return (
+    <header>
+      <div style={{ paddingLeft: 32 }}>
+        <h1>Phosphor Icons</h1>
+      </div>
+      <div style={{ paddingRight: 32, textAlign: "end" }}>
+        <button>Download All</button>
+        <button>Request</button>
+        <button>Donate</button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 86267eb..e9f201b 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -1,6 +1,7 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  /* min-height: 100vh; */
 }
 
 .grid-item {
@@ -10,7 +11,7 @@
   justify-content: center;
   margin: 4px;
   border-radius: 8px;
-  background-color: gainsboro;
+  background-color: white;
   /* transition: background-color 0.5s ease; */
 }
 
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 9885c05..97e6753 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -3,7 +3,7 @@ import { useRecoilValue } from "recoil";
 import { motion } from "framer-motion";
 
 import { filteredQueryResultsSelector } from "../../state/selectors";
-import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
+import { iconColorAtom, iconSizeAtom, styleQueryAtom } from "../../state/atoms";
 import "./IconGrid.css";
 
 type IconGridProps = {};
@@ -13,62 +13,30 @@ type IconGridProps = {};
 //   closed: { opacity: 0, x: "-100%" },
 // }
 
+const whileHover = {
+  boxShadow: "0 0 0 2px rgb(0, 0, 0)",
+  // scale: 1.2,
+};
+
+const transition = { duration: 0.2 };
+
 const IconGrid: React.FC<IconGridProps> = () => {
+  const weight = useRecoilValue(styleQueryAtom);
   const color = useRecoilValue(iconColorAtom);
   const size = useRecoilValue(iconSizeAtom);
   const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
 
   return (
     <motion.div className="grid">
-      {filteredQueryResults.map((icon) => (
+      {filteredQueryResults.map(({ name, Icon }) => (
         <motion.div
-          key={`ph-${icon.name}-${icon.style}`}
+          key={name}
           className="grid-item"
-          whileHover={{ scale: 1.2, zIndex: 1, backgroundColor: "rgb(80, 220, 240)" }}
-          transition={{ duration: 0.2 }}
+          whileHover={whileHover}
+          transition={transition}
         >
-          {/* <img
-            color={color}
-            style={{ height: size, width: size }}
-            src={icon.asset}
-            alt={`${icon.name} icon`}
-            width="100%"
-          /> */}
-          <svg
-            width={size}
-            height={size}
-            viewBox="0 0 16 16"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>ph-6-square</title>
-            <g
-              id="Page-1"
-              stroke="none"
-              strokeWidth="1"
-              fill="none"
-              fillRule="evenodd"
-            >
-              <g
-                id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR"
-                transform="translate(-204.000000, -836.000000)"
-              >
-                <g
-                  id="ph-6-square"
-                  transform="translate(204.000000, 836.000000)"
-                >
-                  <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
-                  <path
-                    d="M12.5002,2 C13.3283424,2 14.0002,2.67185763 14.0002,3.5 L14.0002,3.5 L14.0002,12.5 C14.0002,13.3281424 13.3283424,14 12.5002,14 L12.5002,14 L3.5002,14 C2.67205763,14 2.0002,13.3281424 2.0002,12.5 L2.0002,12.5 L2.0002,3.5 C2.0002,2.67185763 2.67205763,2 3.5002,2 L3.5002,2 Z M12.5002,3 L3.5002,3 C3.22434237,3 3.0002,3.22414237 3.0002,3.5 L3.0002,3.5 L3.0002,12.5 C3.0002,12.7758576 3.22434237,13 3.5002,13 L3.5002,13 L12.5002,13 C12.7760576,13 13.0002,12.7758576 13.0002,12.5 L13.0002,12.5 L13.0002,3.5 C13.0002,3.22414237 12.7760576,3 12.5002,3 L12.5002,3 Z M8.68254638,4.56645635 C8.89513608,4.68915997 8.98352787,4.94440165 8.90359492,5.16757927 L8.86564365,5.24944638 L7.85282188,7.00392446 C8.29007993,6.97474335 8.73199934,7.0740957 9.12489386,7.30008038 L9.12489386,7.30008038 L9.29386898,7.40805384 C9.72888544,7.71376231 10.0373271,8.15855494 10.1734941,8.66683399 C10.3268496,9.23795093 10.2504388,9.85092548 9.94876178,10.3742416 C9.64716392,10.8973449 9.15475538,11.2690252 8.58226601,11.4223941 C8.0101937,11.5760061 7.39807854,11.5000007 6.87630614,11.1979196 C6.35246877,10.8966194 5.98037525,10.4044519 5.82663095,9.83188663 C5.67314747,9.25896983 5.74909436,8.64698709 6.05188686,8.12398186 C6.05369059,8.12086632 6.05550102,8.11775614 6.05731812,8.11465133 L7.99955635,4.74955362 C8.13759792,4.51039021 8.44338298,4.42841477 8.68254638,4.56645635 Z M8.62630614,8.16691962 C8.33337246,7.99843033 7.99451471,7.95640146 7.67522247,8.04267312 C7.35874418,8.12692081 7.08639562,8.33296658 6.91731314,8.62501814 C6.74908295,8.91559756 6.7070847,9.25402094 6.79249411,9.57283399 C6.87803784,9.89141061 7.08390359,10.1637089 7.37611814,10.3317869 C7.66663056,10.4999783 8.00495914,10.541988 8.32321337,10.456531 C8.64237347,10.3710285 8.91492409,10.1653016 9.08243822,9.8747584 C9.25053333,9.58320754 9.29287479,9.24334675 9.20763095,8.92588663 C9.12225886,8.60721321 8.91666229,8.33502286 8.62630614,8.16691962 Z"
-                    id="Combined-Shape"
-                    fill={color}
-                    fillRule="nonzero"
-                  ></path>
-                </g>
-              </g>
-            </g>
-          </svg>
-          <p style={{ padding: 16 }}>{icon.name}</p>
+          <Icon color={color} size={size} weight={weight} />
+          <p>{name}</p>
         </motion.div>
       ))}
     </motion.div>
diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
new file mode 100644
index 0000000..0590393
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.css
@@ -0,0 +1,32 @@
+.search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 250px;
+  margin: 4px;
+  padding: 8px 16px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
+}
+
+.search-bar:focus-within {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
+}
+
+.search-bar input {
+  flex: 1;
+  border: none;
+  margin-left: 8px;
+  padding: 2px 0px 0px;
+}
+
+.search-bar input:focus {
+  outline: none;
+}
+
+.search-bar input::placeholder {
+  color: black;
+}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 0000000..6673bd6
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { searchQueryAtom } from "../../state/atoms";
+import { Search } from "phosphor-react";
+import "./SearchInput.css";
+
+type SearchInputProps = {};
+
+const SearchInput: React.FC<SearchInputProps> = () => {
+  const [query, setQuery] = useRecoilState(searchQueryAtom);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+  return (
+    <div className="search-bar">
+      <Search />
+      <label htmlFor="search-input" hidden>
+        Search for an icon
+      </label>
+      <input
+        id="search-input"
+        type="text"
+        value={query}
+        placeholder="Search for an icon"
+        onChange={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
new file mode 100644
index 0000000..fde3789
--- /dev/null
+++ b/src/components/SizeInput/SizeInput.css
@@ -0,0 +1,56 @@
+.size-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 250px;
+  margin: 4px;
+  padding: 8px 16px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
+  font-family: sans-serif;
+  font-size: 13.333px;
+  height: 20px;
+}
+
+.size-bar:focus-within {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
+}
+
+.size-bar input {
+  flex: 1;
+  margin-left: 16px;
+  border: none;
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  height: 1px; /* Specified height */
+  background: black; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+}
+
+.size-bar input::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 12px; /* Set a specific slider handle width */
+  height: 12px; /* Slider handle height */
+  background: black; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.size-bar input::-moz-range-thumb {
+  width: 12px; /* Set a specific slider handle width */
+  height: 12px; /* Slider handle height */
+  background: black; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.size-bar input:focus {
+  outline: none;
+}
+
+.size-bar input::placeholder {
+  color: black;
+}
diff --git a/src/components/SizeInput/SizeInput.tsx b/src/components/SizeInput/SizeInput.tsx
new file mode 100644
index 0000000..4a7bf38
--- /dev/null
+++ b/src/components/SizeInput/SizeInput.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { iconSizeAtom } from "../../state/atoms";
+import "./SizeInput.css";
+
+type SizeInputProps = {};
+
+const SizeInput: React.FC<SizeInputProps> = () => {
+  const [size, setSize] = useRecoilState(iconSizeAtom);
+
+  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value },
+    } = event;
+    const sizeInput = parseInt(value);
+
+    if (sizeInput > 0) setSize(sizeInput);
+  };
+
+  return (
+    <div className="size-bar">
+      <label htmlFor="size-input">{`Size: ${size}px`}</label>
+      <input
+        id="size-input"
+        value={size}
+        type="range"
+        title={size.toString()}
+        min={16}
+        max={96}
+        onChange={handleSizeChange}
+        step={4}
+      />
+    </div>
+  );
+};
+
+export default SizeInput;
diff --git a/src/components/StyleInput/StyleInput.tsx b/src/components/StyleInput/StyleInput.tsx
new file mode 100644
index 0000000..0db738c
--- /dev/null
+++ b/src/components/StyleInput/StyleInput.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { styleQueryAtom } from "../../state/atoms";
+import { IconStyle } from "../../lib";
+
+type StyleInputProps = {};
+
+const StyleInput: React.FC<StyleInputProps> = () => {
+  const [style, setStyle] = useRecoilState(styleQueryAtom);
+
+  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setStyle(event.target.value as IconStyle);
+  };
+
+  return (
+    <div>
+      <label htmlFor="style-input" hidden>
+        Icon Size
+      </label>
+      <select
+        id="style-input"
+        value={style?.toString()}
+        onChange={handleStyleChange}
+      >
+        <option value={IconStyle.THIN}>Thin</option>
+        <option value={IconStyle.LIGHT}>Light</option>
+        <option value={IconStyle.REGULAR}>Regular</option>
+        <option value={IconStyle.BOLD}>Bold</option>
+        <option value={IconStyle.FILL}>Fill</option>
+        <option value={IconStyle.DUOTONE}>Duotone</option>
+      </select>
+    </div>
+  );
+};
+
+export default StyleInput;
diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css
index e69de29..0447ec4 100644
--- a/src/components/Toolbar/Toolbar.css
+++ b/src/components/Toolbar/Toolbar.css
@@ -0,0 +1,11 @@
+.toolbar {
+  position: sticky;
+  top: 0px;
+  padding: 8px;
+  background-color: #f2f2f2;
+  border: 1px 0px 1px solid black;
+  z-index: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 211ef06..4aaf90a 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,54 +1,19 @@
 import React from "react";
-import { useRecoilState } from "recoil";
 
-import { searchQueryAtom, styleQueryAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
-import { IconStyle } from "../../lib/Icon";
+import { SearchInput, SizeInput, StyleInput, ColorInput } from "../";
+import "./Toolbar.css";
 
-type ToolbarProps = {}
+type ToolbarProps = {};
 
 const Toolbar: React.FC<ToolbarProps> = () => {
-  const [query, setQuery] = useRecoilState(searchQueryAtom);
-  const [style, setStyle] = useRecoilState(styleQueryAtom);
-  const [size, setSize] = useRecoilState(iconSizeAtom);
-  const [color, setColor] = useRecoilState(iconColorAtom);
-
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
-  };
-
-  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setStyle(event.target.value as IconStyle);
-  };
-
-  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { target: { value }} = event;
-    const sizeInput = parseInt(value);
-
-    if (sizeInput > 0) setSize(sizeInput);
-  }
-
-  void(color)
-  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { target: { value: color }} = event;
-    if (color[0] === "#") setColor(color);
-  }
-
   return (
-    <div style={{ position: "sticky", top: 0, padding: 8, backgroundColor: "white", zIndex: 1.1 }}>
-      <input value={query} onChange={handleSearchChange} />
-      <select value={style?.toString()} onChange={handleStyleChange}>
-        <option value={""}>All</option>
-        <option value={IconStyle.THIN}>Thin</option>
-        <option value={IconStyle.LIGHT}>Light</option>
-        <option value={IconStyle.REGULAR}>Regular</option>
-        <option value={IconStyle.BOLD}>Bold</option>
-        <option value={IconStyle.FILL}>Fill</option>
-        <option value={IconStyle.DUOTONE}>Duotone</option>
-      </select>
-      <input value={size} type="range" min={12} max={256} onChange={handleSizeChange}/>
-      <input type="color" onChange={handleColorChange}/>
+    <div className="toolbar">
+      <StyleInput />
+      <SearchInput />
+      <SizeInput />
+      <ColorInput />
     </div>
   );
-}
+};
 
-export default Toolbar;
\ No newline at end of file
+export default Toolbar;
diff --git a/src/components/index.ts b/src/components/index.ts
index 0842621..31f92db 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,10 @@
 export { default as App } from "./App/App";
+export { default as Header } from "./Header/Header";
 export { default as IconGrid } from "./IconGrid/IconGrid";
 export { default as IconGridUV } from "./IconGrid/IconGridUV";
 export { default as Toolbar } from "./Toolbar/Toolbar";
+export { default as ColorInput } from "./ColorInput/ColorInput";
+export { default as SearchInput } from "./SearchInput/SearchInput";
+export { default as SizeInput } from "./SizeInput/SizeInput";
+export { default as StyleInput } from "./StyleInput/StyleInput";
+export { default as Footer } from "./Footer/Footer";
\ No newline at end of file
diff --git a/src/lib/iconList.ts b/src/lib/iconList.ts
deleted file mode 100644
index b47ecdb..0000000
--- a/src/lib/iconList.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-import { Icon, IconCategory, IconStyle } from "./Icon";
-
-export const iconList: Icon[] = [
-  {
-    name: "6-square",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "six", "box"],
-    asset: require("../assets/6-square.svg"),
-  },
-  {
-    name: "6-square-sharp",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "six", "box"],
-    asset: require("../assets/6-square-sharp.svg"),
-  },
-  {
-    name: "8-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["number", "digit", "eight", "round"],
-    asset: require("../assets/8-circle.svg"),
-  },
-  {
-    name: "arrow-right-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["pointer", "direction", "round"],
-    asset: require("../assets/arrow-right-circle.svg"),
-  },
-  {
-    name: "basketball",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
-    tags: ["sports", "games", "athletics", "dribbble"],
-    asset: require("../assets/basketball.svg"),
-  },
-  {
-    name: "battery-half",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
-    tags: ["charged", "charger", "charging", "power"],
-    asset: require("../assets/battery-half.svg"),
-  },
-  {
-    name: "battery-half-hash",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
-    tags: ["charged", "charger", "charging", "power"],
-    asset: require("../assets/battery-half-hash.svg"),
-  },
-  {
-    name: "book-open",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
-    tags: ["reading", "reader", "novel", "story"],
-    asset: require("../assets/book-open.svg"),
-  },
-  {
-    name: "calendar-6",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
-    tags: ["dates", "times", "events", "schedule", "six"],
-    asset: require("../assets/calendar-6.svg"),
-  },
-  {
-    name: "check-circle",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
-    tags: ["todo", "to-do", "list", "checkbox", "round"],
-    asset: require("../assets/check-circle.svg"),
-  },
-  {
-    name: "clock",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
-    asset: require("../assets/clock.svg"),
-  },
-  {
-    name: "cloud",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.BUSINESS,
-      IconCategory.SYSTEM,
-      IconCategory.WEATHER,
-    ],
-    tags: ["serverless", "backup", "storage"],
-    asset: require("../assets/cloud.svg"),
-  },
-  {
-    name: "cube",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.OTHER],
-    tags: ["square", "box", "3d", "volume", "blocks"],
-    asset: require("../assets/cube.svg"),
-  },
-  {
-    name: "delete",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["keyboard", "remove", "backspace"],
-    asset: require("../assets/delete.svg"),
-  },
-  {
-    name: "doc",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "save"],
-    asset: require("../assets/doc.svg"),
-  },
-  {
-    name: "doc-text",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "save", "write"],
-    asset: require("../assets/doc-text.svg"),
-  },
-  {
-    name: "doc-x",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
-    tags: ["documents", "files", "cancel", "discard", "close"],
-    asset: require("../assets/doc-x.svg"),
-  },
-  {
-    name: "do-not-disturb",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.SYSTEM,
-      IconCategory.USERS,
-      IconCategory.WEATHER,
-      IconCategory.OTHER,
-    ],
-    tags: ["forbidden", "disallowed", "blocked", "spam"],
-    asset: require("../assets/do-not-disturb.svg"),
-  },
-  {
-    name: "droid",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.BRAND,
-      IconCategory.COMMUNICATION,
-      IconCategory.DEVELOPMENT,
-      IconCategory.DEVICE,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
-    asset: require("../assets/droid.svg"),
-  },
-  {
-    name: "folder",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.DOCUMENT,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["directory", "directories", "files"],
-    asset: require("../assets/folder.svg"),
-  },
-  {
-    name: "folder-dip",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.DOCUMENT,
-      IconCategory.EDITOR,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["directory", "directories", "files"],
-    asset: require("../assets/folder-dip.svg"),
-  },
-  {
-    name: "heart",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DESIGN,
-      IconCategory.HEALTH,
-      IconCategory.OTHER,
-    ],
-    tags: ["wellness", "love", "healthy", "like"],
-    asset: require("../assets/heart.svg"),
-  },
-  {
-    name: "horse",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.HEALTH, IconCategory.OTHER],
-    tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
-    asset: require("../assets/horse.svg"),
-  },
-  {
-    name: "intersect",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN],
-    tags: ["merge", "join", "intersection", "layers"],
-    asset: require("../assets/intersect.svg"),
-  },
-  {
-    name: "mail",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
-    tags: ["email", "messages", "messaging", "send", "sent"],
-    asset: require("../assets/mail.svg"),
-  },
-  {
-    name: "medium",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BRAND],
-    tags: ["publish", "writing", "write"],
-    asset: require("../assets/medium.svg"),
-  },
-  {
-    name: "meh",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DESIGN,
-      IconCategory.OTHER,
-    ],
-    tags: ["face", "smiley", "emoji", "unimpressed"],
-    asset: require("../assets/meh.svg"),
-  },
-  {
-    name: "mic",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.DEVICE,
-      IconCategory.MEDIA,
-      IconCategory.SYSTEM,
-    ],
-    tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
-    asset: require("../assets/mic.svg"),
-  },
-  {
-    name: "music-beam-angled",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["songs", "audio", "playlist", "albums"],
-    asset: require("../assets/music-beam-angled.svg"),
-  },
-  {
-    name: "music-beam-straight",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["songs", "audio", "playlist", "albums"],
-    asset: require("../assets/music-beam-straight.svg"),
-  },
-  {
-    name: "pencil-line",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
-    tags: ["write", "writing", "editing", "sign", "signature"],
-    asset: require("../assets/pencil-line.svg"),
-  },
-  {
-    name: "pen-nib",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
-    tags: [
-      "write",
-      "writing",
-      "editing",
-      "sign",
-      "signature",
-      "fountain pen",
-      "illustrator",
-    ],
-    asset: require("../assets/pen-nib.svg"),
-  },
-  {
-    name: "profile-round",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.USERS],
-    tags: ["person", "users", "account", "login", "circle"],
-    asset: require("../assets/profile-round.svg"),
-  },
-  {
-    name: "rewind",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
-    asset: require("../assets/rewind.svg"),
-  },
-  {
-    name: "send",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
-    tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
-    asset: require("../assets/chevron.svg"),
-  },
-  {
-    name: "star",
-    style: IconStyle.REGULAR,
-    categories: [
-      IconCategory.COMMUNICATION,
-      IconCategory.MAP,
-      IconCategory.OTHER,
-    ],
-    tags: ["rate", "ratings", "favorites"],
-    asset: require("../assets/star.svg"),
-  },
-  {
-    name: "table",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.EDITOR, IconCategory.OTHER],
-    tags: ["tabular", "spreadsheet", "excel"],
-    asset: require("../assets/table.svg"),
-  },
-  {
-    name: "trash",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash.svg"),
-  },
-  {
-    name: "trash-duo",
-    style: IconStyle.DUOTONE,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash-duo.svg"),
-  },
-  {
-    name: "trash-solid",
-    style: IconStyle.FILL,
-    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
-    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
-    asset: require("../assets/trash-solid.svg"),
-  },
-  {
-    name: "volume-off",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
-    tags: ["speakers", "audio", "recording", "music", "sound"],
-    asset: require("../assets/volume-off.svg"),
-  },
-  {
-    name: "warning",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["alert", "danger", "dangerous", "caution"],
-    asset: require("../assets/warning.svg"),
-  },
-  {
-    name: "wifi-full",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-full.svg"),
-  },
-  {
-    name: "wifi-low",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-low.svg"),
-  },
-  {
-    name: "wifi-none",
-    style: IconStyle.REGULAR,
-    categories: [IconCategory.SYSTEM],
-    tags: ["wireless", "internet", "network", "connection", "connectivity"],
-    asset: require("../assets/wifi-none.svg"),
-  },
-];
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
new file mode 100644
index 0000000..35fbd81
--- /dev/null
+++ b/src/lib/icons.ts
@@ -0,0 +1,642 @@
+import * as Icon from "phosphor-react";
+import { IconEntry, IconCategory } from ".";
+
+export const icons: Readonly<IconEntry[]> = [
+  {
+    name: "arrow-up-right-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["pointer", "direction", "round"],
+    Icon: Icon.ArrowUpRightCircle,
+  },
+  {
+    name: "backspace",
+    categories: [IconCategory.SYSTEM],
+    tags: ["keyboard", "remove", "delete"],
+    Icon: Icon.Backspace,
+  },
+  {
+    name: "battery-half",
+    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+    tags: ["charged", "charger", "charging", "power"],
+    Icon: Icon.BatteryHalf,
+  },
+  {
+    name: "book-closed",
+    categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+    tags: ["reading", "reader", "novel", "story"],
+    Icon: Icon.BookClosed,
+  },
+  {
+    name: "calendar-x",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["dates", "times", "events", "schedule", "closed", "cancelled"],
+    Icon: Icon.CalendarX,
+  },
+  {
+    name: "check-circle",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["todo", "to-do", "list", "checkbox", "round"],
+    Icon: Icon.CheckCircle,
+  },
+  {
+    name: "clock",
+    categories: [IconCategory.SYSTEM],
+    tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+    Icon: Icon.Clock,
+  },
+  {
+    name: "cloud",
+    categories: [
+      IconCategory.BUSINESS,
+      IconCategory.SYSTEM,
+      IconCategory.WEATHER,
+    ],
+    tags: ["serverless", "backup", "storage"],
+    Icon: Icon.Cloud,
+  },
+  {
+    name: "copy",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["duplicated", "copied"],
+    Icon: Icon.Copy,
+  },
+  {
+    name: "cube",
+    categories: [IconCategory.DESIGN, IconCategory.OTHER],
+    tags: ["square", "box", "3d", "volume", "blocks"],
+    Icon: Icon.Cube,
+  },
+  {
+    name: "document-text",
+    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+    tags: ["documents", "files", "save", "write"],
+    Icon: Icon.DocumentText,
+  },
+  {
+    name: "droid",
+    categories: [
+      IconCategory.BRAND,
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVELOPMENT,
+      IconCategory.DEVICE,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+    Icon: Icon.Droid,
+  },
+  {
+    name: "envelope",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.Envelope,
+  },
+  {
+    name: "envelope-alt",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.EnvelopeAlt,
+  },
+  {
+    name: "folder",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.Folder,
+  },
+  {
+    name: "folder-dip",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderDip,
+  },
+  {
+    name: "folder-minimal",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderMinimal,
+  },
+  {
+    name: "heart",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.HEALTH,
+      IconCategory.OTHER,
+    ],
+    tags: ["wellness", "love", "healthy", "like"],
+    Icon: Icon.Heart,
+  },
+  {
+    name: "horse",
+    categories: [IconCategory.HEALTH, IconCategory.OTHER],
+    tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+    Icon: Icon.Horse,
+  },
+  {
+    name: "microphone",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVICE,
+      IconCategory.MEDIA,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+    Icon: Icon.Microphone,
+  },
+  {
+    name: "minus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "subtraction",
+      "difference",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.MinusCircle,
+  },
+  {
+    name: "music-notes-sixteenth",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["songs", "audio", "playlist", "albums"],
+    Icon: Icon.MusicNotesSixteenth,
+  },
+  {
+    name: "pencil-clip",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilClip,
+  },
+  {
+    name: "pencil-line",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilLine,
+  },
+  {
+    name: "pen-nib",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: [
+      "write",
+      "writing",
+      "editing",
+      "sign",
+      "signature",
+      "fountain pen",
+      "illustrator",
+    ],
+    Icon: Icon.PenNib,
+  },
+  {
+    name: "pin",
+    categories: [IconCategory.MAP],
+    tags: ["places", "markers", "locations"],
+    Icon: Icon.Pin,
+  },
+  {
+    name: "play-circle",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["resume", "music", "start", "round"],
+    Icon: Icon.PlayCircle,
+  },
+  {
+    name: "plus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "addition",
+      "sum",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.PlusCircle,
+  },
+  {
+    name: "prohibit",
+    categories: [IconCategory.MAP, IconCategory.SYSTEM, IconCategory.OTHER],
+    tags: [
+      "forbidden",
+      "prohibited",
+      "cancelled",
+      "prevent",
+      "stop",
+      "do not enter",
+    ],
+    Icon: Icon.Prohibit,
+  },
+  {
+    name: "search",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["find", "locate", "query"],
+    Icon: Icon.Search,
+  },
+  {
+    name: "smiley",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.Smiley,
+  },
+  {
+    name: "smiley-meh",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.SmileyMeh,
+  },
+  {
+    name: "speaker-off",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["muted", "volume", "sound", "music"],
+    Icon: Icon.SpeakerOff,
+  },
+  {
+    name: "star",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.MAP,
+      IconCategory.OTHER,
+    ],
+    tags: ["rate", "ratings", "favorites"],
+    Icon: Icon.Star,
+  },
+  {
+    name: "trash",
+    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+    Icon: Icon.Trash,
+  },
+  {
+    name: "two-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["number", "digit", "2", "round"],
+    Icon: Icon.TwoCircle,
+  },
+  {
+    name: "user-circle",
+    categories: [IconCategory.USERS],
+    tags: ["person", "users", "account", "login", "circle"],
+    Icon: Icon.UserCircle,
+  },
+  {
+    name: "warning-triangle",
+    categories: [IconCategory.SYSTEM],
+    tags: ["alert", "danger", "dangerous", "caution"],
+    Icon: Icon.WarningTriangle,
+  },
+  {
+    name: "wifi-medium",
+    categories: [IconCategory.SYSTEM],
+    tags: ["wireless", "internet", "network", "connection", "connectivity"],
+    Icon: Icon.WifiMedium,
+  },
+];
+
+// export const iconList: Icon[] = [
+//   {
+//     name: "6-square",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square.svg"),
+//   },
+//   {
+//     name: "6-square-sharp",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square-sharp.svg"),
+//   },
+//   {
+//     name: "8-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "eight", "round"],
+//     Icon: require("../Icons/8-circle.svg"),
+//   },
+//   {
+//     name: "arrow-right-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["pointer", "direction", "round"],
+//     Icon: require("../Icons/arrow-right-circle.svg"),
+//   },
+//   {
+//     name: "basketball",
+//     categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["sports", "games", "athletics", "dribbble"],
+//     Icon: require("../Icons/basketball.svg"),
+//   },
+//   {
+//     name: "battery-half",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half.svg"),
+//   },
+//   {
+//     name: "battery-half-hash",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half-hash.svg"),
+//   },
+//   {
+//     name: "book-open",
+//     categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+//     tags: ["reading", "reader", "novel", "story"],
+//     Icon: require("../Icons/book-open.svg"),
+//   },
+//   {
+//     name: "calendar-6",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["dates", "times", "events", "schedule", "six"],
+//     Icon: require("../Icons/calendar-6.svg"),
+//   },
+//   {
+//     name: "check-circle",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["todo", "to-do", "list", "checkbox", "round"],
+//     Icon: require("../Icons/check-circle.svg"),
+//   },
+//   {
+//     name: "clock",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+//     Icon: require("../Icons/clock.svg"),
+//   },
+//   {
+//     name: "cloud",
+//     categories: [
+//       IconCategory.BUSINESS,
+//       IconCategory.SYSTEM,
+//       IconCategory.WEATHER,
+//     ],
+//     tags: ["serverless", "backup", "storage"],
+//     Icon: require("../Icons/cloud.svg"),
+//   },
+//   {
+//     name: "cube",
+//     categories: [IconCategory.DESIGN, IconCategory.OTHER],
+//     tags: ["square", "box", "3d", "volume", "blocks"],
+//     Icon: require("../Icons/cube.svg"),
+//   },
+//   {
+//     name: "delete",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["keyboard", "remove", "backspace"],
+//     Icon: require("../Icons/delete.svg"),
+//   },
+//   {
+//     name: "doc",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save"],
+//     Icon: require("../Icons/doc.svg"),
+//   },
+//   {
+//     name: "doc-text",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save", "write"],
+//     Icon: require("../Icons/doc-text.svg"),
+//   },
+//   {
+//     name: "doc-x",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "cancel", "discard", "close"],
+//     Icon: require("../Icons/doc-x.svg"),
+//   },
+//   {
+//     name: "do-not-disturb",
+//     categories: [
+//       IconCategory.SYSTEM,
+//       IconCategory.USERS,
+//       IconCategory.WEATHER,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["forbidden", "disallowed", "blocked", "spam"],
+//     Icon: require("../Icons/do-not-disturb.svg"),
+//   },
+//   {
+//     name: "droid",
+//     categories: [
+//       IconCategory.BRAND,
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVELOPMENT,
+//       IconCategory.DEVICE,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+//     Icon: require("../Icons/droid.svg"),
+//   },
+//   {
+//     name: "folder",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder.svg"),
+//   },
+//   {
+//     name: "folder-dip",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder-dip.svg"),
+//   },
+//   {
+//     name: "heart",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.HEALTH,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["wellness", "love", "healthy", "like"],
+//     Icon: require("../Icons/heart.svg"),
+//   },
+//   {
+//     name: "horse",
+//     categories: [IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+//     Icon: require("../Icons/horse.svg"),
+//   },
+//   {
+//     name: "intersect",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["merge", "join", "intersection", "layers"],
+//     Icon: require("../Icons/intersect.svg"),
+//   },
+//   {
+//     name: "mail",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["email", "messages", "messaging", "send", "sent"],
+//     Icon: require("../Icons/mail.svg"),
+//   },
+//   {
+//     name: "medium",
+//     categories: [IconCategory.BRAND],
+//     tags: ["publish", "writing", "write"],
+//     Icon: require("../Icons/medium.svg"),
+//   },
+//   {
+//     name: "meh",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["face", "smiley", "emoji", "unimpressed"],
+//     Icon: require("../Icons/meh.svg"),
+//   },
+//   {
+//     name: "mic",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVICE,
+//       IconCategory.MEDIA,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+//     Icon: require("../Icons/mic.svg"),
+//   },
+//   {
+//     name: "music-beam-angled",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-angled.svg"),
+//   },
+//   {
+//     name: "music-beam-straight",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-straight.svg"),
+//   },
+//   {
+//     name: "pencil-line",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: ["write", "writing", "editing", "sign", "signature"],
+//     Icon: require("../Icons/pencil-line.svg"),
+//   },
+//   {
+//     name: "pen-nib",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: [
+//       "write",
+//       "writing",
+//       "editing",
+//       "sign",
+//       "signature",
+//       "fountain pen",
+//       "illustrator",
+//     ],
+//     Icon: require("../Icons/pen-nib.svg"),
+//   },
+//   {
+//     name: "profile-round",
+//     categories: [IconCategory.USERS],
+//     tags: ["person", "users", "account", "login", "circle"],
+//     Icon: require("../Icons/profile-round.svg"),
+//   },
+//   {
+//     name: "rewind",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/rewind.svg"),
+//   },
+//   {
+//     name: "send",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
+//     Icon: require("../Icons/chevron.svg"),
+//   },
+//   {
+//     name: "star",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.MAP,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["rate", "ratings", "favorites"],
+//     Icon: require("../Icons/star.svg"),
+//   },
+//   {
+//     name: "table",
+//     categories: [IconCategory.EDITOR, IconCategory.OTHER],
+//     tags: ["tabular", "spreadsheet", "excel"],
+//     Icon: require("../Icons/table.svg"),
+//   },
+//   {
+//     name: "trash",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash.svg"),
+//   },
+//   {
+//     name: "trash-duo",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-duo.svg"),
+//   },
+//   {
+//     name: "trash-solid",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-solid.svg"),
+//   },
+//   {
+//     name: "volume-off",
+//     categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["speakers", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/volume-off.svg"),
+//   },
+//   {
+//     name: "warning",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["alert", "danger", "dangerous", "caution"],
+//     Icon: require("../Icons/warning.svg"),
+//   },
+//   {
+//     name: "wifi-full",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-full.svg"),
+//   },
+//   {
+//     name: "wifi-low",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-low.svg"),
+//   },
+//   {
+//     name: "wifi-none",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-none.svg"),
+//   },
+// ];
diff --git a/src/lib/Icon.ts b/src/lib/index.ts
similarity index 76%
rename from src/lib/Icon.ts
rename to src/lib/index.ts
index b586e9f..97f276f 100644
--- a/src/lib/Icon.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,5 @@
+import { IconProps } from "phosphor-react/dist/lib/Icon";
+
 export enum IconStyle {
   THIN = "thin",
   LIGHT = "light",
@@ -26,10 +28,11 @@ export enum IconCategory {
   OTHER = "Other",
 }
 
-export interface Icon {
+export interface IconEntry {
   name: string;
-  style: IconStyle;
   categories: IconCategory[];
   tags: string[];
-  asset: React.FC<React.SVGProps<SVGSVGElement>>;
+  Icon: React.ForwardRefExoticComponent<
+    IconProps & React.RefAttributes<SVGSVGElement>
+  >;
 }
diff --git a/src/state/atoms.ts b/src/state/atoms.ts
index ef0c18a..3d07d35 100644
--- a/src/state/atoms.ts
+++ b/src/state/atoms.ts
@@ -1,5 +1,5 @@
 import { atom } from "recoil";
-import { IconStyle } from "../lib/Icon";
+import { IconStyle } from "../lib";
 
 /**
  * ATOM
@@ -20,7 +20,7 @@ export const styleQueryAtom = atom<IconStyle>({
 
 export const iconSizeAtom = atom<number>({
   key: "iconSizeAtom",
-  default: 24,
+  default: 32,
 });
 
 export const iconColorAtom = atom<string>({
diff --git a/src/state/selectors.ts b/src/state/selectors.ts
index 25447a9..e72d940 100644
--- a/src/state/selectors.ts
+++ b/src/state/selectors.ts
@@ -1,8 +1,8 @@
 import { selector, selectorFamily } from "recoil";
 
 import { searchQueryAtom, styleQueryAtom } from "./atoms";
-import { Icon, IconStyle, IconCategory } from "../lib/Icon";
-import { iconList } from "../lib/iconList";
+import { IconEntry, IconCategory } from "../lib";
+import { icons } from "../lib/icons";
 
 /**
  * SELECTOR
@@ -11,7 +11,7 @@ import { iconList } from "../lib/iconList";
  * modifies the given state in some way:
  */
 
-const isQueryMatch = (icon: Icon, query: string): boolean => {
+const isQueryMatch = (icon: IconEntry, query: string): boolean => {
   return (
     icon.name.includes(query) ||
     icon.tags.some((tag) => tag.toLowerCase().includes(query)) ||
@@ -19,44 +19,43 @@ const isQueryMatch = (icon: Icon, query: string): boolean => {
   );
 };
 
-const isStyleMatch = (icon: Icon, style?: IconStyle): boolean => {
-  return !style || icon.style === style;
-};
-
-export const filteredQueryResultsSelector = selector<Icon[]>({
+export const filteredQueryResultsSelector = selector<Readonly<IconEntry[]>>({
   key: "filteredQueryResultsSelector",
   get: ({ get }) => {
     const query = get(searchQueryAtom).trim().toLowerCase();
     const style = get(styleQueryAtom);
 
-    if (!query && !style) return iconList;
+    if (!query && !style) return icons;
 
-    return iconList.filter((icon) => {
-      return isStyleMatch(icon, style) && isQueryMatch(icon, query);
+    return icons.filter((icon) => {
+      return isQueryMatch(icon, query);
     });
     // .sort(() => Math.floor(Math.random() - 0.5));
   },
 });
 
-type CategorizedIcons = {
-  [key in IconCategory]?: Icon[];
-};
+type CategorizedIcons = Partial<Record<IconCategory, IconEntry[]>>;
 
-export const categorizedQueryResultsSelector = selector<CategorizedIcons>({
+export const categorizedQueryResultsSelector = selector<
+  Readonly<CategorizedIcons>
+>({
   key: "categorizedQueryResultsSelector",
   get: ({ get }) => {
     const filteredResults = get(filteredQueryResultsSelector);
     return filteredResults.reduce<CategorizedIcons>((acc, curr) => {
       curr.categories.forEach((category) => {
-        if (acc[category]) acc[category]?.push(curr);
-        else acc[category] = [curr];
+        if (!acc[category]) acc[category] = [];
+        acc[category]!!.push(curr);
       });
       return acc;
     }, {});
   },
 });
 
-export const singleCategoryQueryResultsSelector = selectorFamily<Icon[], IconCategory>({
+export const singleCategoryQueryResultsSelector = selectorFamily<
+  Readonly<IconEntry[]>,
+  IconCategory
+>({
   key: "singleCategoryQueryResultsSelector",
   get: (category: IconCategory) => ({ get }) => {
     const filteredResults = get(filteredQueryResultsSelector);