Icons management

apps/web/package.json

@@ -73,7 +73,6 @@
     "@storybook/addon-essentials": "^6.4.14",
     "@storybook/addon-links": "^6.4.14",
     "@storybook/node-logger": "^6.4.14",
-    "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.14",
     "@types/react": "^17.0.0",
     "@types/styled-components": "^5.1.7",

apps/web/src/design-system/config/colors.ts

@@ -2,6 +2,7 @@ export const colors = {
   BGLight: '#EDF0F2',
   BGDark: '#13131A',
   B98: '#F5F8FA',
+  B85: '#D5D5D9',
   B80: '#BEBECC',
   B70: '#A1A1B2',
   B60: '#828299',

apps/web/src/design-system/config/inputs.styles.ts

@@ -8,6 +8,9 @@ export const inputStyles = (theme: MantineTheme) => {
   const secondaryColor = dark ? theme.colors.dark[3] : theme.colors.gray[6];
 
   return {
+    rightSection: {
+      color: `${theme.colors.gray[7]} !important`,
+    },
     input: {
       height: '50px',
       lineHeight: '50px',

apps/web/src/design-system/icons/Icons.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Group, Code, ActionIcon, Text, Grid } from '@mantine/core';
+import * as allIcons from '.';
+import { Input } from '../input/Input';
+
+export default {
+  title: 'Icons/Icons',
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+    viewMode: 'canvas',
+    previewTabs: {
+      'storybook/docs/panel': {
+        hidden: true,
+      },
+    },
+  },
+  argTypes: {},
+};
+
+export const Icons = () => {
+  const [search, setSearch] = useState('');
+  const [iconName, setIconName] = useState('IconName');
+
+  return (
+    <div style={{ width: '100%', margin: 'auto' }}>
+      <Input label="Search Icon" placeholder="Search" value={search} onChange={(e) => setSearch(e.target.value)} />
+      <Grid align="center" gutter="xs" style={{ padding: '10px', paddingTop: '20px', paddingBottom: '20px' }}>
+        {Object.entries(allIcons).map(([name, Icon]) => {
+          if (name.includes(search.toLowerCase())) {
+            return (
+              <Grid.Col key={name} span={3}>
+                <Group align="center" spacing={3} direction="row">
+                  <ActionIcon variant="transparent" onClick={() => setIconName(name)}>
+                    <Icon width="20px" height="20px" />
+                  </ActionIcon>
+                  <Text align="center" weight={400} size="xs">
+                    {name}
+                  </Text>
+                </Group>
+              </Grid.Col>
+            );
+          }
+
+          return null;
+        })}
+      </Grid>
+      <Code block>
+        {`
+import { ${iconName} } from 'apps/web/src/design-system/icons'
+
+<${iconName}/> `}
+      </Code>
+    </div>
+  );
+};

apps/web/src/design-system/icons/actions/CloseCircle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function CloseCircle(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8 0.5C3.84375 0.5 0.5 3.875 0.5 8C0.5 12.1562 3.84375 15.5 8 15.5C12.125 15.5 15.5 12.1562 15.5 8C15.5 3.875 12.125 0.5 8 0.5ZM10.5 9.5C10.8125 9.78125 10.8125 10.25 10.5 10.5312C10.2188 10.8438 9.75 10.8438 9.46875 10.5312L8 9.0625L6.5 10.5312C6.21875 10.8438 5.75 10.8438 5.46875 10.5312C5.15625 10.25 5.15625 9.78125 5.46875 9.5L6.9375 8L5.46875 6.53125C5.15625 6.25 5.15625 5.78125 5.46875 5.5C5.75 5.1875 6.21875 5.1875 6.5 5.5L8 6.96875L9.46875 5.5C9.75 5.1875 10.2188 5.1875 10.5 5.5C10.8125 5.78125 10.8125 6.25 10.5 6.53125L9.03125 8L10.5 9.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/actions/Copy.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+/* eslint-disable */
+export function Copy(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M21.9997 12.8333H14.4997C13.5792 12.8333 12.833 13.5794 12.833 14.4999V21.9999C12.833 22.9204 13.5792 23.6666 14.4997 23.6666H21.9997C22.9202 23.6666 23.6663 22.9204 23.6663 21.9999V14.4999C23.6663 13.5794 22.9202 12.8333 21.9997 12.8333Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+      <path
+        d="M9.5 17.8333H8.66667C8.22464 17.8333 7.80072 17.6577 7.48816 17.3452C7.17559 17.0326 7 16.6087 7 16.1667V8.66667C7 8.22464 7.17559 7.80072 7.48816 7.48816C7.80072 7.17559 8.22464 7 8.66667 7H16.1667C16.6087 7 17.0326 7.17559 17.3452 7.48816C17.6577 7.80072 17.8333 8.22464 17.8333 8.66667V9.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/actions/Edit.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+/* eslint-disable */
+export function Edit(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.2071 6.32843C22.4174 6.11814 22.7026 6 23 6C23.2974 6 23.5826 6.11814 23.7929 6.32843C24.0032 6.53872 24.1213 6.82393 24.1213 7.12132C24.1213 7.41871 24.0032 7.70392 23.7929 7.91421L14.4888 17.2184L12.3744 17.747L12.903 15.6326L22.2071 6.32843ZM23 4C22.1722 4 21.3783 4.32885 20.7929 4.91421L11.2929 14.4142C11.1647 14.5424 11.0738 14.703 11.0299 14.8788L10.0299 18.8788C9.94466 19.2196 10.0445 19.58 10.2929 19.8284C10.5413 20.0768 10.9018 20.1767 11.2425 20.0915L15.2425 19.0915C15.4184 19.0475 15.5789 18.9566 15.7071 18.8284L25.2071 9.32843C25.7925 8.74307 26.1213 7.94915 26.1213 7.12132C26.1213 6.29349 25.7925 5.49957 25.2071 4.91421C24.6217 4.32885 23.8278 4 23 4ZM7 6.12109C6.20435 6.12109 5.44129 6.43716 4.87868 6.99977C4.31607 7.56238 4 8.32544 4 9.12109V23.1211C4 23.9167 4.31607 24.6798 4.87868 25.2424C5.44129 25.805 6.20435 26.1211 7 26.1211H21C21.7957 26.1211 22.5587 25.805 23.1213 25.2424C23.6839 24.6798 24 23.9167 24 23.1211V16.1211C24 15.5688 23.5523 15.1211 23 15.1211C22.4477 15.1211 22 15.5688 22 16.1211V23.1211C22 23.3863 21.8946 23.6407 21.7071 23.8282C21.5196 24.0157 21.2652 24.1211 21 24.1211H7C6.73478 24.1211 6.48043 24.0157 6.29289 23.8282C6.10536 23.6407 6 23.3863 6 23.1211V9.12109C6 8.85588 6.10536 8.60152 6.29289 8.41399C6.48043 8.22645 6.73478 8.12109 7 8.12109H14C14.5523 8.12109 15 7.67338 15 7.12109C15 6.56881 14.5523 6.12109 14 6.12109H7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/actions/PlusCircle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function PlusCircle(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8 0.5C3.84375 0.5 0.5 3.875 0.5 8C0.5 12.1562 3.84375 15.5 8 15.5C12.125 15.5 15.5 12.1562 15.5 8C15.5 3.875 12.125 0.5 8 0.5ZM11 8.75H8.75V11C8.75 11.4375 8.40625 11.75 8 11.75C7.5625 11.75 7.25 11.4375 7.25 11V8.75H5C4.5625 8.75 4.25 8.4375 4.25 8C4.25 7.59375 4.5625 7.25 5 7.25H7.25V5C7.25 4.59375 7.5625 4.25 8 4.25C8.40625 4.25 8.75 4.59375 8.75 5V7.25H11C11.4062 7.25 11.75 7.59375 11.75 8C11.75 8.4375 11.4062 8.75 11 8.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/actions/Search.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function Search(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="15" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M15.8438 15.1562L11.4062 10.75C12.4062 9.59375 13 8.125 13 6.5C13 2.9375 10.0625 0 6.5 0C2.90625 0 0 2.9375 0 6.5C0 10.0938 2.90625 13 6.5 13C8.09375 13 9.5625 12.4375 10.7188 11.4375L15.125 15.875C15.2188 15.9688 15.3438 16 15.5 16C15.625 16 15.75 15.9688 15.8438 15.875C16.0312 15.6875 16.0312 15.3438 15.8438 15.1562ZM6.5 12C3.4375 12 1 9.5625 1 6.5C1 3.46875 3.4375 1 6.5 1C9.53125 1 12 3.46875 12 6.5C12 9.5625 9.53125 12 6.5 12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/actions/Upload.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+/* eslint-disable */
+export function Upload(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M24 18V22C24 22.5304 23.7893 23.0391 23.4142 23.4142C23.0391 23.7893 22.5304 24 22 24H8C7.46957 24 6.96086 23.7893 6.58579 23.4142C6.21071 23.0391 6 22.5304 6 22V18"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M20 11L15 6L10 11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M15 6V18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/arrows/ArrowDown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function ArrowDown(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M10.7188 2C11.2812 1.4375 10.875 0.5 10.125 0.5H1.84375C1.09375 0.5 0.6875 1.4375 1.25 2L5.375 6.25C5.53125 6.4375 5.75 6.5 6 6.5C6.21875 6.5 6.4375 6.4375 6.59375 6.25L10.7188 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/Activity.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function Activity(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M18.3333 9H15L12.5 16.5L7.49999 1.5L4.99999 9H1.66666"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/Bell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+/* eslint-disable */
+export function Bell(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M21.6667 10.8C21.6667 8.99653 20.9643 7.26692 19.714 5.99167C18.4638 4.71643 16.7681 4 15 4C13.2319 4 11.5362 4.71643 10.286 5.99167C9.03571 7.26692 8.33333 8.99653 8.33333 10.8C8.33333 18.7333 5 21 5 21H25C25 21 21.6667 18.7333 21.6667 10.8Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.7295 24C17.4521 24.6072 17.0539 25.1113 16.5748 25.4617C16.0956 25.812 15.5524 25.9965 14.9995 25.9965C14.4466 25.9965 13.9034 25.812 13.4243 25.4617C12.9452 25.1113 12.547 24.6072 12.2695 24"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/Bolt.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function Bolt(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.83333 1.6665L1.5 11.6665H9L8.16667 18.3332L16.5 8.33317H9L9.83333 1.6665Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/DotsHorizontal.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function DotsHorizontal(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/EyeShield.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+/* eslint-disable */
+export function EyeShield(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="15" cy="13" r="1.25" stroke="#525266" />
+      <path
+        d="M19.4101 11.9547C19.8088 12.3943 20.0081 12.6141 20.0081 13C20.0081 13.3859 19.8088 13.6057 19.4101 14.0453C18.4748 15.0767 16.849 16.5 15 16.5C13.151 16.5 11.5252 15.0767 10.5899 14.0453C10.1912 13.6057 9.99188 13.3859 9.99188 13C9.99188 12.6141 10.1912 12.3943 10.5899 11.9547C11.5252 10.9233 13.151 9.5 15 9.5C16.849 9.5 18.4748 10.9233 19.4101 11.9547Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M23.462 6.28862L23.0681 7.20776L23.462 6.28862L15.7878 2.99968C15.2847 2.78406 14.7153 2.78406 14.2122 2.99968L6.53797 6.28862C5.72805 6.63572 5.24073 7.472 5.33804 8.34777L6.23939 16.4599C6.43906 18.2569 7.3263 19.907 8.71529 21.0644L13.7196 25.2347C14.4613 25.8528 15.5387 25.8528 16.2804 25.2347L21.2847 21.0644C22.6737 19.907 23.5609 18.2569 23.7606 16.4599L24.662 8.34777C24.7593 7.47199 24.2719 6.63572 23.462 6.28862Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/Lock.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+/* eslint-disable */
+export function Lock(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5 15.25C5 13.3644 5 12.4216 5.58579 11.8358C6.17157 11.25 7.11438 11.25 9 11.25H21C22.8856 11.25 23.8284 11.25 24.4142 11.8358C25 12.4216 25 13.3644 25 15.25V20.25C25 23.0784 25 24.4926 24.1213 25.3713C23.2426 26.25 21.8284 26.25 19 26.25H11C8.17157 26.25 6.75736 26.25 5.87868 25.3713C5 24.4926 5 23.0784 5 20.25V15.25Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M20 10V8.75C20 5.98858 17.7614 3.75 15 3.75V3.75C12.2386 3.75 10 5.98858 10 8.75V10"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <circle cx="15" cy="18.75" r="2.5" fill="currentColor" />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/Moon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function Moon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M22.934 21.1084L23.7253 21.7197C23.729 21.715 23.7326 21.7103 23.7361 21.7055L22.934 21.1084ZM14.0913 5L14.8958 5.59408C15.1299 5.27706 15.156 4.8521 14.9624 4.50881C14.7688 4.16553 14.3917 3.96795 13.9992 4.00425L14.0913 5ZM24.983 15.8063L25.9772 15.6992C25.9418 15.3709 25.7466 15.0812 25.4556 14.9251C25.1646 14.769 24.8153 14.7667 24.5222 14.9188L24.983 15.8063ZM22.1426 20.497C21.0954 21.8526 19.6843 22.8815 18.0743 23.4636L18.7543 25.3444C20.7217 24.6332 22.446 23.3758 23.7253 21.7197L22.1426 20.497ZM18.0743 23.4636C16.4644 24.0456 14.7221 24.1566 13.0514 23.7838L12.6158 25.7358C14.6576 26.1914 16.7868 26.0557 18.7543 25.3444L18.0743 23.4636ZM13.0514 23.7838C11.3808 23.411 9.8506 22.5696 8.64007 21.358L7.22525 22.7716C8.70429 24.2519 10.5741 25.2801 12.6158 25.7358L13.0514 23.7838ZM8.64007 21.358C7.42953 20.1465 6.58869 18.6148 6.21607 16.9422L4.26393 17.3771C4.71909 19.4202 5.74622 21.2914 7.22525 22.7716L8.64007 21.358ZM6.21607 16.9422C5.84344 15.2696 5.95446 13.5254 6.53612 11.9137L4.65489 11.2348C3.94437 13.2036 3.80876 15.3341 4.26393 17.3771L6.21607 16.9422ZM6.53612 11.9137C7.11778 10.302 8.14598 8.8896 9.5003 7.84161L8.27631 6.25988C6.62151 7.5404 5.36541 9.26605 4.65489 11.2348L6.53612 11.9137ZM9.5003 7.84161C10.8546 6.79362 12.479 6.1534 14.1834 5.99575L13.9992 4.00425C11.9162 4.19691 9.93113 4.97934 8.27631 6.25988L9.5003 7.84161ZM13.2869 4.40592C12.036 6.09978 11.4341 8.18663 11.5906 10.2869L13.585 10.1383C13.4641 8.51525 13.9293 6.90274 14.8958 5.59408L13.2869 4.40592ZM11.5906 10.2869C11.7471 12.3872 12.6516 14.3617 14.1398 15.8512L15.5546 14.4376C14.4049 13.287 13.706 11.7614 13.585 10.1383L11.5906 10.2869ZM14.1398 15.8512C15.628 17.3407 17.6012 18.2463 19.7003 18.403L19.8492 16.4085C18.2282 16.2875 16.7042 15.5882 15.5546 14.4376L14.1398 15.8512ZM19.7003 18.403C20.3202 18.4492 20.9977 18.3386 21.6151 18.1847C22.2458 18.0275 22.8814 17.8076 23.4398 17.5897C24.0005 17.371 24.4982 17.1486 24.8553 16.9812C25.0343 16.8973 25.1791 16.8266 25.2802 16.7764C25.3307 16.7513 25.3704 16.7313 25.3981 16.7173C25.4119 16.7102 25.4227 16.7047 25.4304 16.7008C25.4342 16.6988 25.4372 16.6972 25.4395 16.6961C25.4406 16.6955 25.4415 16.695 25.4422 16.6947C25.4426 16.6945 25.4429 16.6943 25.4431 16.6942C25.4433 16.6941 25.4434 16.694 25.4435 16.694C25.4436 16.6939 25.4437 16.6939 24.983 15.8063C24.5222 14.9188 24.5223 14.9188 24.5224 14.9187C24.5224 14.9187 24.5225 14.9187 24.5225 14.9187C24.5225 14.9186 24.5225 14.9186 24.5225 14.9187C24.5224 14.9187 24.5221 14.9189 24.5216 14.9191C24.5206 14.9197 24.5188 14.9206 24.5162 14.9219C24.5111 14.9245 24.5029 14.9287 24.4917 14.9344C24.4694 14.9458 24.4354 14.9629 24.3908 14.9851C24.3015 15.0294 24.1702 15.0935 24.0063 15.1703C23.6775 15.3245 23.2218 15.528 22.713 15.7265C22.2019 15.9258 21.6517 16.1144 21.1314 16.2441C20.598 16.377 20.1594 16.4317 19.8492 16.4085L19.7003 18.403ZM23.7361 21.7055C24.1549 21.143 24.7536 20.2013 25.2277 19.1532C25.6876 18.1365 26.1027 16.8641 25.9772 15.6992L23.9887 15.9135C24.0552 16.5301 23.8273 17.3962 23.4055 18.3289C22.9978 19.2302 22.4761 20.0488 22.1318 20.5113L23.7361 21.7055Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/web/src/design-system/icons/general/MusicNote.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+/* eslint-disable */
+export function MusicNote(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M11.25 20H7.81556C7.0565 20 6.67696 20 6.37035 20.1017C5.77087 20.3005 5.30054 20.7709 5.1017 21.3704C5 21.677 5 22.0565 5 22.8156V22.8156C5 23.7218 5 24.1749 5.12857 24.5159C5.38062 25.1845 5.97018 25.6678 6.6752 25.7838C7.03484 25.843 7.47914 25.7542 8.36774 25.5765L8.73786 25.5024C9.59647 25.3307 10.0258 25.2448 10.3522 25.0293C10.689 24.8069 10.9506 24.4877 11.1026 24.1139C11.25 23.7515 11.25 23.3137 11.25 22.4381V10.7792C11.25 9.20946 11.25 8.42459 11.7033 7.87163C12.1566 7.31867 12.9263 7.16475 14.4655 6.85689L18.9655 5.95689C21.1792 5.51417 22.286 5.29281 23.018 5.89292C23.75 6.49304 23.75 7.62176 23.75 9.87922V11.25M23.75 17.5V19.9381C23.75 20.8137 23.75 21.2515 23.6026 21.6139C23.4506 21.9877 23.189 22.3069 22.8522 22.5293C22.5258 22.7448 22.0965 22.8307 21.2379 23.0024L20.8677 23.0765C19.9791 23.2542 19.5348 23.343 19.1752 23.2838C18.4702 23.1678 17.8806 22.6845 17.6286 22.0159C17.5 21.6749 17.5 21.2218 17.5 20.3156V20.3156C17.5 19.5565 17.5 19.177 17.6017 18.8704C17.8005 18.2709 18.2709 17.8005 18.8704 17.6017C19.177 17.5 19.5565 17.5 20.3156 17.5H23.75ZM23.75 17.5V11.25M23.75 11.25L11.25 13.75"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}