♻️ Use named exports for icons (#647)

2025-05-24 14:26:23 +02:00 · 2023-04-04 08:24:55 +01:00 · 2023-04-04 08:24:55 +01:00 · 12be9851e1
commit 12be9851e1
parent fbcd5a5d2a
118 changed files with 216 additions and 375 deletions
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@ -13,7 +13,7 @@ const nextConfig = {
  i18n: i18n,
  productionBrowserSourceMaps: true,
  output: "standalone",
-  transpilePackages: ["@rallly/backend"],
+  transpilePackages: ["@rallly/backend", "@rallly/icons"],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
--- a/apps/web/src/components/admin-control.tsx
+++ b/apps/web/src/components/admin-control.tsx
@ -1,4 +1,4 @@
-import Share from "@rallly/icons/share.svg";
+import { ShareIcon } from "@rallly/icons";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import React from "react";
@ -27,7 +27,7 @@ export const AdminControls = (props: { children?: React.ReactNode }) => {
          <ManagePoll placement="bottom-end" />
          <Button
            type="primary"
-            icon={<Share />}
+            icon={<ShareIcon />}
            onClick={() => {
              setIsSharingVisible(!isSharingVisible);
            }}
--- a/apps/web/src/components/button.tsx
+++ b/apps/web/src/components/button.tsx
@ -1,4 +1,4 @@
-import SpinnerIcon from "@rallly/icons/spinner.svg";
+import { SpinnerIcon } from "@rallly/icons";
 import clsx from "clsx";
 import * as React from "react";

--- a/apps/web/src/components/crisp-chat.tsx
+++ b/apps/web/src/components/crisp-chat.tsx
@ -1,4 +1,4 @@
-import Chat from "@rallly/icons/chat.svg";
+import { ChatIcon } from "@rallly/icons";
 import * as React from "react";

 import { Button } from "./button";
@ -21,7 +21,7 @@ export const ChatButton: React.FunctionComponent<{ text?: string }> = ({
  text,
 }) => {
  return (
-    <Button icon={<Chat />} onClick={showCrispChat}>
+    <Button icon={<ChatIcon />} onClick={showCrispChat}>
      {text}
    </Button>
  );
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/apps/web/src/components/discussion/discussion.tsx
@ -1,6 +1,5 @@
 import { trpc } from "@rallly/backend";
-import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
-import Trash from "@rallly/icons/trash.svg";
+import { DotsHorizontalIcon, TrashIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@ -110,10 +109,10 @@ const Discussion: React.FunctionComponent = () => {
                  {canDelete && (
                    <Dropdown
                      placement="bottom-start"
-                      trigger={<CompactButton icon={DotsHorizontal} />}
+                      trigger={<CompactButton icon={DotsHorizontalIcon} />}
                    >
                      <DropdownItem
-                        icon={Trash}
+                        icon={TrashIcon}
                        label={t("deleteComment")}
                        onClick={() => {
                          deleteComment.mutate({
--- a/apps/web/src/components/error-page.tsx
+++ b/apps/web/src/components/error-page.tsx
@ -1,4 +1,4 @@
-import EmojiSad from "@rallly/icons/emoji-sad.svg";
+import { EmojiSadIcon } from "@rallly/icons";
 import Head from "next/head";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
@ -11,7 +11,7 @@ export interface ComponentProps {
 }

 const ErrorPage: React.FunctionComponent<ComponentProps> = ({
-  icon: Icon = EmojiSad,
+  icon: Icon = EmojiSadIcon,
  title,
  description,
 }) => {
--- a/apps/web/src/components/feedback.tsx
+++ b/apps/web/src/components/feedback.tsx
@ -1,6 +1,5 @@
 import { trpc } from "@rallly/backend";
-import CheckCircle from "@rallly/icons/check-circle.svg";
-import Speakerphone from "@rallly/icons/speakerphone.svg";
+import { CheckCircleIcon, SpeakerphoneIcon } from "@rallly/icons";
 import Link from "next/link";
 import { Trans, useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
@ -25,7 +24,7 @@ const FeedbackForm = (props: { onClose: () => void }) => {
      {formState.isSubmitted ? (
        <div className="absolute inset-0 flex h-full w-full items-center justify-center bg-white">
          <div className="space-y-3 text-center">
-            <CheckCircle className="inline-block h-14 text-green-500" />
+            <CheckCircleIcon className="inline-block h-14 text-green-500" />
            <div>{t("feedbackSent")}</div>
            <div>
              <button onClick={props.onClose} className="text-link">
@ -99,7 +98,7 @@ const FeedbackButton = () => {
        onClick={show}
        className="shadow-huge inline-flex h-14 w-14 items-center justify-center rounded-full bg-slate-800"
      >
-        <Speakerphone className="h-7 text-white" />
+        <SpeakerphoneIcon className="h-7 text-white" />
      </button>
    </Tooltip>
  );
--- a/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
@ -1,5 +1,4 @@
-import ChevronLeft from "@rallly/icons/chevron-left.svg";
-import ChevronRight from "@rallly/icons/chevron-right.svg";
+import { ChevronLeftIcon, ChevronRightIcon } from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import * as React from "react";

@ -24,13 +23,13 @@ const DateNavigationToolbar: React.FunctionComponent<
      <div className="flex items-center space-x-2">
        <div className="segment-button">
          <button type="button" onClick={onPrevious}>
-            <ChevronLeft className="h-5" />
+            <ChevronLeftIcon className="h-5" />
          </button>
          <button type="button" onClick={onToday}>
            {t("today")}
          </button>
          <button type="button" onClick={onNext}>
-            <ChevronRight className="h-5" />
+            <ChevronRightIcon className="h-5" />
          </button>
        </div>
      </div>
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@ -1,11 +1,13 @@
-import Calendar from "@rallly/icons/calendar.svg";
-import ChevronLeft from "@rallly/icons/chevron-left.svg";
-import ChevronRight from "@rallly/icons/chevron-right.svg";
-import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
-import Magic from "@rallly/icons/magic.svg";
-import PlusSm from "@rallly/icons/plus-sm.svg";
-import Trash from "@rallly/icons/trash.svg";
-import X from "@rallly/icons/x.svg";
+import {
+  CalendarIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+  PlusSmIcon,
+  SparklesIcon,
+  TrashIcon,
+  XIcon,
+} from "@rallly/icons";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@ -86,7 +88,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
          <div className="flex w-full flex-col">
            <div className="mb-3 flex items-center justify-center space-x-4">
              <Button
-                icon={<ChevronLeft />}
+                icon={<ChevronLeftIcon />}
                title={t("previousMonth")}
                onClick={datepicker.prev}
              />
@ -95,7 +97,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
              </div>
              <Button
                title={t("nextMonth")}
-                icon={<ChevronRight />}
+                icon={<ChevronRightIcon />}
                onClick={datepicker.next}
              />
            </div>
@ -305,7 +307,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                                }}
                              />
                              <CompactButton
-                                icon={X}
+                                icon={XIcon}
                                onClick={() => {
                                  onChange([
                                    ...options.slice(0, index),
@ -318,7 +320,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                        })}
                        <div className="flex items-center space-x-3">
                          <Button
-                            icon={<PlusSm />}
+                            icon={<PlusSmIcon />}
                            onClick={() => {
                              const lastOption = expectTimeOption(
                                optionsForDay[optionsForDay.length - 1].option,
@ -350,11 +352,13 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                            {t("addTimeOption")}
                          </Button>
                          <Dropdown
-                            trigger={<CompactButton icon={DotsHorizontal} />}
+                            trigger={
+                              <CompactButton icon={DotsHorizontalIcon} />
+                            }
                            placement="bottom-start"
                          >
                            <DropdownItem
-                              icon={Magic}
+                              icon={SparklesIcon}
                              disabled={datepicker.selection.length < 2}
                              label={t("applyToAllDates")}
                              onClick={() => {
@ -393,7 +397,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                            />
                            <DropdownItem
                              label={t("deleteDate")}
-                              icon={Trash}
+                              icon={TrashIcon}
                              onClick={() => {
                                onChange(
                                  removeAllOptionsForDay(
@ -421,7 +425,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                      {...getDateProps(selectedDate)}
                      annotation={
                        <CompactButton
-                          icon={X}
+                          icon={XIcon}
                          onClick={() => {
                            // TODO (Luke Vella) [2022-03-19]: Find cleaner way to manage this state
                            // Quite tedious right now to remove a single element
@ -438,7 +442,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
          ) : (
            <div className="flex h-full items-center justify-center py-12">
              <div className="text-center font-medium text-gray-400">
-                <Calendar className="mb-2 inline-block h-12 w-12" />
+                <CalendarIcon className="mb-2 inline-block h-12 w-12" />
                <div>{t("noDatesSelected")}</div>
              </div>
            </div>
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
@ -6,7 +6,7 @@ import {
  useFloating,
 } from "@floating-ui/react-dom-interactions";
 import { Listbox } from "@headlessui/react";
-import ChevronDown from "@rallly/icons/chevron-down.svg";
+import { ChevronDownIcon } from "@rallly/icons";
 import clsx from "clsx";
 import * as React from "react";

@ -88,7 +88,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
            <Listbox.Button className="btn-default text-left">
              <span className="grow truncate">{dayjs(value).format("LT")}</span>
              <span className="pointer-events-none ml-2 flex">
-                <ChevronDown className="h-5 w-5" />
+                <ChevronDownIcon className="h-5 w-5" />
              </span>
            </Listbox.Button>
          </div>
--- a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
+++ b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
@ -1,5 +1,4 @@
-import Calendar from "@rallly/icons/calendar.svg";
-import Table from "@rallly/icons/table.svg";
+import { CalendarIcon, TableIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@ -171,7 +170,7 @@ const PollOptionsForm: React.FunctionComponent<
              }}
              type="button"
            >
-              <Calendar className="mr-2 h-5 w-5" /> {t("monthView")}
+              <CalendarIcon className="mr-2 h-5 w-5" /> {t("monthView")}
            </button>
            <button
              className={clsx({
@ -182,7 +181,7 @@ const PollOptionsForm: React.FunctionComponent<
                setValue("view", "week");
              }}
            >
-              <Table className="mr-2 h-5 w-5" /> {t("weekView")}
+              <TableIcon className="mr-2 h-5 w-5" /> {t("weekView")}
            </button>
          </div>
        </div>
--- a/apps/web/src/components/full-page-loader.tsx
+++ b/apps/web/src/components/full-page-loader.tsx
@ -1,4 +1,4 @@
-import Spinner from "@rallly/icons/spinner.svg";
+import { SpinnerIcon } from "@rallly/icons";
 import clsx from "clsx";
 import * as React from "react";

@ -14,7 +14,7 @@ const FullPageLoader: React.FunctionComponent<FullPageLoaderProps> = ({
  return (
    <div className={clsx("flex h-full items-center justify-center", className)}>
      <div className="bg-primary-600 flex items-center rounded-lg px-4 py-3 text-sm text-white shadow-sm">
-        <Spinner className="mr-3 h-5 animate-spin" />
+        <SpinnerIcon className="mr-3 h-5 animate-spin" />
        {children}
      </div>
    </div>
--- a/apps/web/src/components/home/bonus.tsx
+++ b/apps/web/src/components/home/bonus.tsx
@ -1,6 +1,4 @@
-import Code from "@rallly/icons/code.svg";
-import CursorClick from "@rallly/icons/cursor-click.svg";
-import Server from "@rallly/icons/server.svg";
+import { CodeIcon, CursorClickIcon, ServerIcon } from "@rallly/icons";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";

@ -15,7 +13,7 @@ const Bonus: React.FunctionComponent = () => {
      <div className="grid grid-cols-4 gap-16">
        <div className="col-span-4 md:col-span-2 lg:col-span-1">
          <div className="mb-4 text-gray-400">
-            <CursorClick className="w-16" />
+            <CursorClickIcon className="w-16" />
          </div>
          <h3 className="heading-sm">{t("noLoginRequired")}</h3>
          <div className="text text-base leading-relaxed">
@ -24,7 +22,7 @@ const Bonus: React.FunctionComponent = () => {
        </div>
        <div className="col-span-4 md:col-span-2 lg:col-span-1">
          <div className="mb-4 text-gray-400">
-            <Code className="w-16" />
+            <CodeIcon className="w-16" />
          </div>
          <h3 className="heading-sm">{t("openSource")}</h3>
          <div className="text text-base leading-relaxed">
@ -44,7 +42,7 @@ const Bonus: React.FunctionComponent = () => {
        </div>
        <div className="col-span-4 md:col-span-2 lg:col-span-1">
          <div className="mb-4 text-gray-400">
-            <Server className="w-16" />
+            <ServerIcon className="w-16" />
          </div>
          <h3 className="heading-sm">{t("selfHostable")}</h3>
          <div className="text text-base leading-relaxed">
--- a/apps/web/src/components/home/features.tsx
+++ b/apps/web/src/components/home/features.tsx
@ -1,7 +1,4 @@
-import Bell from "@rallly/icons/bell.svg";
-import Chat from "@rallly/icons/chat.svg";
-import Clock from "@rallly/icons/clock.svg";
-import DeviceMobile from "@rallly/icons/device-mobile.svg";
+import { BellIcon, ChatIcon, ClockIcon, DeviceMobileIcon } from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import * as React from "react";

@ -14,28 +11,28 @@ const Features: React.FunctionComponent = () => {
      <div className="grid grid-cols-2 gap-12">
        <div className="col-span-2 md:col-span-1">
          <div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-500">
-            <Clock className="h-8 w-8" />
+            <ClockIcon className="h-8 w-8" />
          </div>
          <h3 className="heading-sm flex items-center">{t("timeSlots")}</h3>
          <p className="text">{t("timeSlotsDescription")}</p>
        </div>
        <div className="col-span-2 md:col-span-1">
          <div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-500">
-            <DeviceMobile className="h-8 w-8" />
+            <DeviceMobileIcon className="h-8 w-8" />
          </div>
          <h3 className="heading-sm">{t("mobileFriendly")}</h3>
          <p className="text">{t("mobileFriendlyDescription")}</p>
        </div>
        <div className="col-span-2 md:col-span-1">
          <div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-500">
-            <Bell className="h-8 w-8" />
+            <BellIcon className="h-8 w-8" />
          </div>
          <h3 className="heading-sm">{t("notifications")}</h3>
          <p className="text">{t("notificationsDescription")}</p>
        </div>
        <div className="col-span-2 md:col-span-1">
          <div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-500">
-            <Chat className="h-8 w-8" />
+            <ChatIcon className="h-8 w-8" />
          </div>
          <h3 className="heading-sm">{t("comments")}</h3>
          <p className="text">{t("commentsDescription")}</p>
--- a/apps/web/src/components/layouts/page-layout.tsx
+++ b/apps/web/src/components/layouts/page-layout.tsx
@ -1,5 +1,4 @@
-import DotsVertical from "@rallly/icons/dots-vertical.svg";
-import Github from "@rallly/icons/github.svg";
+import { DotsVerticalIcon, GithubIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { domAnimation, LazyMotion } from "framer-motion";
 import Link from "next/link";
@ -52,7 +51,7 @@ const Menu: React.FunctionComponent<{ className: string }> = ({
        href="https://github.com/lukevella/rallly"
        className="hover:text-primary-600 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
      >
-        <Github className="w-6" />
+        <GithubIcon className="w-6" />
      </Link>
    </nav>
  );
@ -78,7 +77,7 @@ const PageLayout: React.FunctionComponent<PageLayoutProps> = ({ children }) => {
          <Popover>
            <PopoverTrigger asChild={true}>
              <button className="hover:text-primary-600 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2 sm:hidden">
-                <DotsVertical className="w-5" />
+                <DotsVerticalIcon className="w-5" />
              </button>
            </PopoverTrigger>
            <PopoverContent align="end">
--- a/apps/web/src/components/layouts/page-layout/footer.tsx
+++ b/apps/web/src/components/layouts/page-layout/footer.tsx
@ -1,7 +1,9 @@
-import Discord from "@rallly/icons/discord.svg";
-import Star from "@rallly/icons/star.svg";
-import Translate from "@rallly/icons/translate.svg";
-import Twitter from "@rallly/icons/twitter.svg";
+import {
+  DiscordIcon,
+  StarIcon,
+  TranslateIcon,
+  TwitterIcon,
+} from "@rallly/icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Trans, useTranslation } from "next-i18next";
@ -57,19 +59,19 @@ const Footer: React.FunctionComponent = () => {
              href="https://twitter.com/ralllyco"
              className="hover:text-primary-600 text-sm text-slate-500 transition-colors hover:no-underline"
            >
-              <Twitter className="h-5 w-5" />
+              <TwitterIcon className="h-5 w-5" />
            </a>
            <a
              href="https://discord.gg/uzg4ZcHbuM"
              className="hover:text-primary-600 text-sm text-slate-500 transition-colors hover:no-underline"
            >
-              <Discord className="h-5 w-5" />
+              <DiscordIcon className="h-5 w-5" />
            </a>
            <a
              href="https://github.com/lukevella/rallly"
              className="hover:bg-primary-600 focus:ring-primary-600 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-500 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1"
            >
-              <Star className="mr-2 inline-block w-5" />
+              <StarIcon className="mr-2 inline-block w-5" />
              <span>{t("starOnGithub")}</span>
            </a>
          </div>
@ -146,7 +148,7 @@ const Footer: React.FunctionComponent = () => {
            href="https://github.com/lukevella/rallly/wiki/Guide-for-translators"
            className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
          >
-            <Translate className="mr-2 h-5 w-5" />
+            <TranslateIcon className="mr-2 h-5 w-5" />
            {t("volunteerTranslator")} &rarr;
          </a>
        </div>
--- a/apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx
+++ b/apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx
@ -1,11 +1,13 @@
-import Adjustments from "@rallly/icons/adjustments.svg";
-import Beaker from "@rallly/icons/beaker.svg";
-import Home from "@rallly/icons/home.svg";
-import Login from "@rallly/icons/login.svg";
-import Menu from "@rallly/icons/menu.svg";
-import Pencil from "@rallly/icons/pencil.svg";
-import Support from "@rallly/icons/support.svg";
-import UserCircle from "@rallly/icons/user-circle.svg";
+import {
+  AdjustmentsIcon,
+  BeakerIcon,
+  HomeIcon,
+  LoginIcon,
+  MenuIcon,
+  PencilIcon,
+  SupportIcon,
+  UserCircleIcon,
+} from "@rallly/icons";
 import clsx from "clsx";
 import { AnimatePresence } from "framer-motion";
 import { useTranslation } from "next-i18next";
@ -65,17 +67,21 @@ export const MobileNavigation = (props: { className?: string }) => {
              type="button"
              className="group flex items-center rounded px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
            >
-              <Menu className="group-hover:text-primary-600 mr-2 w-5" />
+              <MenuIcon className="group-hover:text-primary-600 mr-2 w-5" />
              <Logo />
            </button>
          }
        >
-          <DropdownItem href="/" label={t("home")} icon={Home} />
-          <DropdownItem href="/new" label={t("app:createNew")} icon={Pencil} />
+          <DropdownItem href="/" label={t("home")} icon={HomeIcon} />
+          <DropdownItem
+            href="/new"
+            label={t("app:createNew")}
+            icon={PencilIcon}
+          />
          <DropdownItem
            href="https://support.rallly.co"
            label={t("support")}
-            icon={Support}
+            icon={SupportIcon}
          />
          {process.env.NEXT_PUBLIC_BETA === "1" ? (
            <>
@ -90,7 +96,7 @@ export const MobileNavigation = (props: { className?: string }) => {
                  });
                }}
                label="Feedback"
-                icon={Beaker}
+                icon={BeakerIcon}
              />
            </>
          ) : null}
@ -99,7 +105,7 @@ export const MobileNavigation = (props: { className?: string }) => {
      <div className="flex items-center">
        {user ? null : (
          <LoginLink className="flex w-full cursor-pointer items-center space-x-2 whitespace-nowrap rounded px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300">
-            <Login className="h-5 opacity-75" />
+            <LoginIcon className="h-5 opacity-75" />
            <span className="inline-block">{t("app:login")}</span>
          </LoginLink>
        )}
@ -116,7 +122,7 @@ export const MobileNavigation = (props: { className?: string }) => {
                  )}
                >
                  <div className="relative shrink-0">
-                    <UserCircle className="group-hover:text-primary-600 w-5 opacity-75 group-hover:opacity-100" />
+                    <UserCircleIcon className="group-hover:text-primary-600 w-5 opacity-75 group-hover:opacity-100" />
                  </div>
                  <div className="xs:block max-w-[120px] truncate font-medium">
                    {user.isGuest ? t("app:guest") : user.shortName}
@ -133,7 +139,7 @@ export const MobileNavigation = (props: { className?: string }) => {
              type="button"
              className="group flex items-center whitespace-nowrap rounded px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
            >
-              <Adjustments className="group-hover:text-primary-600 h-5 opacity-75" />
+              <AdjustmentsIcon className="group-hover:text-primary-600 h-5 opacity-75" />
              <span className="ml-2 hidden sm:block">
                {t("app:preferences")}
              </span>
--- a/apps/web/src/components/layouts/standard-layout/user-dropdown.tsx
+++ b/apps/web/src/components/layouts/standard-layout/user-dropdown.tsx
@ -1,7 +1,9 @@
-import Login from "@rallly/icons/login.svg";
-import Logout from "@rallly/icons/logout.svg";
-import Question from "@rallly/icons/question-mark-circle.svg";
-import User from "@rallly/icons/user.svg";
+import {
+  LoginIcon,
+  LogoutIcon,
+  QuestionMarkCircleIcon,
+  UserIcon,
+} from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import React from "react";

@ -26,7 +28,7 @@ export const UserDropdown: React.FunctionComponent<DropdownProps> = ({
      {children}
      {user.isGuest ? (
        <DropdownItem
-          icon={Question}
+          icon={QuestionMarkCircleIcon}
          label={t("app:whatsThis")}
          onClick={() => {
            modalContext.render({
@ -35,11 +37,11 @@ export const UserDropdown: React.FunctionComponent<DropdownProps> = ({
                <div className="w-96 max-w-full p-6 pt-28">
                  <div className="absolute left-0 -top-8 w-full text-center">
                    <div className="to-primary-600 inline-flex h-20 w-20 items-center justify-center rounded-full border-8 border-white bg-gradient-to-b from-purple-400">
-                      <User className="h-7 text-white" />
+                      <UserIcon className="h-7 text-white" />
                    </div>
                    <div className="">
                      <div className="text-lg font-medium leading-snug">
-                        Guest
+                        {t("app:guest")}
                      </div>
                      <div className="text-sm text-slate-500">
                        {user.shortName}
@ -68,20 +70,20 @@ export const UserDropdown: React.FunctionComponent<DropdownProps> = ({
      {!user.isGuest ? (
        <DropdownItem
          href="/profile"
-          icon={User}
+          icon={UserIcon}
          label={t("app:yourProfile")}
        />
      ) : null}
      {user.isGuest ? (
        <DropdownItem
-          icon={Login}
+          icon={LoginIcon}
          label={t("app:login")}
          onClick={openLoginModal}
        />
      ) : null}
      {user.isGuest ? (
        <DropdownItem
-          icon={Logout}
+          icon={LogoutIcon}
          label={t("app:forgetMe")}
          onClick={() => {
            modalContext.render({
@ -98,7 +100,11 @@ export const UserDropdown: React.FunctionComponent<DropdownProps> = ({
          }}
        />
      ) : (
-        <DropdownItem icon={Logout} href="/logout" label={t("app:logout")} />
+        <DropdownItem
+          icon={LogoutIcon}
+          href="/logout"
+          label={t("app:logout")}
+        />
      )}
    </Dropdown>
  );
--- a/apps/web/src/components/maintenance.tsx
+++ b/apps/web/src/components/maintenance.tsx
@ -1,4 +1,3 @@
-import Clock from "@rallly/icons/clock.svg";
 import Head from "next/head";

 import Logo from "../../public/logo.svg";
@ -10,9 +9,6 @@ const Maintenance: React.FunctionComponent = () => {
        <title>Down for maintenance - Be right back</title>
      </Head>
      <div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
-        <div className="mb-4">
-          <Clock className="text-primary-600 inline-block h-20" />
-        </div>
        <div className="">
          The site is currently down for some maintenance and will be back
          shortly…
--- a/apps/web/src/components/modal/modal.tsx
+++ b/apps/web/src/components/modal/modal.tsx
@ -1,5 +1,5 @@
 import { Dialog } from "@headlessui/react";
-import X from "@rallly/icons/x.svg";
+import { XIcon } from "@rallly/icons";
 import { AnimatePresence, m } from "framer-motion";
 import * as React from "react";

@ -75,7 +75,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
                    className="absolute top-1 right-1 z-10 rounded p-2 text-slate-500 transition-colors hover:bg-slate-500/10 hover:text-slate-500 focus:ring-0 focus:ring-offset-0 active:bg-slate-500/20"
                    onClick={onCancel}
                  >
-                    <X className="h-4" />
+                    <XIcon className="h-4" />
                  </button>
                ) : null}
                {content ?? (
--- a/apps/web/src/components/participant-dropdown.tsx
+++ b/apps/web/src/components/participant-dropdown.tsx
@ -1,8 +1,10 @@
 import { trpc } from "@rallly/backend";
-import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
-import Pencil from "@rallly/icons/pencil-alt.svg";
-import Tag from "@rallly/icons/tag.svg";
-import Trash from "@rallly/icons/trash.svg";
+import {
+  DotsHorizontalIcon,
+  PencilIcon,
+  TagIcon,
+  TrashIcon,
+} from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@ -40,25 +42,25 @@ export const ParticipantDropdown = ({
        placement="bottom-start"
        trigger={
          <Button data-testid="participant-menu">
-            <DotsHorizontal className="h-4 text-slate-500" />
+            <DotsHorizontalIcon className="h-4 text-slate-500" />
          </Button>
        }
      >
        <DropdownItem
          disabled={disabled}
-          icon={Pencil}
+          icon={PencilIcon}
          onClick={onEdit}
          label={t("editVotes")}
        />
        <DropdownItem
          disabled={disabled}
-          icon={Tag}
+          icon={TagIcon}
          onClick={showChangeNameModal}
          label={t("changeName")}
        />
        <DropdownItem
          disabled={disabled}
-          icon={Trash}
+          icon={TrashIcon}
          onClick={() =>
            confirmDeleteParticipant(participant.id, participant.name)
          }
--- a/apps/web/src/components/poll-context.tsx
+++ b/apps/web/src/components/poll-context.tsx
@ -1,5 +1,5 @@
 import { Participant, Vote, VoteType } from "@rallly/database";
-import Trash from "@rallly/icons/trash.svg";
+import { TrashIcon } from "@rallly/icons";
 import { keyBy } from "lodash";
 import { useTranslation } from "next-i18next";
 import React from "react";
@ -173,7 +173,7 @@ export const PollContextProvider: React.FunctionComponent<{
  if (poll.deleted) {
    return (
      <ErrorPage
-        icon={Trash}
+        icon={TrashIcon}
        title={t("deletedPoll")}
        description={t("deletedPollInfo")}
      />
--- a/apps/web/src/components/poll.tsx
+++ b/apps/web/src/components/poll.tsx
@ -1,5 +1,4 @@
-import Exclamation from "@rallly/icons/exclamation.svg";
-import LockClosed from "@rallly/icons/lock-closed.svg";
+import { ExclamationIcon, LockClosedIcon } from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import React from "react";

@ -50,13 +49,13 @@ export const Poll = (props: { children?: React.ReactNode }) => {
          {props.children}
          {poll.demo ? (
            <div className="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-100 p-3 text-amber-600 shadow-sm">
-              <Exclamation className="w-6" />
+              <ExclamationIcon className="w-6" />
              <div>{t("demoPollNotice")}</div>
            </div>
          ) : null}
          {poll.closed ? (
            <div className="flex items-center gap-3 rounded-md border border-pink-200 bg-pink-100 p-3 text-pink-600 shadow-sm">
-              <LockClosed className="w-6" />
+              <LockClosedIcon className="w-6" />
              <div>{t("pollHasBeenLocked")}</div>
            </div>
          ) : null}
--- a/apps/web/src/components/poll/desktop-poll.tsx
+++ b/apps/web/src/components/poll/desktop-poll.tsx
@ -1,5 +1,4 @@
-import ArrowLeft from "@rallly/icons/arrow-left.svg";
-import ArrowRight from "@rallly/icons/arrow-right.svg";
+import { ArrowLeftIcon, ArrowRightIcon } from "@rallly/icons";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import { useMeasure } from "react-use";
@ -150,7 +149,7 @@ const Poll: React.FunctionComponent = () => {
                    onClick={goToPreviousPage}
                    disabled={scrollPosition === 0}
                  >
-                    <ArrowLeft className="h-4 w-4" />
+                    <ArrowLeftIcon className="h-4 w-4" />
                  </Button>
                  <Button
                    className="text-xs"
@ -159,7 +158,7 @@ const Poll: React.FunctionComponent = () => {
                      goToNextPage();
                    }}
                  >
-                    <ArrowRight className="h-4 w-4" />
+                    <ArrowRightIcon className="h-4 w-4" />
                  </Button>
                </div>
              ) : null}
--- a/apps/web/src/components/poll/language-selector.tsx
+++ b/apps/web/src/components/poll/language-selector.tsx
@ -1,4 +1,4 @@
-import ChevronDown from "@rallly/icons/chevron-down.svg";
+import { ChevronDownIcon } from "@rallly/icons";
 import languages from "@rallly/languages";
 import clsx from "clsx";
 import Cookies from "js-cookie";
@ -28,7 +28,7 @@ export const LanguageSelect: React.FunctionComponent<{
        ))}
      </select>
      <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center">
-        <ChevronDown className="w-5" />
+        <ChevronDownIcon className="w-5" />
      </div>
    </div>
  );
--- a/apps/web/src/components/poll/legacy-poll-notice.tsx
+++ b/apps/web/src/components/poll/legacy-poll-notice.tsx
@ -1,4 +1,4 @@
-import Speakerphone from "@rallly/icons/speakerphone.svg";
+import { SpeakerphoneIcon } from "@rallly/icons";
 import Cookies from "js-cookie";
 import * as React from "react";

@ -30,7 +30,7 @@ const LegacyPollNotice: React.FunctionComponent<{ show?: boolean }> = ({
    <div className="mb-4 space-y-3 rounded-lg border bg-yellow-200 p-2 text-sm text-yellow-700 shadow-sm md:flex md:items-center md:space-y-0 md:space-x-4">
      <div className="flex space-x-3 md:grow md:items-center">
        <div className="h-9 w-9 rounded-lg bg-yellow-400 p-2">
-          <Speakerphone className="w-5" />
+          <SpeakerphoneIcon className="w-5" />
        </div>
        <div className="grow">
          Notice anything different? We&apos;ve announced a new version release.
--- a/apps/web/src/components/poll/manage-poll.tsx
+++ b/apps/web/src/components/poll/manage-poll.tsx
@ -1,11 +1,13 @@
 import { Placement } from "@floating-ui/react-dom-interactions";
-import Cog from "@rallly/icons/cog.svg";
-import LockClosed from "@rallly/icons/lock-closed.svg";
-import LockOpen from "@rallly/icons/lock-open.svg";
-import Pencil from "@rallly/icons/pencil-alt.svg";
-import Save from "@rallly/icons/save.svg";
-import Table from "@rallly/icons/table.svg";
-import Trash from "@rallly/icons/trash.svg";
+import {
+  CogIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  PencilIcon,
+  SaveIcon,
+  TableIcon,
+  TrashIcon,
+} from "@rallly/icons";
 import dayjs from "dayjs";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
@ -192,38 +194,38 @@ const ManagePoll: React.FunctionComponent<{
      {changePollDetailsModalContextHolder}
      <Dropdown
        placement={placement}
-        trigger={<Button icon={<Cog />}>{t("manage")}</Button>}
+        trigger={<Button icon={<CogIcon />}>{t("manage")}</Button>}
      >
        <DropdownItem
-          icon={Pencil}
+          icon={PencilIcon}
          label={t("editDetails")}
          onClick={openChangePollDetailsModa}
        />
        <DropdownItem
-          icon={Table}
+          icon={TableIcon}
          label={t("editOptions")}
          onClick={handleChangeOptions}
        />
        <DropdownItem
-          icon={Save}
+          icon={SaveIcon}
          label={t("exportToCsv")}
          onClick={exportToCsv}
        />
        {poll.closed ? (
          <DropdownItem
-            icon={LockOpen}
+            icon={LockOpenIcon}
            label={t("unlockPoll")}
            onClick={() => updatePollMutation({ urlId, closed: false })}
          />
        ) : (
          <DropdownItem
-            icon={LockClosed}
+            icon={LockClosedIcon}
            label={t("lockPoll")}
            onClick={() => updatePollMutation({ urlId, closed: true })}
          />
        )}
        <DropdownItem
-          icon={Trash}
+          icon={TrashIcon}
          label={t("deletePoll")}
          onClick={() => {
            modalContext.render({
--- a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx
+++ b/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx
@ -1,5 +1,5 @@
 import { trpc } from "@rallly/backend";
-import Exclamation from "@rallly/icons/exclamation.svg";
+import { ExclamationIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
@ -34,7 +34,7 @@ export const DeletePollForm: React.FunctionComponent<{
    <div className="flex max-w-lg space-x-6 p-5">
      <div className="">
        <div className="rounded-full bg-rose-100 p-3">
-          <Exclamation className="w-8 text-rose-500" />
+          <ExclamationIcon className="w-8 text-rose-500" />
        </div>
      </div>
      <form
--- a/apps/web/src/components/poll/mobile-poll.tsx
+++ b/apps/web/src/components/poll/mobile-poll.tsx
@ -1,6 +1,5 @@
 import { Listbox } from "@headlessui/react";
-import ChevronDown from "@rallly/icons/chevron-down.svg";
-import PlusCircle from "@rallly/icons/plus-circle.svg";
+import { ChevronDownIcon, PlusCircleIcon } from "@rallly/icons";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@ -129,7 +128,7 @@ const MobilePoll: React.FunctionComponent = () => {
                        t("participantCount", { count: participants.length })
                      )}
                    </div>
-                    <ChevronDown className="h-5 shrink-0" />
+                    <ChevronDownIcon className="h-5 shrink-0" />
                  </Listbox.Button>
                  <Listbox.Options
                    as={m.div}
@ -201,7 +200,7 @@ const MobilePoll: React.FunctionComponent = () => {
            ) : (
              <Button
                type="primary"
-                icon={<PlusCircle />}
+                icon={<PlusCircleIcon />}
                disabled={poll.closed}
                onClick={() => {
                  reset({
--- a/apps/web/src/components/poll/mobile-poll/poll-option.tsx
+++ b/apps/web/src/components/poll/mobile-poll/poll-option.tsx
@ -1,5 +1,5 @@
 import { Participant, VoteType } from "@rallly/database";
-import ChevronDown from "@rallly/icons/chevron-down.svg";
+import { ChevronDownIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
@ -215,7 +215,7 @@ const PollOption: React.FunctionComponent<PollOptionProps> = ({
              {participants.length > 0 ? (
                <SummarizedParticipantList participants={participants} />
              ) : null}
-              <ChevronDown
+              <ChevronDownIcon
                className={clsx(
                  "h-5 shrink-0 text-slate-500 transition-transform",
                  {
--- a/apps/web/src/components/poll/mobile-poll/time-slot-option.tsx
+++ b/apps/web/src/components/poll/mobile-poll/time-slot-option.tsx
@ -1,4 +1,4 @@
-import Clock from "@rallly/icons/clock.svg";
+import { ClockIcon } from "@rallly/icons";
 import * as React from "react";

 import PollOption, { PollOptionProps } from "./poll-option";
@ -19,7 +19,7 @@ const TimeSlotOption: React.FunctionComponent<TimeSlotOptionProps> = ({
      <div className="grow">
        <div className="h-7">{`${startTime}`}</div>
        <div className="flex grow items-center text-sm text-slate-500">
-          <Clock className="leading- mr-1 inline w-4" />
+          <ClockIcon className="leading- mr-1 inline w-4" />
          {duration}
        </div>
      </div>
--- a/apps/web/src/components/poll/notifications-toggle.tsx
+++ b/apps/web/src/components/poll/notifications-toggle.tsx
@ -1,6 +1,5 @@
 import { trpc } from "@rallly/backend";
-import Bell from "@rallly/icons/bell.svg";
-import BellCrossed from "@rallly/icons/bell-crossed.svg";
+import { BellCrossedIcon, BellIcon } from "@rallly/icons";
 import { useTranslation } from "next-i18next";
 import * as React from "react";

@ -62,7 +61,7 @@ const NotificationsToggle: React.FunctionComponent = () => {
        data-testid="notifications-toggle"
        loading={isUpdating}
        disabled={poll.demo}
-        icon={isWatching ? <Bell /> : <BellCrossed />}
+        icon={isWatching ? <BellIcon /> : <BellCrossedIcon />}
        onClick={async () => {
          if (user.isGuest) {
            // ask to log in
--- a/apps/web/src/components/poll/score-summary.tsx
+++ b/apps/web/src/components/poll/score-summary.tsx
@ -1,4 +1,4 @@
-import CheckCircle from "@rallly/icons/check-circle.svg";
+import { YesIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import * as React from "react";
@ -40,7 +40,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
          { "text-slate-400": !highlight },
        )}
      >
-        <CheckCircle className="-ml-1 inline-block h-4 transition-opacity" />
+        <YesIcon className="-ml-1 inline-block h-4 transition-opacity" />
        <AnimatePresence initial={false} exitBeforeEnter={true}>
          <m.span
            transition={{
--- a/apps/web/src/components/poll/vote-icon.tsx
+++ b/apps/web/src/components/poll/vote-icon.tsx
@ -1,8 +1,5 @@
 import { VoteType } from "@rallly/database";
-import CheckCircle from "@rallly/icons/check-circle.svg";
-import IfNeedBe from "@rallly/icons/if-need-be.svg";
-import QuestionMark from "@rallly/icons/question-mark.svg";
-import X from "@rallly/icons/x-circle.svg";
+import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons";
 import clsx from "clsx";
 import * as React from "react";

@ -14,7 +11,7 @@ const VoteIcon: React.FunctionComponent<{
  switch (type) {
    case "yes":
      return (
-        <CheckCircle
+        <YesIcon
          className={clsx("text-green-400", className, {
            "h-5": size === "md",
            "h-3": size === "sm",
@ -24,7 +21,7 @@ const VoteIcon: React.FunctionComponent<{

    case "ifNeedBe":
      return (
-        <IfNeedBe
+        <IfNeedBeIcon
          className={clsx("text-amber-400", className, {
            "h-5": size === "md",
            "h-3": size === "sm",
@ -34,7 +31,7 @@ const VoteIcon: React.FunctionComponent<{

    case "no":
      return (
-        <X
+        <NoIcon
          className={clsx("text-slate-400", className, {
            "h-5": size === "md",
            "h-3": size === "sm",
@ -44,7 +41,7 @@ const VoteIcon: React.FunctionComponent<{

    default:
      return (
-        <QuestionMark
+        <PendingIcon
          className={clsx("text-slate-300", className, {
            "h-5": size === "md",
            "h-3": size === "sm",
--- a/apps/web/src/components/profile.tsx
+++ b/apps/web/src/components/profile.tsx
@ -1,8 +1,10 @@
 import { trpc } from "@rallly/backend";
-import Calendar from "@rallly/icons/calendar.svg";
-import LockClosed from "@rallly/icons/lock-closed.svg";
-import Pencil from "@rallly/icons/pencil.svg";
-import User from "@rallly/icons/user.svg";
+import {
+  CalendarIcon,
+  LockClosedIcon,
+  PencilIcon,
+  UserIcon,
+} from "@rallly/icons";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
@ -48,7 +50,7 @@ export const Profile: React.FunctionComponent = () => {
      </Head>
      <div className="flex gap-4 rounded-md border bg-white p-3 shadow-sm">
        <div className="border-primary-200/50 bg-primary-50 inline-flex h-12 w-12 items-center justify-center rounded border">
-          <User className="text-primary-600 h-7" />
+          <UserIcon className="text-primary-600 h-7" />
        </div>
        <div>
          <div
@ -77,7 +79,7 @@ export const Profile: React.FunctionComponent = () => {
              {t("yourPolls")}
            </div>
            <Link href="/new" className="btn-default">
-              <Pencil className="mr-1 h-5" />
+              <PencilIcon className="mr-1 h-5" />
              {t("newPoll")}
            </Link>
          </div>
@ -92,7 +94,7 @@ export const Profile: React.FunctionComponent = () => {
                    >
                      <span className="flex gap-4">
                        <span>
-                          <Calendar className="text-primary-600 w-10" />
+                          <CalendarIcon className="text-primary-600 w-10" />
                        </span>
                        <span>
                          <span className="flex items-center gap-2">
@ -102,7 +104,7 @@ export const Profile: React.FunctionComponent = () => {
                            {poll.closed ? (
                              <Tooltip content={t("pollHasBeenLocked")}>
                                <Badge color="red">
-                                  <LockClosed className="h-4" />
+                                  <LockClosedIcon className="h-4" />
                                </Badge>
                              </Tooltip>
                            ) : null}
@ -118,7 +120,7 @@ export const Profile: React.FunctionComponent = () => {
              </div>
            </div>
          ) : (
-            <EmptyState icon={Pencil} text={t("pollsEmpty")} />
+            <EmptyState icon={PencilIcon} text={t("pollsEmpty")} />
          )}
        </div>
      ) : null}
--- a/apps/web/src/components/spinner.tsx
+++ b/apps/web/src/components/spinner.tsx
@ -1,9 +1,9 @@
-import SpinnerSvg from "@rallly/icons/spinner.svg";
+import { SpinnerIcon } from "@rallly/icons";
 import clsx from "clsx";

 export const Spinner = (props: { className?: string }) => {
  return (
-    <SpinnerSvg
+    <SpinnerIcon
      className={clsx("inline-block h-5 animate-spin", props.className)}
    />
  );
--- a/apps/web/src/components/time-zone-picker/time-zone-picker.tsx
+++ b/apps/web/src/components/time-zone-picker/time-zone-picker.tsx
@ -6,7 +6,7 @@ import {
  useFloating,
 } from "@floating-ui/react-dom-interactions";
 import { Combobox } from "@headlessui/react";
-import ChevronDown from "@rallly/icons/chevron-down.svg";
+import { ChevronDownIcon } from "@rallly/icons";
 import clsx from "clsx";
 import React from "react";
 import spacetime from "spacetime";
@ -207,7 +207,7 @@ const TimeZonePicker: React.FunctionComponent<{
            {!query ? selectedTimeZone.label : null}
          </span>
          <span className="pointer-events-none flex">
-            <ChevronDown className="h-5 w-5" />
+            <ChevronDownIcon className="h-5 w-5" />
          </span>
        </Combobox.Button>
        <FloatingPortal>
--- a/apps/web/src/pages/404.tsx
+++ b/apps/web/src/pages/404.tsx
@ -1,4 +1,4 @@
-import DocumentSearch from "@rallly/icons/document-search.svg";
+import { DocumentSearchIcon } from "@rallly/icons";
 import { GetStaticProps } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@ -12,7 +12,7 @@ const Custom404: NextPageWithLayout = () => {
  const { t } = useTranslation("errors");
  return (
    <ErrorPage
-      icon={DocumentSearch}
+      icon={DocumentSearchIcon}
      title={t("notFoundTitle")}
      description={t("notFoundDescription")}
    />
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@ -16,7 +16,6 @@ import React from "react";

 import Maintenance from "@/components/maintenance";

-import { useCrispChat } from "../components/crisp-chat";
 import { NextPageWithLayout } from "../types";
 import { absoluteUrl } from "../utils/absolute-url";

@ -50,8 +49,6 @@ if (typeof window !== "undefined" && process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
 }

 const MyApp: NextPage<AppPropsWithLayout> = ({ Component, pageProps }) => {
-  useCrispChat();
-
  React.useEffect(() => {
    if (process.env.NEXT_PUBLIC_ENABLE_ANALYTICS) {
      // calling inject directly to avoid having this run for self-hosted instances
--- a/apps/web/src/pages/auth/disable-notifications.tsx
+++ b/apps/web/src/pages/auth/disable-notifications.tsx
@ -5,7 +5,7 @@ import {
 } from "@rallly/backend/next";
 import { decryptToken } from "@rallly/backend/session";
 import { prisma } from "@rallly/database";
-import Bell from "@rallly/icons/bell-crossed.svg";
+import { BellIcon } from "@rallly/icons";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
@ -37,7 +37,7 @@ const Redirect = (props: React.PropsWithChildren<{ redirect: string }>) => {
    <div>
      <div className="flex h-8 items-center justify-center gap-4">
        {enabled ? (
-          <Bell
+          <BellIcon
            className={clsx("animate-popIn h-5", {
              "opacity-0": !enabled,
            })}
--- a/apps/web/src/pages/auth/login.tsx
+++ b/apps/web/src/pages/auth/login.tsx
@ -5,7 +5,7 @@ import {
 } from "@rallly/backend/next";
 import { decryptToken } from "@rallly/backend/session";
 import { prisma } from "@rallly/database";
-import CheckCircle from "@rallly/icons/check-circle.svg";
+import { CheckCircleIcon } from "@rallly/icons";
 import clsx from "clsx";
 import { GetServerSideProps } from "next";
 import Link from "next/link";
@ -44,8 +44,8 @@ const Redirect = () => {
    <div className="space-y-2">
      <div className="flex h-10 items-center justify-center gap-4">
        {enabled ? (
-          <CheckCircle
-            className={clsx("animate-popIn h-10 text-green-500", {
+          <CheckCircleIcon
+            className={clsx("animate-popIn h-8 text-green-500", {
              "opacity-0": !enabled,
            })}
          />
--- a/packages/icons/adjustments.svg
+++ b/packages/icons/adjustments.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-</svg>
--- a/packages/icons/annotation.svg
+++ b/packages/icons/annotation.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/arrow-left.svg
+++ b/packages/icons/arrow-left.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/arrow-right.svg
+++ b/packages/icons/arrow-right.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/ban.svg
+++ b/packages/icons/ban.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-</svg>
--- a/packages/icons/beaker.svg
+++ b/packages/icons/beaker.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-</svg>
--- a/packages/icons/calendar.svg
+++ b/packages/icons/calendar.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-</svg>
--- a/packages/icons/cash.svg
+++ b/packages/icons/cash.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-</svg>
--- a/packages/icons/chat.svg
+++ b/packages/icons/chat.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
-</svg>
--- a/packages/icons/check.svg
+++ b/packages/icons/check.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-</svg>
--- a/packages/icons/chevron-down.svg
+++ b/packages/icons/chevron-down.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/chevron-left.svg
+++ b/packages/icons/chevron-left.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
-</svg>
--- a/packages/icons/chevron-right.svg
+++ b/packages/icons/chevron-right.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/clock.svg
+++ b/packages/icons/clock.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/code.svg
+++ b/packages/icons/code.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-</svg>
--- a/packages/icons/cog.svg
+++ b/packages/icons/cog.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/currency-dollar.svg
+++ b/packages/icons/currency-dollar.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/cursor-click.svg
+++ b/packages/icons/cursor-click.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
-</svg>
--- a/packages/icons/custom.d.ts
+++ b/packages/icons/custom.d.ts
@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
--- a/packages/icons/device-mobile.svg
+++ b/packages/icons/device-mobile.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
-</svg>
--- a/packages/icons/document-search.svg
+++ b/packages/icons/document-search.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
-</svg>
--- a/packages/icons/document.svg
+++ b/packages/icons/document.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-</svg>
--- a/packages/icons/dots-horizontal.svg
+++ b/packages/icons/dots-horizontal.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
-</svg>
--- a/packages/icons/dots-vertical.svg
+++ b/packages/icons/dots-vertical.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-</svg>
--- a/packages/icons/duplicate.svg
+++ b/packages/icons/duplicate.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" />
-  <path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" />
-</svg>
--- a/packages/icons/emoji-sad.svg
+++ b/packages/icons/emoji-sad.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/exclamation.svg
+++ b/packages/icons/exclamation.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-</svg>
--- a/packages/icons/fire.svg
+++ b/packages/icons/fire.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/graph1.svg
+++ b/packages/icons/graph1.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
-</svg>
--- a/packages/icons/hand.svg
+++ b/packages/icons/hand.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
-</svg>
--- a/packages/icons/home.svg
+++ b/packages/icons/home.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-</svg>
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@ -1,2 +0,0 @@
-const icons = {};
-export default icons;
--- a/packages/icons/information-circle.svg
+++ b/packages/icons/information-circle.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/key.svg
+++ b/packages/icons/key.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-</svg>
--- a/packages/icons/location-marker.svg
+++ b/packages/icons/location-marker.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
-</svg>
--- a/packages/icons/lock-closed.svg
+++ b/packages/icons/lock-closed.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-</svg>
--- a/packages/icons/lock-open.svg
+++ b/packages/icons/lock-open.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
-</svg>
--- a/packages/icons/login.svg
+++ b/packages/icons/login.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
-</svg>
--- a/packages/icons/logout.svg
+++ b/packages/icons/logout.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-</svg>
--- a/packages/icons/magic.svg
+++ b/packages/icons/magic.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-</svg>
--- a/packages/icons/menu.svg
+++ b/packages/icons/menu.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-</svg>
--- a/packages/icons/newspaper.svg
+++ b/packages/icons/newspaper.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
-</svg>
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@ -2,6 +2,9 @@
  "name": "@rallly/icons",
  "version": "0.0.0",
  "private": true,
-  "main": "index.ts",
-  "types": "index.ts"
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@heroicons/react": "^1.0.6"
+  }
 }
--- a/packages/icons/pencil-alt.svg
+++ b/packages/icons/pencil-alt.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-</svg>
--- a/packages/icons/pencil.svg
+++ b/packages/icons/pencil.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
-  <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/plus-circle.svg
+++ b/packages/icons/plus-circle.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
-</svg>
--- a/packages/icons/plus-sm.svg
+++ b/packages/icons/plus-sm.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fillRule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clipRule="evenodd" />
-</svg>
--- a/packages/icons/question-mark-circle.svg
+++ b/packages/icons/question-mark-circle.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/refresh.svg
+++ b/packages/icons/refresh.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-</svg>
--- a/packages/icons/save.svg
+++ b/packages/icons/save.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-</svg>
--- a/packages/icons/server.svg
+++ b/packages/icons/server.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
-</svg>
--- a/packages/icons/share.svg
+++ b/packages/icons/share.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
-</svg>
--- a/packages/icons/smile.svg
+++ b/packages/icons/smile.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
--- a/packages/icons/speakerphone.svg
+++ b/packages/icons/speakerphone.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
-</svg>
--- a/packages/icons/src/custom-icons/bell-crossed.svg
+++ b/packages/icons/src/custom-icons/bell-crossed.svg
--- a/packages/icons/src/custom-icons/bell.svg
+++ b/packages/icons/src/custom-icons/bell.svg
--- a/packages/icons/src/custom-icons/discord.svg
+++ b/packages/icons/src/custom-icons/discord.svg
--- a/packages/icons/src/custom-icons/github.svg
+++ b/packages/icons/src/custom-icons/github.svg
--- a/packages/icons/src/custom-icons/if-need-be.svg
+++ b/packages/icons/src/custom-icons/if-need-be.svg
--- a/Show more
+++ b/Show more