diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 4fe56c8a9..2346abf68 100644
--- 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$/,
diff --git a/apps/web/src/components/admin-control.tsx b/apps/web/src/components/admin-control.tsx
index ffe1a411a..501a75fcc 100644
--- 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);
             }}
diff --git a/apps/web/src/components/button.tsx b/apps/web/src/components/button.tsx
index 5efccc67a..328d4ca7d 100644
--- 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";
 
diff --git a/apps/web/src/components/crisp-chat.tsx b/apps/web/src/components/crisp-chat.tsx
index eb5b5d218..4104df4a4 100644
--- 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>
   );
diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx
index db6196ca7..dbf7fa2b5 100644
--- 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({
diff --git a/apps/web/src/components/error-page.tsx b/apps/web/src/components/error-page.tsx
index d6c0e5692..8a198eaf1 100644
--- 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,
 }) => {
diff --git a/apps/web/src/components/feedback.tsx b/apps/web/src/components/feedback.tsx
index 0f5045d27..96b800469 100644
--- 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>
   );
diff --git 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
index e936b9ba5..634a74e0b 100644
--- 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>
diff --git 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
index 7e46af929..072c74743 100644
--- 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>
diff --git 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
index ad015a940..ec562cf7d 100644
--- 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>
diff --git 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
index 652ad80b0..25704821d 100644
--- 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>
diff --git a/apps/web/src/components/full-page-loader.tsx b/apps/web/src/components/full-page-loader.tsx
index 59f222a57..b45e1ee4f 100644
--- 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>
diff --git a/apps/web/src/components/home/bonus.tsx b/apps/web/src/components/home/bonus.tsx
index 62b8ccbb2..3f709aca8 100644
--- 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">
diff --git a/apps/web/src/components/home/features.tsx b/apps/web/src/components/home/features.tsx
index 05b1054b3..020218885 100644
--- 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>
diff --git a/apps/web/src/components/layouts/page-layout.tsx b/apps/web/src/components/layouts/page-layout.tsx
index a929220d2..0b73902da 100644
--- 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">
diff --git a/apps/web/src/components/layouts/page-layout/footer.tsx b/apps/web/src/components/layouts/page-layout/footer.tsx
index 0a8b835e5..41e71f19e 100644
--- 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>
diff --git a/apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx b/apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx
index 97d8d07ef..455733253 100644
--- 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>
diff --git a/apps/web/src/components/layouts/standard-layout/user-dropdown.tsx b/apps/web/src/components/layouts/standard-layout/user-dropdown.tsx
index aeeb60d46..d007580d8 100644
--- 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>
   );
diff --git a/apps/web/src/components/maintenance.tsx b/apps/web/src/components/maintenance.tsx
index 02e67621a..ce0c5c360 100644
--- 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…
diff --git a/apps/web/src/components/modal/modal.tsx b/apps/web/src/components/modal/modal.tsx
index f8d634d68..346ef9aae 100644
--- 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 ?? (
diff --git a/apps/web/src/components/participant-dropdown.tsx b/apps/web/src/components/participant-dropdown.tsx
index 9ac683c37..c100db810 100644
--- 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)
           }
diff --git a/apps/web/src/components/poll-context.tsx b/apps/web/src/components/poll-context.tsx
index b0055865b..d11839009 100644
--- 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")}
       />
diff --git a/apps/web/src/components/poll.tsx b/apps/web/src/components/poll.tsx
index 09d9e2181..9663495e7 100644
--- 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}
diff --git a/apps/web/src/components/poll/desktop-poll.tsx b/apps/web/src/components/poll/desktop-poll.tsx
index 5b605cf86..2a04553a3 100644
--- 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}
diff --git a/apps/web/src/components/poll/language-selector.tsx b/apps/web/src/components/poll/language-selector.tsx
index 8ef0de400..ac2260a43 100644
--- 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>
   );
diff --git a/apps/web/src/components/poll/legacy-poll-notice.tsx b/apps/web/src/components/poll/legacy-poll-notice.tsx
index aadf6505e..6d69d9456 100644
--- 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.
diff --git a/apps/web/src/components/poll/manage-poll.tsx b/apps/web/src/components/poll/manage-poll.tsx
index 066528d18..a3c4e83a4 100644
--- 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({
diff --git a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx b/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx
index 243ecd2c6..cec31a9f2 100644
--- 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
diff --git a/apps/web/src/components/poll/mobile-poll.tsx b/apps/web/src/components/poll/mobile-poll.tsx
index 0bc7cd4f8..19e361661 100644
--- 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({
diff --git a/apps/web/src/components/poll/mobile-poll/poll-option.tsx b/apps/web/src/components/poll/mobile-poll/poll-option.tsx
index 52b85b7b1..9e2ded5c7 100644
--- 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",
                   {
diff --git a/apps/web/src/components/poll/mobile-poll/time-slot-option.tsx b/apps/web/src/components/poll/mobile-poll/time-slot-option.tsx
index 8dcb0f789..26460cc5f 100644
--- 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>
diff --git a/apps/web/src/components/poll/notifications-toggle.tsx b/apps/web/src/components/poll/notifications-toggle.tsx
index aa463e5a9..1733e7679 100644
--- 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
diff --git a/apps/web/src/components/poll/score-summary.tsx b/apps/web/src/components/poll/score-summary.tsx
index 4116997bf..1ae93b6cb 100644
--- 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={{
diff --git a/apps/web/src/components/poll/vote-icon.tsx b/apps/web/src/components/poll/vote-icon.tsx
index e2fd02b56..175bdca78 100644
--- 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",
diff --git a/apps/web/src/components/profile.tsx b/apps/web/src/components/profile.tsx
index bc1e33861..cff44f5fa 100644
--- 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}
diff --git a/apps/web/src/components/spinner.tsx b/apps/web/src/components/spinner.tsx
index 6280f05d0..72869c904 100644
--- 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)}
     />
   );
diff --git a/apps/web/src/components/time-zone-picker/time-zone-picker.tsx b/apps/web/src/components/time-zone-picker/time-zone-picker.tsx
index 95d73e01b..923083968 100644
--- 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>
diff --git a/apps/web/src/pages/404.tsx b/apps/web/src/pages/404.tsx
index 9c067f823..ec290b23a 100644
--- 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")}
     />
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 30366f0e4..f3133cced 100644
--- 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
diff --git a/apps/web/src/pages/auth/disable-notifications.tsx b/apps/web/src/pages/auth/disable-notifications.tsx
index 899ea3129..d67c56729 100644
--- 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,
             })}
diff --git a/apps/web/src/pages/auth/login.tsx b/apps/web/src/pages/auth/login.tsx
index f3066dec2..6c56ba194 100644
--- 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,
             })}
           />
diff --git a/packages/icons/adjustments.svg b/packages/icons/adjustments.svg
deleted file mode 100644
index 5dfa3832f..000000000
--- a/packages/icons/adjustments.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/annotation.svg b/packages/icons/annotation.svg
deleted file mode 100644
index 73f9957f2..000000000
--- a/packages/icons/annotation.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/arrow-left.svg b/packages/icons/arrow-left.svg
deleted file mode 100644
index 9b6184e4c..000000000
--- a/packages/icons/arrow-left.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/arrow-right.svg b/packages/icons/arrow-right.svg
deleted file mode 100644
index ae25e9155..000000000
--- a/packages/icons/arrow-right.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/ban.svg b/packages/icons/ban.svg
deleted file mode 100644
index 14e4e3685..000000000
--- a/packages/icons/ban.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/beaker.svg b/packages/icons/beaker.svg
deleted file mode 100644
index b84a67ad2..000000000
--- a/packages/icons/beaker.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/calendar.svg b/packages/icons/calendar.svg
deleted file mode 100644
index 389c0a2aa..000000000
--- a/packages/icons/calendar.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/cash.svg b/packages/icons/cash.svg
deleted file mode 100644
index 04071dd23..000000000
--- a/packages/icons/cash.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/chat.svg b/packages/icons/chat.svg
deleted file mode 100644
index 9cf2e50da..000000000
--- a/packages/icons/chat.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/check.svg b/packages/icons/check.svg
deleted file mode 100644
index 5e150e9c2..000000000
--- a/packages/icons/check.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/chevron-down.svg b/packages/icons/chevron-down.svg
deleted file mode 100644
index bb20f2fe1..000000000
--- a/packages/icons/chevron-down.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/chevron-left.svg b/packages/icons/chevron-left.svg
deleted file mode 100644
index f19cd9738..000000000
--- a/packages/icons/chevron-left.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/chevron-right.svg b/packages/icons/chevron-right.svg
deleted file mode 100644
index 4488c4cdb..000000000
--- a/packages/icons/chevron-right.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/clock.svg b/packages/icons/clock.svg
deleted file mode 100644
index 23422c6fa..000000000
--- a/packages/icons/clock.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/code.svg b/packages/icons/code.svg
deleted file mode 100644
index da708e11c..000000000
--- a/packages/icons/code.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/cog.svg b/packages/icons/cog.svg
deleted file mode 100644
index 1e29d4910..000000000
--- a/packages/icons/cog.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/currency-dollar.svg b/packages/icons/currency-dollar.svg
deleted file mode 100644
index 45178a818..000000000
--- a/packages/icons/currency-dollar.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/cursor-click.svg b/packages/icons/cursor-click.svg
deleted file mode 100644
index 61d79d050..000000000
--- a/packages/icons/cursor-click.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/custom.d.ts b/packages/icons/custom.d.ts
new file mode 100644
index 000000000..2ff147833
--- /dev/null
+++ b/packages/icons/custom.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
diff --git a/packages/icons/device-mobile.svg b/packages/icons/device-mobile.svg
deleted file mode 100644
index 4515a7cd2..000000000
--- a/packages/icons/device-mobile.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/document-search.svg b/packages/icons/document-search.svg
deleted file mode 100644
index ec0639748..000000000
--- a/packages/icons/document-search.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/document.svg b/packages/icons/document.svg
deleted file mode 100644
index f0a668096..000000000
--- a/packages/icons/document.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/dots-horizontal.svg b/packages/icons/dots-horizontal.svg
deleted file mode 100644
index b1b830b43..000000000
--- a/packages/icons/dots-horizontal.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/dots-vertical.svg b/packages/icons/dots-vertical.svg
deleted file mode 100644
index e33bd23c5..000000000
--- a/packages/icons/dots-vertical.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/duplicate.svg b/packages/icons/duplicate.svg
deleted file mode 100644
index c4824a859..000000000
--- a/packages/icons/duplicate.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/emoji-sad.svg b/packages/icons/emoji-sad.svg
deleted file mode 100644
index f7ce7133d..000000000
--- a/packages/icons/emoji-sad.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/exclamation.svg b/packages/icons/exclamation.svg
deleted file mode 100644
index 67f766efe..000000000
--- a/packages/icons/exclamation.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/fire.svg b/packages/icons/fire.svg
deleted file mode 100644
index f218e1d2b..000000000
--- a/packages/icons/fire.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/graph1.svg b/packages/icons/graph1.svg
deleted file mode 100644
index 1e74b779d..000000000
--- a/packages/icons/graph1.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/hand.svg b/packages/icons/hand.svg
deleted file mode 100644
index 651cd6d25..000000000
--- a/packages/icons/hand.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/home.svg b/packages/icons/home.svg
deleted file mode 100644
index 047a7021f..000000000
--- a/packages/icons/home.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/index.ts b/packages/icons/index.ts
deleted file mode 100644
index 801cbf9d1..000000000
--- a/packages/icons/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-const icons = {};
-export default icons;
diff --git a/packages/icons/information-circle.svg b/packages/icons/information-circle.svg
deleted file mode 100644
index d1bd06a19..000000000
--- a/packages/icons/information-circle.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/key.svg b/packages/icons/key.svg
deleted file mode 100644
index 1f9a1da4c..000000000
--- a/packages/icons/key.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/location-marker.svg b/packages/icons/location-marker.svg
deleted file mode 100644
index 57125c0f7..000000000
--- a/packages/icons/location-marker.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/lock-closed.svg b/packages/icons/lock-closed.svg
deleted file mode 100644
index a7f48383b..000000000
--- a/packages/icons/lock-closed.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/lock-open.svg b/packages/icons/lock-open.svg
deleted file mode 100644
index a724ed408..000000000
--- a/packages/icons/lock-open.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/login.svg b/packages/icons/login.svg
deleted file mode 100644
index 3e139667e..000000000
--- a/packages/icons/login.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/logout.svg b/packages/icons/logout.svg
deleted file mode 100644
index 5508ee5cf..000000000
--- a/packages/icons/logout.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/magic.svg b/packages/icons/magic.svg
deleted file mode 100644
index 067603866..000000000
--- a/packages/icons/magic.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/menu.svg b/packages/icons/menu.svg
deleted file mode 100644
index bb40020c1..000000000
--- a/packages/icons/menu.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/newspaper.svg b/packages/icons/newspaper.svg
deleted file mode 100644
index 3fd22f074..000000000
--- a/packages/icons/newspaper.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 320f169bf..7ab609060 100644
--- 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"
+  }
 }
diff --git a/packages/icons/pencil-alt.svg b/packages/icons/pencil-alt.svg
deleted file mode 100644
index 045f671cf..000000000
--- a/packages/icons/pencil-alt.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/pencil.svg b/packages/icons/pencil.svg
deleted file mode 100644
index fd9016f55..000000000
--- a/packages/icons/pencil.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/plus-circle.svg b/packages/icons/plus-circle.svg
deleted file mode 100644
index 84166a617..000000000
--- a/packages/icons/plus-circle.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/plus-sm.svg b/packages/icons/plus-sm.svg
deleted file mode 100644
index 9f8b3cf02..000000000
--- a/packages/icons/plus-sm.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/question-mark-circle.svg b/packages/icons/question-mark-circle.svg
deleted file mode 100644
index 58c78fdc8..000000000
--- a/packages/icons/question-mark-circle.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/refresh.svg b/packages/icons/refresh.svg
deleted file mode 100644
index d776bb933..000000000
--- a/packages/icons/refresh.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/save.svg b/packages/icons/save.svg
deleted file mode 100644
index 1f3091963..000000000
--- a/packages/icons/save.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/server.svg b/packages/icons/server.svg
deleted file mode 100644
index 0b8c2c061..000000000
--- a/packages/icons/server.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/share.svg b/packages/icons/share.svg
deleted file mode 100644
index b5820c6a1..000000000
--- a/packages/icons/share.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/smile.svg b/packages/icons/smile.svg
deleted file mode 100644
index de6d0d3b8..000000000
--- a/packages/icons/smile.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/speakerphone.svg b/packages/icons/speakerphone.svg
deleted file mode 100644
index ab2f272b1..000000000
--- a/packages/icons/speakerphone.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/icons/bell-crossed.svg b/packages/icons/src/custom-icons/bell-crossed.svg
similarity index 100%
rename from packages/icons/bell-crossed.svg
rename to packages/icons/src/custom-icons/bell-crossed.svg
diff --git a/packages/icons/bell.svg b/packages/icons/src/custom-icons/bell.svg
similarity index 100%
rename from packages/icons/bell.svg
rename to packages/icons/src/custom-icons/bell.svg
diff --git a/packages/icons/discord.svg b/packages/icons/src/custom-icons/discord.svg
similarity index 100%
rename from packages/icons/discord.svg
rename to packages/icons/src/custom-icons/discord.svg
diff --git a/packages/icons/github.svg b/packages/icons/src/custom-icons/github.svg
similarity index 100%
rename from packages/icons/github.svg
rename to packages/icons/src/custom-icons/github.svg
diff --git a/packages/icons/if-need-be.svg b/packages/icons/src/custom-icons/if-need-be.svg
similarity index 100%
rename from packages/icons/if-need-be.svg
rename to packages/icons/src/custom-icons/if-need-be.svg
diff --git a/packages/icons/x-circle.svg b/packages/icons/src/custom-icons/no.svg
similarity index 100%
rename from packages/icons/x-circle.svg
rename to packages/icons/src/custom-icons/no.svg
diff --git a/packages/icons/question-mark.svg b/packages/icons/src/custom-icons/pending.svg
similarity index 100%
rename from packages/icons/question-mark.svg
rename to packages/icons/src/custom-icons/pending.svg
diff --git a/packages/icons/spinner.svg b/packages/icons/src/custom-icons/spinner.svg
similarity index 100%
rename from packages/icons/spinner.svg
rename to packages/icons/src/custom-icons/spinner.svg
diff --git a/packages/icons/twitter.svg b/packages/icons/src/custom-icons/twitter.svg
similarity index 100%
rename from packages/icons/twitter.svg
rename to packages/icons/src/custom-icons/twitter.svg
diff --git a/packages/icons/check-circle.svg b/packages/icons/src/custom-icons/yes.svg
similarity index 100%
rename from packages/icons/check-circle.svg
rename to packages/icons/src/custom-icons/yes.svg
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
new file mode 100644
index 000000000..0e11e3874
--- /dev/null
+++ b/packages/icons/src/index.ts
@@ -0,0 +1,11 @@
+export { default as BellIcon } from "./custom-icons/bell.svg";
+export { default as BellCrossedIcon } from "./custom-icons/bell-crossed.svg";
+export { default as DiscordIcon } from "./custom-icons/discord.svg";
+export { default as GithubIcon } from "./custom-icons/github.svg";
+export { default as IfNeedBeIcon } from "./custom-icons/if-need-be.svg";
+export { default as NoIcon } from "./custom-icons/no.svg";
+export { default as PendingIcon } from "./custom-icons/pending.svg";
+export { default as SpinnerIcon } from "./custom-icons/spinner.svg";
+export { default as TwitterIcon } from "./custom-icons/twitter.svg";
+export { default as YesIcon } from "./custom-icons/yes.svg";
+export * from "@heroicons/react/outline";
diff --git a/packages/icons/star.svg b/packages/icons/star.svg
deleted file mode 100644
index 792709df1..000000000
--- a/packages/icons/star.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/support.svg b/packages/icons/support.svg
deleted file mode 100644
index 4b4a05d24..000000000
--- a/packages/icons/support.svg
+++ /dev/null
@@ -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 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/table.svg b/packages/icons/table.svg
deleted file mode 100644
index 116881b7c..000000000
--- a/packages/icons/table.svg
+++ /dev/null
@@ -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 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/tag.svg b/packages/icons/tag.svg
deleted file mode 100644
index 099dda0e1..000000000
--- a/packages/icons/tag.svg
+++ /dev/null
@@ -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 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/translate.svg b/packages/icons/translate.svg
deleted file mode 100644
index 5c06fec54..000000000
--- a/packages/icons/translate.svg
+++ /dev/null
@@ -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 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/trash.svg b/packages/icons/trash.svg
deleted file mode 100644
index 3922fccc8..000000000
--- a/packages/icons/trash.svg
+++ /dev/null
@@ -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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
new file mode 100644
index 000000000..db41afff7
--- /dev/null
+++ b/packages/icons/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@rallly/tsconfig/react-library",
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/icons/user-circle.svg b/packages/icons/user-circle.svg
deleted file mode 100644
index 3e9a1175d..000000000
--- a/packages/icons/user-circle.svg
+++ /dev/null
@@ -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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/user-solid.svg b/packages/icons/user-solid.svg
deleted file mode 100644
index debd3efc4..000000000
--- a/packages/icons/user-solid.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 9a3 3 0 0 0-3 3v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3H6Z" clip-rule="evenodd" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/user.svg b/packages/icons/user.svg
deleted file mode 100644
index af56aa4c0..000000000
--- a/packages/icons/user.svg
+++ /dev/null
@@ -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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-</svg>
\ No newline at end of file
diff --git a/packages/icons/x.svg b/packages/icons/x.svg
deleted file mode 100644
index b4a9c41ea..000000000
--- a/packages/icons/x.svg
+++ /dev/null
@@ -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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-</svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 62def8d47..0f248b09e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1937,6 +1937,11 @@
   dependencies:
     client-only "^0.0.1"
 
+"@heroicons/react@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"