Add 80+ additional icons from FontAwesome (#6803)

* Add 80+ additional icons from FontAwesome

* fix: color switch transition, add 6 more icons to fill out grid

* Add strict validation for collection icon

* fix: Avoid import from app in server

shared/components/Flex.tsx

@@ -0,0 +1,38 @@
+import { CSSProperties } from "react";
+import styled from "styled-components";
+
+type JustifyValues = CSSProperties["justifyContent"];
+
+type AlignValues = CSSProperties["alignItems"];
+
+const Flex = styled.div<{
+  auto?: boolean;
+  column?: boolean;
+  align?: AlignValues;
+  justify?: JustifyValues;
+  wrap?: boolean;
+  shrink?: boolean;
+  reverse?: boolean;
+  gap?: number;
+}>`
+  display: flex;
+  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
+  flex-direction: ${({ column, reverse }) =>
+    reverse
+      ? column
+        ? "column-reverse"
+        : "row-reverse"
+      : column
+      ? "column"
+      : "row"};
+  align-items: ${({ align }) => align};
+  justify-content: ${({ justify }) => justify};
+  flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
+  flex-shrink: ${({ shrink }) =>
+    shrink === true ? 1 : shrink === false ? 0 : "initial"};
+  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
+  min-height: 0;
+  min-width: 0;
+`;
+
+export default Flex;