diff --git a/app/src/components/PrivateRoute/Offline.tsx b/app/src/components/PrivateRoute/Offline.tsx
index 32dd9d8a6..9e35797ad 100644
--- a/app/src/components/PrivateRoute/Offline.tsx
+++ b/app/src/components/PrivateRoute/Offline.tsx
@@ -2,11 +2,13 @@ import {
   IonButton,
   IonContent,
   IonHeader,
+  IonIcon,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 import { t } from "i18next";
+import { cloudOfflineOutline } from "ionicons/icons";
 
 export default function Offline() {
   const handleClickRefresh = () => window.location.reload();
@@ -21,7 +23,7 @@ export default function Offline() {
       <IonContent fullscreen color="light">
         <div className="tw-flex tw-items-center tw-h-full tw-justify-center">
           <div className="">
-            <span className="feather feather-offline" />
+            <IonIcon icon={cloudOfflineOutline} />
             <p>Offline</p>
 
             <IonButton onClick={handleClickRefresh}>Refresh</IonButton>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 99d09004e..40e72ec78 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,6 +26,7 @@
         "i18next-browser-languagedetector": "^7.2.0",
         "i18next-http-backend": "^2.5.0",
         "js-cookie": "^3.0.5",
+        "lucide-static": "^0.376.0",
         "mapbox-gl": "^2.11.0",
         "minisearch": "^6.3.0",
         "nanostores": "^0.10.0",
@@ -6558,6 +6559,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-static": {
+      "version": "0.376.0",
+      "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.376.0.tgz",
+      "integrity": "sha512-FididZNu2MA0L8lUpA7CI25wEKUUh6ulOQhMnxKDI8dhy2KZMBK939Jb822fK9woIlLJvJuSxFN8tDceY7z3pA=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 201d3c224..74590dc43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
     "js-cookie": "^3.0.5",
+    "lucide-static": "^0.376.0",
     "mapbox-gl": "^2.11.0",
     "minisearch": "^6.3.0",
     "nanostores": "^0.10.0",
diff --git a/frontend/src/components/react/components/AddressForm.tsx b/frontend/src/components/react/components/AddressForm.tsx
index 406b60fa9..1b8d197d9 100644
--- a/frontend/src/components/react/components/AddressForm.tsx
+++ b/frontend/src/components/react/components/AddressForm.tsx
@@ -331,7 +331,7 @@ export default function AddressForm(props: {
               {openCheckAddress ? (
                 loading ? (
                   <div className="flex items-center justify-center h-36">
-                    <div className="feather feather-loader animate-spin text-2xl py-12" />
+                    <div className="icon-loader animate-spin text-2xl py-12" />
                   </div>
                 ) : (
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
diff --git a/frontend/src/components/react/components/CategoriesDropdown.tsx b/frontend/src/components/react/components/CategoriesDropdown.tsx
index 4f88b3ecd..dd75a28fd 100644
--- a/frontend/src/components/react/components/CategoriesDropdown.tsx
+++ b/frontend/src/components/react/components/CategoriesDropdown.tsx
@@ -48,8 +48,8 @@ export default function CategoriesDropdown({
       >
         <span className="truncate">{btnLabel}</span>
         <span
-          className={`pl-2 rtl:pl-0 rtl:pr-2 feather ${
-            dropdown.open ? "feather-arrow-up" : "feather-arrow-down"
+          className={`pl-2 rtl:pl-0 rtl:pr-2 ${
+            dropdown.open ? "icon-arrow-up" : "icon-arrow-down"
           }`}
         ></span>
       </label>
diff --git a/frontend/src/components/react/components/ChainDetailsForm.tsx b/frontend/src/components/react/components/ChainDetailsForm.tsx
index 93658adf8..1daa6fa46 100644
--- a/frontend/src/components/react/components/ChainDetailsForm.tsx
+++ b/frontend/src/components/react/components/ChainDetailsForm.tsx
@@ -377,8 +377,8 @@ export default function ChainDetailsForm({
             )}
             <button type="submit" className="btn btn-primary">
               {submitText}
-              <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-4 ltr:hidden"></span>
             </button>
           </div>
         </form>
diff --git a/frontend/src/components/react/components/ChainsList.tsx b/frontend/src/components/react/components/ChainsList.tsx
index 00147ac34..7a82e6342 100644
--- a/frontend/src/components/react/components/ChainsList.tsx
+++ b/frontend/src/components/react/components/ChainsList.tsx
@@ -216,11 +216,11 @@ export default function ChainsList({ chains, setChains }: Props) {
                       (!userChain && authUser?.is_root_admin) ? (
                         chain.published ? (
                           <div className="tooltip" data-tip="published">
-                            <span className="feather feather-eye text-lg text-green" />
+                            <span className="icon-eye text-lg text-green" />
                           </div>
                         ) : (
                           <div className="tooltip" data-tip="draft">
-                            <span className="feather feather-eye-off text-lg text-red" />
+                            <span className="icon-eye-off text-lg text-red" />
                           </div>
                         )
                       ) : (
@@ -228,7 +228,7 @@ export default function ChainsList({ chains, setChains }: Props) {
                           className="tooltip"
                           data-tip={t("pendingApproval")}
                         >
-                          <span className="feather btn-circle btn-lg feather-user-check text-yellow-darkest" />
+                          <span className="btn-circle btn-lg icon-user-check text-yellow-darkest" />
                         </div>
                       )}
                     </td>
@@ -245,8 +245,8 @@ export default function ChainsList({ chains, setChains }: Props) {
                             )}
                           >
                             <span className="max-xs:hidden">{t("view")}</span>
-                            <span className="feather feather-arrow-left sm:mr-3 ltr:hidden"></span>
-                            <span className="feather feather-arrow-right sm:ml-3 rtl:hidden"></span>
+                            <span className="icon-arrow-left sm:mr-3 ltr:hidden"></span>
+                            <span className="icon-arrow-right sm:ml-3 rtl:hidden"></span>
                             {hasNotification ? (
                               <div className="block bg-red rounded-full w-3.5 h-3.5 absolute -top-1.5 -right-1.5"></div>
                             ) : null}
@@ -259,7 +259,7 @@ export default function ChainsList({ chains, setChains }: Props) {
                               chains?.length > 5 ? "btn-sm" : ""
                             } ${userChain ? "" : "btn-disabled"}`}
                           >
-                            <span className="text-xl feather feather-more-vertical" />
+                            <span className="text-xl icon-more-vertical" />
                           </label>
                           {userChain ? (
                             <ul
@@ -319,7 +319,7 @@ export default function ChainsList({ chains, setChains }: Props) {
                                       <span className="opacity-50">
                                         {t("remindHost")}
                                       </span>
-                                      <i className="feather feather-slash ml-1 rtl:ml-0 rtl:mr-1"></i>
+                                      <i className="icon-slash ml-1 rtl:ml-0 rtl:mr-1"></i>
                                     </span>
                                     <span
                                       className="text-xs"
diff --git a/frontend/src/components/react/components/Counters/Counters.tsx b/frontend/src/components/react/components/Counters/Counters.tsx
index 5e0e445f0..7afc0ca23 100644
--- a/frontend/src/components/react/components/Counters/Counters.tsx
+++ b/frontend/src/components/react/components/Counters/Counters.tsx
@@ -106,8 +106,8 @@ export default function Counters() {
               className="btn btn-primary btn-circle"
               aria-label="our impact"
             >
-              <span className="feather feather-arrow-right rtl:hidden" />
-              <span className="feather feather-arrow-left ltr:hidden" />
+              <span className="icon-arrow-right rtl:hidden" />
+              <span className="icon-arrow-left ltr:hidden" />
             </a>
           </div>
           <div className="opacity-100 whitespace-normal">
diff --git a/frontend/src/components/react/components/DataExport.tsx b/frontend/src/components/react/components/DataExport.tsx
index 04fe8c52b..d1eb8d18b 100644
--- a/frontend/src/components/react/components/DataExport.tsx
+++ b/frontend/src/components/react/components/DataExport.tsx
@@ -66,7 +66,7 @@ export function UserDataExport(props: {
       data-tip={t("exportToSpreadsheet")}
     >
       {t("exportData")}
-      <span className="feather feather-download ms-3" />
+      <span className="icon-download ms-3" />
     </CSVLink>
   );
 }
diff --git a/frontend/src/components/react/components/EventChangeForm.tsx b/frontend/src/components/react/components/EventChangeForm.tsx
index 6c301c092..5e4901b95 100644
--- a/frontend/src/components/react/components/EventChangeForm.tsx
+++ b/frontend/src/components/react/components/EventChangeForm.tsx
@@ -414,7 +414,7 @@ export default function EventChangeForm(props: {
                     className="btn btn-error"
                     onClick={onImageDelete}
                   >
-                    <span className="feather feather-trash" />
+                    <span className="icon-trash" />
                   </button>
                 ) : null}
                 <button
@@ -424,7 +424,7 @@ export default function EventChangeForm(props: {
                   onClick={() => refFileInput.current?.click()}
                 >
                   {t("uploadImage")}
-                  <span className="feather feather-upload ltr:ml-4 rtl:mr-4"></span>
+                  <span className="icon-upload ltr:ml-4 rtl:mr-4"></span>
                 </button>
               </div>
               {values.image_url ? (
@@ -439,7 +439,7 @@ export default function EventChangeForm(props: {
           <div className="flex justify-end">
             <button type="submit" className="btn btn-primary">
               {t("submit")}
-              <span className="feather feather-arrow-right ltr:ml-4 rtl:mr-4"></span>
+              <span className="icon-arrow-right ltr:ml-4 rtl:mr-4"></span>
             </button>
           </div>
         </div>
diff --git a/frontend/src/components/react/components/FindChain/ChainDescription.tsx b/frontend/src/components/react/components/FindChain/ChainDescription.tsx
index 6ab426384..ed9cc221b 100644
--- a/frontend/src/components/react/components/FindChain/ChainDescription.tsx
+++ b/frontend/src/components/react/components/FindChain/ChainDescription.tsx
@@ -46,8 +46,8 @@ export default function ChainDescription(props: Props) {
         <button
           type="button"
           aria-label="expand"
-          className={"sticky bottom-0 btn btn-xs btn-secondary feather ".concat(
-            isOpenDesc ? "feather-chevron-up" : "feather-chevron-down",
+          className={"sticky bottom-0 btn btn-xs btn-secondary ".concat(
+            isOpenDesc ? "icon-chevron-up" : "icon-chevron-down",
           )}
           onClick={handleClickShortenedDesc}
         ></button>
diff --git a/frontend/src/components/react/components/FindChain/SearchBar.tsx b/frontend/src/components/react/components/FindChain/SearchBar.tsx
index 561f8a9ab..cb422f55a 100644
--- a/frontend/src/components/react/components/FindChain/SearchBar.tsx
+++ b/frontend/src/components/react/components/FindChain/SearchBar.tsx
@@ -195,7 +195,7 @@ export default function SearchBar(props: Props) {
 
         <button type="submit" className="grow btn btn-primary" ref={refSubmit}>
           <span className="hidden sm:inline">{t("search")}</span>
-          <span className="sm:hidden inline feather feather-search"></span>
+          <span className="sm:hidden inline icon-search"></span>
         </button>
       </div>
     </form>
diff --git a/frontend/src/components/react/components/FindChain/Sidebar.tsx b/frontend/src/components/react/components/FindChain/Sidebar.tsx
index d7561f248..d0ca302bd 100644
--- a/frontend/src/components/react/components/FindChain/Sidebar.tsx
+++ b/frontend/src/components/react/components/FindChain/Sidebar.tsx
@@ -141,9 +141,9 @@ export default function SideBar({
             onClick={handleClose}
             className="absolute top-0 sm:top-2 right-2 rtl:right-auto rtl:left-2 btn btn-md sm:btn-sm text-2xl btn-circle btn-accent tooltip tooltip-left flex justify-center"
           >
-            <span className="feather feather-arrow-left hidden sm:ltr:block"></span>
-            <span className="feather feather-arrow-right hidden sm:rtl:block"></span>
-            <span className="feather feather-x sm:hidden"></span>
+            <span className="icon-arrow-left hidden sm:ltr:block"></span>
+            <span className="icon-arrow-right hidden sm:rtl:block"></span>
+            <span className="icon-x sm:hidden"></span>
           </button>
         </div>
 
@@ -241,7 +241,7 @@ function SideBarChainItem(props: {
                   onClick={handleClickViewChain}
                 >
                   {t("viewLoop")}
-                  <span className="feather feather-shield ml-3"></span>
+                  <span className="icon-shield ml-3"></span>
                 </button>
               ) : null}
             </div>
@@ -252,12 +252,12 @@ function SideBarChainItem(props: {
           userChain.is_approved ? (
             <p className="bg-primary px-3 font-semibold text-sm border border-primary h-8 inline-flex items-center">
               {t("joined")}
-              <span className="feather feather-check ml-3"></span>
+              <span className="icon-check ml-3"></span>
             </p>
           ) : (
             <p className="px-3 font-semibold text-sm border border-secondary h-8 inline-flex items-center text-secondary">
               {t("pendingApproval")}
-              <span className="feather feather-user-check ml-3"></span>
+              <span className="icon-user-check ml-3"></span>
             </p>
           )
         ) : props.chain.open_to_new_members ? (
@@ -268,8 +268,8 @@ function SideBarChainItem(props: {
               className="btn btn-sm btn-primary"
             >
               {t("join")}
-              <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-3 ltr:hidden"></span>
             </button>
           ) : (
             <p className="bg-primary px-3 font-semibold text-sm border border-primary h-8 inline-flex items-center">
@@ -279,7 +279,7 @@ function SideBarChainItem(props: {
         ) : (
           <p className="px-3 font-semibold text-sm border border-secondary h-8 inline-flex items-center text-secondary">
             {t("closed")}
-            <span className="feather feather-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
+            <span className="icon-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
           </p>
         )}
       </div>
diff --git a/frontend/src/components/react/components/Footer.tsx b/frontend/src/components/react/components/Footer.tsx
index 9a7d0ed8d..2b07b38cc 100644
--- a/frontend/src/components/react/components/Footer.tsx
+++ b/frontend/src/components/react/components/Footer.tsx
@@ -120,7 +120,7 @@ export default function Footer(props: { pathname: string }) {
                     <a
                       href="mailto:hello@clothingloop.org"
                       aria-label="Our email address"
-                      className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center hover:bg-[#b464a8] feather feather-mail text-lg"
+                      className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center hover:bg-[#b464a8] icon-mail text-lg"
                     ></a>
                     <span
                       {...addCopyAttributes(t, "footer-copy-email", "text-sm")}
@@ -133,7 +133,7 @@ export default function Footer(props: { pathname: string }) {
                       href="https://www.instagram.com/theclothingloop/"
                       target="_blank"
                       rel="noreferrer"
-                      className="btn btn-circle btn-outline feather feather-instagram text-lg mr-3 rtl:mr-0 rtl:ml-3 hover:bg-instagram"
+                      className="btn btn-circle btn-outline icon-instagram text-lg mr-3 rtl:mr-0 rtl:ml-3 hover:bg-instagram"
                       aria-label="link to our instagram account"
                     ></a>
                     <span
@@ -153,7 +153,7 @@ export default function Footer(props: { pathname: string }) {
                       aria-label="Our Facebook page"
                       className="flex flex-row items-center group"
                     >
-                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-facebook feather feather-facebook text-lg"></span>
+                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-facebook icon-facebook text-lg"></span>
                       <span className="text-sm lg:hidden">Facebook</span>
                     </a>
                   </li>
@@ -164,7 +164,7 @@ export default function Footer(props: { pathname: string }) {
                       aria-label="Our LinkedIn page"
                       className="flex flex-row items-center group"
                     >
-                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-[#0a66c2] feather feather-linkedin text-lg"></span>
+                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-[#0a66c2] icon-linkedin text-lg"></span>
                       <span className="text-sm lg:hidden">LinkedIn</span>
                     </a>
                   </li>
diff --git a/frontend/src/components/react/components/Navbar.tsx b/frontend/src/components/react/components/Navbar.tsx
index b64733b64..213bc9df4 100644
--- a/frontend/src/components/react/components/Navbar.tsx
+++ b/frontend/src/components/react/components/Navbar.tsx
@@ -37,8 +37,8 @@ function Navbar(props: { pathname: string }) {
           className="mr-3 btn-lg btn-circle btn-ghost hover:bg-base-200 peer-checked:text-secondary peer-checked:animate-[spin-quarter_150ms_linear] flex justify-center items-center lg:hidden relative z-[60] checked:ring-2 checked:ring-offset-2 ring-teal peer-[:checked_>:nth-of-type(1)]:hidden peer-[:checked_>:nth-of-type(2)]:block cursor-pointer"
           aria-label="Menu"
         >
-          <span className="feather feather-menu text-2xl block"></span>
-          <span className="feather feather-x text-2xl hidden"></span>
+          <span className="icon-menu text-2xl block"></span>
+          <span className="icon-x text-2xl hidden"></span>
         </label>
         <div className="hidden peer-checked:block fixed inset-0 lg:!hidden z-50 bg-white"></div>
         <div className="hidden peer-checked:block absolute inset-0 lg:!hidden z-50">
@@ -56,7 +56,7 @@ function Navbar(props: { pathname: string }) {
               href={localizePath("/loops/new/users/signup")}
               className="mb-3 btn btn-primary btn-outline"
             >
-              <span className="feather feather-arrow-left mr-3"></span>
+              <span className="icon-arrow-left mr-3"></span>
               {t("startNewLoop")}
             </a>
             <a
@@ -64,8 +64,8 @@ function Navbar(props: { pathname: string }) {
               className="mb-3 btn btn-primary btn-outline"
             >
               {t("findLoops")}
-              <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-3 ltr:hidden"></span>
             </a>
 
             <a
@@ -129,8 +129,8 @@ function Navbar(props: { pathname: string }) {
                 className="ltr:mr-4 rtl:ml-4 btn btn-primary btn-outline"
               >
                 {t("findLoops")}
-                <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-                <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+                <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+                <span className="icon-arrow-left mr-4 ltr:hidden"></span>
               </a>
             )}
 
diff --git a/frontend/src/components/react/components/Newsletter.tsx b/frontend/src/components/react/components/Newsletter.tsx
index b16e1071f..2942f8dd1 100644
--- a/frontend/src/components/react/components/Newsletter.tsx
+++ b/frontend/src/components/react/components/Newsletter.tsx
@@ -99,8 +99,8 @@ export const Newsletter = () => {
                 type="submit"
               >
                 {t("submit")}
-                <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-                <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+                <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+                <span className="icon-arrow-left mr-3 ltr:hidden"></span>
               </button>
             </div>
           </div>
diff --git a/frontend/src/components/react/components/Popover.tsx b/frontend/src/components/react/components/Popover.tsx
index 40100903b..feac37975 100644
--- a/frontend/src/components/react/components/Popover.tsx
+++ b/frontend/src/components/react/components/Popover.tsx
@@ -13,7 +13,7 @@ export default function PopoverOnHover({ message, className }: IProps) {
       aria-label={message}
       data-tip={message}
     >
-      <span className="feather feather-help-circle text-lg" />
+      <span className="icon-help-circle text-lg" />
     </div>
   );
 }
diff --git a/frontend/src/components/react/components/PopupLegal.tsx b/frontend/src/components/react/components/PopupLegal.tsx
index f5b04817b..5c8ef5b8d 100644
--- a/frontend/src/components/react/components/PopupLegal.tsx
+++ b/frontend/src/components/react/components/PopupLegal.tsx
@@ -87,7 +87,7 @@ export default function PopupLegal({
                   className="absolute bottom-2 ltr:right-2 rtl:left-2 btn btn-circle btn-sm btn-secondary text-white opacity-50 hover:opacity-90 tooltip ltr:tooltip-left rtl:tooltip-right before:font-normal before:text-sm"
                   data-tip="Scroll to the bottom."
                 >
-                  <span className="feather feather-arrow-down font-bold" />
+                  <span className="icon-arrow-down font-bold" />
                 </button>
               </div>
             </>
@@ -112,7 +112,7 @@ export default function PopupLegal({
                   className="absolute bottom-2 ltr:right-2 rtl:left-2 btn btn-circle btn-sm btn-secondary text-white opacity-50 hover:opacity-90 tooltip ltr:tooltip-left rtl:tooltip-right before:font-normal before:text-sm"
                   data-tip="Scroll to the bottom."
                 >
-                  <span className="feather feather-arrow-down font-bold" />
+                  <span className="icon-arrow-down font-bold" />
                 </button>
               </div>
             </>
diff --git a/frontend/src/components/react/components/RouteMap/RouteMap.tsx b/frontend/src/components/react/components/RouteMap/RouteMap.tsx
index 58d7de6cf..2fa334bb8 100644
--- a/frontend/src/components/react/components/RouteMap/RouteMap.tsx
+++ b/frontend/src/components/react/components/RouteMap/RouteMap.tsx
@@ -174,13 +174,13 @@ export default function RouteMap(props: { chain: Chain; route: UID[] }) {
     );
   }
 
-  let lineTypeIcon = "feather-git-commit";
+  let lineTypeIcon = "icon-git-commit";
   let lineTypeHoverText = t("showRouteOrder");
   if (lineType === "line") {
-    lineTypeIcon = "feather-minus";
+    lineTypeIcon = "icon-minus";
     lineTypeHoverText = t("showRoute");
   } else if (lineType === "dot") {
-    lineTypeIcon = "feather-circle";
+    lineTypeIcon = "icon-circle";
     lineTypeHoverText = t("showAddress");
   }
   return (
@@ -195,9 +195,7 @@ export default function RouteMap(props: { chain: Chain; route: UID[] }) {
           onClick={() => handleNextLineType()}
           data-tip={lineTypeHoverText}
         >
-          <span
-            className={`feather text-base-content text-lg ${lineTypeIcon}`}
-          />
+          <span className={`text-base-content text-lg ${lineTypeIcon}`} />
         </button>
 
         <div className="btn-group btn-group-vertical">
@@ -210,7 +208,7 @@ export default function RouteMap(props: { chain: Chain; route: UID[] }) {
             }`}
             onClick={() => handleMapZoom("+")}
           >
-            <span className="feather feather-plus text-base-content text-lg" />
+            <span className="icon-plus text-base-content text-lg" />
           </button>
           <button
             type="button"
@@ -221,7 +219,7 @@ export default function RouteMap(props: { chain: Chain; route: UID[] }) {
             }`}
             onClick={() => handleMapZoom("-")}
           >
-            <span className="feather feather-minus text-base-content text-lg" />
+            <span className="icon-minus text-base-content text-lg" />
           </button>
         </div>
       </div>
diff --git a/frontend/src/components/react/components/RouteMap/RouteMapPopup.tsx b/frontend/src/components/react/components/RouteMap/RouteMapPopup.tsx
index b3ad5cb5e..7eb448713 100644
--- a/frontend/src/components/react/components/RouteMap/RouteMapPopup.tsx
+++ b/frontend/src/components/react/components/RouteMap/RouteMapPopup.tsx
@@ -66,7 +66,7 @@ export default function RouteMapPopup(props: {
                 onClick={returnToPreviousRoute}
               >
                 {t("routeUndoOptimize")}
-                <span className="feather feather-corner-left-up ms-2" />
+                <span className="icon-corner-left-up ms-2" />
               </button>
             ) : (
               <button
@@ -75,7 +75,7 @@ export default function RouteMapPopup(props: {
                 onClick={optimizeRoute}
               >
                 {t("routeOptimize")}
-                <span className="feather feather-zap ms-2" />
+                <span className="icon-zap ms-2" />
               </button>
             )}
             <div>
diff --git a/frontend/src/components/react/components/SizesDropdown.tsx b/frontend/src/components/react/components/SizesDropdown.tsx
index 72b46ff65..e03157759 100644
--- a/frontend/src/components/react/components/SizesDropdown.tsx
+++ b/frontend/src/components/react/components/SizesDropdown.tsx
@@ -43,8 +43,8 @@ export default function SizesDropdown(props: {
       >
         <span className="truncate">{btnLabel}</span>
         <span
-          className={`ltr:pl-2 rtl:pr-2 feather ${
-            dropdown.open ? "feather-arrow-up" : "feather-arrow-down"
+          className={`ltr:pl-2 rtl:pr-2 ${
+            dropdown.open ? "icon-arrow-up" : "icon-arrow-down"
           }`}
         ></span>
       </label>
diff --git a/frontend/src/components/react/components/Testimonials.tsx b/frontend/src/components/react/components/Testimonials.tsx
index e227b9259..6e79acf2a 100644
--- a/frontend/src/components/react/components/Testimonials.tsx
+++ b/frontend/src/components/react/components/Testimonials.tsx
@@ -75,28 +75,28 @@ export default function Testimonials() {
             onClick={() => click(CarouselOperation.MINUS)}
             aria-label="previous testimonial"
           >
-            <span className="feather feather-arrow-left" />
+            <span className="icon-arrow-left" />
           </button>
           <button
             className="btn btn-circle btn-secondary opacity-70 rtl:hidden ml-4"
             onClick={() => click(CarouselOperation.PLUS)}
             aria-label="next testimonial"
           >
-            <span className="feather feather-arrow-right" />
+            <span className="icon-arrow-right" />
           </button>
           <button
             className="btn btn-circle btn-secondary opacity-70 ltr:hidden"
             onClick={() => click(CarouselOperation.MINUS_RTL)}
             aria-label="previous testimonial"
           >
-            <span className="feather feather-arrow-right" />
+            <span className="icon-arrow-right" />
           </button>
           <button
             className="btn btn-circle btn-secondary opacity-70 ltr:hidden mr-4"
             onClick={() => click(CarouselOperation.PLUS_RTL)}
             aria-label="next testimonial"
           >
-            <span className="feather feather-arrow-left" />
+            <span className="icon-arrow-left" />
           </button>
         </div>
       </div>
diff --git a/frontend/src/components/react/layout/ToastManager.tsx b/frontend/src/components/react/layout/ToastManager.tsx
index fdb172840..70280046f 100644
--- a/frontend/src/components/react/layout/ToastManager.tsx
+++ b/frontend/src/components/react/layout/ToastManager.tsx
@@ -45,23 +45,23 @@ function ToastComponent(props: {
   closeFunc: (id: number) => void;
 }) {
   let classes = "p-4 shadow-lg border";
-  let icon = "mr-3 feather";
+  let icon = "mr-3 icon";
   switch (props.toast.type) {
     case "info":
-      icon += " feather-info";
+      icon += " icon-info";
       classes += " bg-base-100 border-teal";
       break;
     case "success":
       classes += " bg-success border-success";
-      icon += " feather-check-circle";
+      icon += " icon-check-circle";
       break;
     case "warning":
       classes += " bg-yellow border-yellow";
-      icon += " feather-alert-triangle";
+      icon += " icon-alert-triangle";
       break;
     case "error":
       classes += " bg-error border-error";
-      icon += " feather-alert-octagon";
+      icon += " icon-alert-octagon";
       break;
   }
 
diff --git a/frontend/src/components/react/pages/About.tsx b/frontend/src/components/react/pages/About.tsx
index 06f265ff5..5c1104a29 100644
--- a/frontend/src/components/react/pages/About.tsx
+++ b/frontend/src/components/react/pages/About.tsx
@@ -56,8 +56,8 @@ export default function About() {
                     href={localizePath("/faq")}
                   >
                     {t("faq", { ns: "translation" })}
-                    <span className="feather feather-arrow-left ltr:hidden ms-2"></span>
-                    <span className="feather feather-arrow-right rtl:hidden ms-2"></span>
+                    <span className="icon-arrow-left ltr:hidden ms-2"></span>
+                    <span className="icon-arrow-right rtl:hidden ms-2"></span>
                   </a>
                 </div>
               </div>
diff --git a/frontend/src/components/react/pages/AdminDashboard.tsx b/frontend/src/components/react/pages/AdminDashboard.tsx
index 4a42da357..91f5f5b1e 100644
--- a/frontend/src/components/react/pages/AdminDashboard.tsx
+++ b/frontend/src/components/react/pages/AdminDashboard.tsx
@@ -129,7 +129,7 @@ export default function AdminDashboard() {
                     href="https://drive.google.com/drive/folders/1iMJzIcBxgApKx89hcaHhhuP5YAs_Yb27"
                   >
                     {t("toolkitFolder")}
-                    <span className="feather feather-external-link ml-2 rtl:ml-0 rtl:mr-2"></span>
+                    <span className="icon-external-link ml-2 rtl:ml-0 rtl:mr-2"></span>
                   </a>
                 </div>
               ) : null}
@@ -139,14 +139,14 @@ export default function AdminDashboard() {
                   href={localizePath("/users/edit/?user=me")}
                 >
                   {t("editAccount")}
-                  <span className="feather feather-edit ml-2 rtl:ml-0 rtl:mr-2"></span>
+                  <span className="icon-edit ml-2 rtl:ml-0 rtl:mr-2"></span>
                 </a>
                 <button
                   className="btn btn-sm btn-secondary btn-outline bg-white h-auto mb-4 sm:mr-4 text-black group"
                   onClick={logoutClicked}
                 >
                   {t("logout")}
-                  <span className="feather feather-log-out text-red group-hover:text-white ml-2 rtl:ml-0 rtl:mr-2"></span>
+                  <span className="icon-log-out text-red group-hover:text-white ml-2 rtl:ml-0 rtl:mr-2"></span>
                 </button>
 
                 <button
@@ -154,7 +154,7 @@ export default function AdminDashboard() {
                   onClick={deleteClicked}
                 >
                   <span className="text-danger">{t("deleteUserBtn")}</span>
-                  <span className="feather feather-alert-octagon ml-2 rtl:ml-0 rtl:mr-2"></span>
+                  <span className="icon-alert-octagon ml-2 rtl:ml-0 rtl:mr-2"></span>
                 </button>
               </div>
             </div>
@@ -179,7 +179,7 @@ export default function AdminDashboard() {
               aria-label="close"
               htmlFor="modal-circle-loop"
             >
-              <div className="btn btn-sm btn-square absolute right-2 top-2 feather feather-x"></div>
+              <div className="btn btn-sm btn-square absolute right-2 top-2 icon-x"></div>
               <img
                 className="max-h-full"
                 src="https://images.clothingloop.org/x1080/circle_loop.jpg"
diff --git a/frontend/src/components/react/pages/ChainMemberList.tsx b/frontend/src/components/react/pages/ChainMemberList.tsx
index 1a777998c..ecbca2e64 100644
--- a/frontend/src/components/react/pages/ChainMemberList.tsx
+++ b/frontend/src/components/react/pages/ChainMemberList.tsx
@@ -469,7 +469,7 @@ export default function ChainMemberList() {
                   )}
                   href={shareLink}
                 >
-                  <span className="feather feather-share text-lg" />
+                  <span className="icon-share text-lg" />
                   <span className="absolute top-full end-0 lg:end-auto -mt-1 group-hover:mt-1 text-xs bg-secondary shadow-lg rounded-sm py-1 px-2  whitespace-nowrap group-hover:bg-secondary-focus transition-all opacity-40 group-hover:opacity-100">
                     {t("shareLink")}
                   </span>
@@ -558,7 +558,7 @@ export default function ChainMemberList() {
                     >
                       {t("editLoop")}
                       <span
-                        className="ltr:ml-2 rtl:mr-2 feather feather-edit-2"
+                        className="ltr:ml-2 rtl:mr-2 icon-edit-2"
                         aria-hidden
                       />
                     </a>
@@ -570,7 +570,7 @@ export default function ChainMemberList() {
                     >
                       {t("deleteLoop")}
                       <span
-                        className="ltr:ml-2 rtl:mr-2 feather feather-trash"
+                        className="ltr:ml-2 rtl:mr-2 icon-trash"
                         aria-hidden
                       />
                     </button>
@@ -693,8 +693,8 @@ export default function ChainMemberList() {
                 >
                   {t("map")}
                   <span
-                    className={`feather ${
-                      isOpenRouteMapPopup ? "feather-x" : "feather-map"
+                    className={`${
+                      isOpenRouteMapPopup ? "icon-x" : "icon-map"
                     } ms-3`}
                   />
                 </button>
@@ -1108,7 +1108,7 @@ function ParticipantsTable(props: {
       message: t("addCoHost"),
       content: () => (
         <p className="text-center">
-          <span className="feather feather-user inline-block mr-1" />
+          <span className="icon-user inline-block mr-1" />
           {user.name}
         </p>
       ),
@@ -1143,11 +1143,11 @@ function ParticipantsTable(props: {
               className="absolute top-5 ltr:right-4 rtl:left-4 tooltip-left"
             />
             <p className="mb-4">
-              <span className="feather feather-user inline-block mr-1" />
+              <span className="icon-user inline-block mr-1" />
               {user.name}
             </p>
             <p className="mb-1 font-semibold text-sm">{props.chain.name}</p>
-            <span className="feather feather-arrow-down inline-block mb-1" />
+            <span className="icon-arrow-down inline-block mb-1" />
           </div>
           <select
             className="w-full select select-sm rounded-none disabled:text-base-300 border-2 border-black"
@@ -1529,7 +1529,7 @@ function RouteTable(props: {
                       <div
                         tabIndex={0}
                         aria-label="drag"
-                        className="hidden lg:inline-block p-1 ml-2 rounded-full hover:bg-white cursor-grab active:cursor-grabbing feather feather-maximize-2 -rotate-45"
+                        className="hidden lg:inline-block p-1 ml-2 rounded-full hover:bg-white cursor-grab active:cursor-grabbing icon-maximize-2 -rotate-45"
                       ></div>
                     </td>
                     <td
@@ -1553,7 +1553,7 @@ function RouteTable(props: {
                     <td className={`${classTdDragging} text-right`}>
                       <button
                         aria-label="go to edit"
-                        className="btn btn-circle btn-sm btn-ghost bg-base-100 feather feather-info"
+                        className="btn btn-circle btn-sm btn-ghost bg-base-100 icon-info"
                         onClick={() => props.onGoToEditTableItem(u.uid)}
                       ></button>
                     </td>
@@ -1583,7 +1583,7 @@ function SortButton(props: {
     <button
       aria-label={t("sort")!}
       className={
-        "btn btn-xs btn-circle feather feather-chevrons-down " +
+        "btn btn-xs btn-circle icon-chevrons-down " +
         props.className +
         " " +
         classIcon
@@ -1597,7 +1597,7 @@ function DropdownMenu(props: { items: ReactElement[]; classes: string }) {
   return (
     <div className={"dropdown ".concat(props.classes)}>
       <label tabIndex={0} className="btn btn-ghost">
-        <span className="text-xl feather feather-more-vertical" />
+        <span className="text-xl icon-more-vertical" />
       </label>
       <ul
         tabIndex={0}
@@ -1678,7 +1678,7 @@ function BagsColumn(props: { bags: Bag[] }) {
     bagsJSX.push(
       <div
         key={0}
-        className="relative w-8 h-8 flex items-center justify-center feather feather-shopping-bag scale-[0.9] text-xl text-white rounded-full cursor-pointer transition-transform group-active/bag:scale-[0.7]"
+        className="relative w-8 h-8 flex items-center justify-center icon-shopping-bag scale-[0.9] text-xl text-white rounded-full cursor-pointer transition-transform group-active/bag:scale-[0.7]"
         style={{
           backgroundColor: firstBag.color,
         }}
diff --git a/frontend/src/components/react/pages/Contacts.tsx b/frontend/src/components/react/pages/Contacts.tsx
index 548a3037c..27f47fb9e 100644
--- a/frontend/src/components/react/pages/Contacts.tsx
+++ b/frontend/src/components/react/pages/Contacts.tsx
@@ -104,8 +104,8 @@ const Contacts = () => {
             }`}
           >
             {t("submit")}
-            <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-            <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+            <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+            <span className="icon-arrow-left mr-4 ltr:hidden"></span>
           </button>
         </form>
       </main>
diff --git a/frontend/src/components/react/pages/Contribute.tsx b/frontend/src/components/react/pages/Contribute.tsx
index 0c85a0303..a78279ff9 100644
--- a/frontend/src/components/react/pages/Contribute.tsx
+++ b/frontend/src/components/react/pages/Contribute.tsx
@@ -102,7 +102,7 @@ export default function Contribute() {
           </h2>
         </div>
         <div className="flex-grow mx-4 mb-2">
-          <span className="feather feather-map-pin mr-2 rtl:mr-0 rtl:ml-2"></span>
+          <span className="icon-map-pin mr-2 rtl:mr-0 rtl:ml-2"></span>
           <address className="inline">{event.address}</address>
         </div>
         <div className="m-4 mt-0">
@@ -169,7 +169,7 @@ export default function Contribute() {
                 href={localizePath("/donate")}
               >
                 <span>{t("donate")}</span>
-                <span className="ms-3 feather feather-heart text-base font-bold" />
+                <span className="ms-3 icon-heart text-base font-bold" />
               </a>
               <h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
                 <Trans i18nKey="startALoop" ns="contribute" />
@@ -182,8 +182,8 @@ export default function Contribute() {
                 className="btn btn-primary w-full sm:w-auto btn-outline text-black md:mb-8"
               >
                 {t("startNewLoop", { ns: "translation" })}
-                <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-                <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+                <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+                <span className="icon-arrow-left mr-3 ltr:hidden"></span>
               </a>
             </div>
             <a
@@ -255,7 +255,7 @@ export default function Contribute() {
                   className="max-xs:w-full btn btn-accent text-white mb-8"
                   href={localizePath("/events")}
                 >
-                  <span className="feather feather-calendar me-3 text-xl" />
+                  <span className="icon-calendar me-3 text-xl" />
                   {t("events", { ns: "translation" })}
                 </a>
               </div>
@@ -295,7 +295,7 @@ export default function Contribute() {
               <div className="mb-8">
                 <div className="inline-flex w-auto">
                   <a
-                    className="btn btn-square bg-instagram text-white feather feather-instagram text-2xl"
+                    className="btn btn-square bg-instagram text-white icon-instagram text-2xl"
                     href="https://www.instagram.com/theclothingloop/"
                     target="_blank"
                   ></a>
@@ -343,7 +343,7 @@ export default function Contribute() {
                   target="_blank"
                   href="/the-clothing-loop/website/issues"
                 >
-                  <span className="feather feather-git-branch me-2" />
+                  <span className="icon-git-branch me-2" />
                   <span>Github</span>
                 </a>
                 <a
@@ -351,7 +351,7 @@ export default function Contribute() {
                   href="mailto:hello@clothingloop.org"
                   aria-label="Our email address"
                 >
-                  <span className="feather feather-mail text-lg"></span>
+                  <span className="icon-mail text-lg"></span>
                 </a>
               </div>
             </div>
@@ -421,8 +421,8 @@ export default function Contribute() {
                 className="btn btn-secondary btn-outline"
               >
                 {t("contactUs", { ns: "translation" })}
-                <span className="feather feather-arrow-right ml-4 rtl:hidden" />
-                <span className="feather feather-arrow-left mr-4 ltr:hidden" />
+                <span className="icon-arrow-right ml-4 rtl:hidden" />
+                <span className="icon-arrow-left mr-4 ltr:hidden" />
               </a>
             </div>
             <div
@@ -446,7 +446,7 @@ export default function Contribute() {
                   type="video/mp4"
                 />
               </video>
-              <div className="absolute bottom-6 left-7 text-white leading-none text-2xl feather feather-play group-hover:opacity-0 transition-opacity"></div>
+              <div className="absolute bottom-6 left-7 text-white leading-none text-2xl icon-play group-hover:opacity-0 transition-opacity"></div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/react/pages/DonationForm.tsx b/frontend/src/components/react/pages/DonationForm.tsx
index dcc26182a..6a4681d84 100644
--- a/frontend/src/components/react/pages/DonationForm.tsx
+++ b/frontend/src/components/react/pages/DonationForm.tsx
@@ -298,7 +298,7 @@ function DonationFormContent() {
 
         <div className="mb-2">
           {loading ? (
-            <span className="feather feather-loader animate-spin" />
+            <span className="icon-loader animate-spin" />
           ) : (
             <button
               type="submit"
diff --git a/frontend/src/components/react/pages/EventDetails.tsx b/frontend/src/components/react/pages/EventDetails.tsx
index ca72aca4d..bb9998cbc 100644
--- a/frontend/src/components/react/pages/EventDetails.tsx
+++ b/frontend/src/components/react/pages/EventDetails.tsx
@@ -167,8 +167,8 @@ export default function EventDetails() {
                   className="btn btn-primary sm:me-4"
                 >
                   <span className="relative mr-4 rtl:mr-1 rtl:ml-3" aria-hidden>
-                    <span className="inline-block feather feather-calendar relative transform scale-125"></span>
-                    <span className="absolute -bottom-2 -right-2.5 transform scale-90 feather feather-download"></span>
+                    <span className="inline-block icon-calendar relative transform scale-125"></span>
+                    <span className="absolute -bottom-2 -right-2.5 transform scale-90 icon-download"></span>
                   </span>
                   {t("addToCalendar")}
                 </a>
@@ -178,7 +178,7 @@ export default function EventDetails() {
                       href={localizePath("/events/edit/?event=" + event.uid)}
                       className="btn btn-secondary btn-outline sm:me-4"
                     >
-                      <span className="feather feather-edit mr-3 rtl:mr-0 rtl:ml-3"></span>
+                      <span className="icon-edit mr-3 rtl:mr-0 rtl:ml-3"></span>
                       {t("edit")}
                     </a>
                     <button
@@ -187,7 +187,7 @@ export default function EventDetails() {
                       aria-label={t("delete")!}
                       onClick={handleDeleteEvent}
                     >
-                      <span className="feather feather-trash"></span>
+                      <span className="icon-trash"></span>
                     </button>
                   </>
                 ) : null}
@@ -206,7 +206,7 @@ export default function EventDetails() {
                         </dt>
                         <dd className="mb-1 ltr:ml-4 rtl:mr-4">
                           <span
-                            className="ltr:mr-2 rtl:ml-2 inline-block feather feather-clock"
+                            className="ltr:mr-2 rtl:ml-2 inline-block icon-clock"
                             aria-hidden
                           ></span>
                           {dateEnd ? (
@@ -220,11 +220,11 @@ export default function EventDetails() {
                                   {date?.format("LT")}
                                 </span>
                                 <span
-                                  className="inline-block feather feather-arrow-right mx-2 rtl:hidden"
+                                  className="inline-block icon-arrow-right mx-2 rtl:hidden"
                                   aria-hidden
                                 ></span>{" "}
                                 <span
-                                  className="inline-block feather feather-arrow-left mx-2 ltr:hidden"
+                                  className="inline-block icon-arrow-left mx-2 ltr:hidden"
                                   aria-hidden
                                 ></span>
                                 <span className="font-sans text-lg">
@@ -238,11 +238,11 @@ export default function EventDetails() {
                                 </span>
                                 <br />
                                 <span
-                                  className="block feather feather-arrow-down"
+                                  className="block icon-arrow-down"
                                   aria-hidden
                                 ></span>
                                 <span
-                                  className="ltr:mr-2 rtl:ml-2 inline-block feather feather-clock rotate-90"
+                                  className="ltr:mr-2 rtl:ml-2 inline-block icon-clock rotate-90"
                                   aria-hidden
                                 ></span>
                                 <span className="font-sans text-lg">
@@ -262,7 +262,7 @@ export default function EventDetails() {
                       {t("price") + ":"}
                     </dt>
                     <dd className="mb-1 ltr:ml-4 rtl:mr-4">
-                      <span className="ltr:mr-2 rtl:ml-2 inline-block feather feather-tag"></span>
+                      <span className="ltr:mr-2 rtl:ml-2 inline-block icon-tag"></span>
                       {event.price_currency ? (
                         <span className="font-sans text-lg" key="price">
                           {event.price_currency + " " + eventPriceValue}
@@ -280,7 +280,7 @@ export default function EventDetails() {
                         </dt>
                         <dd className="mb-1 ltr:ml-4 rtl:mr-4">
                           <span
-                            className="ltr:mr-2 rtl:ml-2 feather feather-map-pin"
+                            className="ltr:mr-2 rtl:ml-2 icon-map-pin"
                             aria-hidden
                           ></span>
                           <address
@@ -330,11 +330,11 @@ export default function EventDetails() {
                         >
                           <span className="ltr:mr-2 rtl:ml-2 inline-block relative">
                             <span
-                              className="block feather feather-circle"
+                              className="block icon-circle"
                               aria-hidden
                             ></span>
                             <span
-                              className="absolute top-1 left-0 block feather feather-circle"
+                              className="absolute top-1 left-0 block icon-circle"
                               aria-hidden
                             ></span>
                           </span>
@@ -351,7 +351,7 @@ export default function EventDetails() {
                           target="_blank"
                         >
                           <span
-                            className="ltr:mr-2 rtl:ml-2 inline-block feather feather-external-link"
+                            className="ltr:mr-2 rtl:ml-2 inline-block icon-external-link"
                             aria-hidden
                           ></span>
                           <span className="group-hover:underline">
@@ -405,7 +405,7 @@ export default function EventDetails() {
                             onInput={handleUploadImage}
                           />
                           <div
-                            className="btn btn-ghost bg-white/90 hover:bg-white btn-sm btn-square feather feather-upload"
+                            className="btn btn-ghost bg-white/90 hover:bg-white btn-sm btn-square icon-upload"
                             aria-label="Upload image"
                           ></div>
                         </label>
diff --git a/frontend/src/components/react/pages/Events.tsx b/frontend/src/components/react/pages/Events.tsx
index b816f0e7a..72cbe054a 100644
--- a/frontend/src/components/react/pages/Events.tsx
+++ b/frontend/src/components/react/pages/Events.tsx
@@ -190,7 +190,7 @@ export default function Events() {
                 href={localizePath("/events/create")}
                 className="btn btn-primary mb-4 md:mb-0 "
               >
-                <span className="pr-2 rtl:pr-0 rtl:pl-2 feather feather-plus" />
+                <span className="pr-2 rtl:pr-0 rtl:pl-2 icon-plus" />
                 {t("createEvent")}
               </a>
             ) : (
@@ -218,7 +218,7 @@ export default function Events() {
                   })
                 }
               >
-                <span className="pr-2 rtl:pr-0 rtl:pl-2 feather feather-plus" />
+                <span className="pr-2 rtl:pr-0 rtl:pl-2 icon-plus" />
                 {t("createEvent")}
               </div>
             )}
@@ -407,7 +407,7 @@ function EventItem({ event }: { event: Event }) {
         </h2>
       </div>
       <div className="flex-grow mx-4 mb-2">
-        <span className="feather feather-map-pin mr-2 rtl:mr-0 rtl:ml-2"></span>
+        <span className="icon-map-pin mr-2 rtl:mr-0 rtl:ml-2"></span>
         <address className="inline">{event.address}</address>
       </div>
       <div className="m-4 mt-0">
diff --git a/frontend/src/components/react/pages/FAQ.tsx b/frontend/src/components/react/pages/FAQ.tsx
index e5d3694c8..1d43a2a16 100644
--- a/frontend/src/components/react/pages/FAQ.tsx
+++ b/frontend/src/components/react/pages/FAQ.tsx
@@ -158,8 +158,8 @@ function AccordionFaq(props: {
       >
         <span className="p-3 w-full">{props.item.question}</span>
         <span
-          className={`feather p-3 ${
-            props.open && !props.prevActive ? "feather-minus" : "feather-plus"
+          className={`p-3 ${
+            props.open && !props.prevActive ? "icon-minus" : "icon-plus"
           }`}
         />
       </summary>
diff --git a/frontend/src/components/react/pages/FindChain.tsx b/frontend/src/components/react/pages/FindChain.tsx
index 1098634f7..519d2ace7 100644
--- a/frontend/src/components/react/pages/FindChain.tsx
+++ b/frontend/src/components/react/pages/FindChain.tsx
@@ -529,10 +529,10 @@ export default function FindChain() {
               onClick={() => handleLocation()}
             >
               <span
-                className={`feather text-base-content text-lg ${
+                className={`text-base-content text-lg ${
                   locationLoading
-                    ? "feather-loader animate-spin"
-                    : "feather-navigation"
+                    ? "icon-loader animate-spin"
+                    : "icon-navigation"
                 }`}
               />
             </button>
@@ -545,7 +545,7 @@ export default function FindChain() {
                 }`}
                 onClick={() => mapZoom(map, "+")}
               >
-                <span className="feather feather-plus text-base-content text-lg" />
+                <span className="icon-plus text-base-content text-lg" />
               </button>
               <button
                 className={`btn rounded-b-full p-0 w-12 h-12 ${
@@ -555,7 +555,7 @@ export default function FindChain() {
                 }`}
                 onClick={() => mapZoom(map, "-")}
               >
-                <span className="feather feather-minus text-base-content text-lg" />
+                <span className="icon-minus text-base-content text-lg" />
               </button>
             </div>
           </div>
diff --git a/frontend/src/components/react/pages/Home.tsx b/frontend/src/components/react/pages/Home.tsx
index d8379acfe..3ed0311e4 100644
--- a/frontend/src/components/react/pages/Home.tsx
+++ b/frontend/src/components/react/pages/Home.tsx
@@ -139,8 +139,8 @@ export default function Home() {
                   href={localizePath("/loops/find")}
                 >
                   {t("findALoop")}
-                  <span className="feather feather-arrow-right ml-3 rtl:hidden" />
-                  <span className="feather feather-arrow-left mr-3 ltr:hidden" />
+                  <span className="icon-arrow-right ml-3 rtl:hidden" />
+                  <span className="icon-arrow-left mr-3 ltr:hidden" />
                 </a>
               </div>
             </div>
@@ -205,8 +205,8 @@ export default function Home() {
                   className="hidden md:flex btn btn-outline btn-circle btn-secondary mt-6"
                   aria-label="find loop"
                 >
-                  <span className="feather feather-arrow-right rtl:hidden"></span>
-                  <span className="feather feather-arrow-left ltr:hidden"></span>
+                  <span className="icon-arrow-right rtl:hidden"></span>
+                  <span className="icon-arrow-left ltr:hidden"></span>
                 </a>
               </div>
             </div>
diff --git a/frontend/src/components/react/pages/Login.tsx b/frontend/src/components/react/pages/Login.tsx
index 418b5f8e0..2a5ef4569 100644
--- a/frontend/src/components/react/pages/Login.tsx
+++ b/frontend/src/components/react/pages/Login.tsx
@@ -141,16 +141,16 @@ export default function Login() {
                   <div className="text-white bg-green border-green w-full flex items-center justify-center font-semibold h-12 px-3 mt-6">
                     {t("submit")}
                     {loading ? (
-                      <span className="feather feather-loader animate-spin ml-4 rtl:ml-0 rtl:mr-4"></span>
+                      <span className="icon-loader animate-spin ml-4 rtl:ml-0 rtl:mr-4"></span>
                     ) : (
-                      <span className="feather feather-check ml-4 rtl:ml-0 rtl:mr-4"></span>
+                      <span className="icon-check ml-4 rtl:ml-0 rtl:mr-4"></span>
                     )}
                   </div>
                 ) : (
                   <button type="submit" className="btn btn-primary w-full mt-6">
                     {t("submit")}
-                    <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-                    <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+                    <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+                    <span className="icon-arrow-left mr-4 ltr:hidden"></span>
                   </button>
                 )}
                 <div className="mt-4 prose">
diff --git a/frontend/src/components/react/pages/NewChainSignup.tsx b/frontend/src/components/react/pages/NewChainSignup.tsx
index 0dce0b395..7f191b855 100644
--- a/frontend/src/components/react/pages/NewChainSignup.tsx
+++ b/frontend/src/components/react/pages/NewChainSignup.tsx
@@ -104,8 +104,8 @@ export default function Signup() {
                   form="address-form"
                 >
                   {t("next")}
-                  <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-                  <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+                  <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+                  <span className="icon-arrow-left mr-4 ltr:hidden"></span>
                 </button>
               </div>
             </div>
diff --git a/frontend/src/components/react/pages/Signup.tsx b/frontend/src/components/react/pages/Signup.tsx
index 56f48eb1f..c0baaf0e7 100644
--- a/frontend/src/components/react/pages/Signup.tsx
+++ b/frontend/src/components/react/pages/Signup.tsx
@@ -281,14 +281,14 @@ function SubmitButton({
         return (
           <p className="bg-primary px-3 font-semibold text-sm border border-primary h-12 inline-flex items-center">
             {t("joined")}
-            <span className="feather feather-check ml-3 rtl:ml-0 rtl:mr-3"></span>
+            <span className="icon-check ml-3 rtl:ml-0 rtl:mr-3"></span>
           </p>
         );
       } else {
         return (
           <p className="px-3 font-semibold text-sm border border-secondary h-12 inline-flex items-center text-secondary">
             {t("pendingApproval")}
-            <span className="feather feather-user-check ml-3 rtl:ml-0 rtl:mr-3"></span>
+            <span className="icon-user-check ml-3 rtl:ml-0 rtl:mr-3"></span>
           </p>
         );
       }
@@ -298,7 +298,7 @@ function SubmitButton({
     return (
       <p className="px-3 font-semibold text-sm border border-secondary h-12 inline-flex items-center text-secondary">
         {t("closed")}
-        <span className="feather feather-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
+        <span className="icon-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
       </p>
     );
   }
@@ -306,8 +306,8 @@ function SubmitButton({
   return (
     <button type="submit" className="btn btn-primary" form="address-form">
       {t("join")}
-      <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-      <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+      <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+      <span className="icon-arrow-left mr-4 ltr:hidden"></span>
     </button>
   );
 }
diff --git a/frontend/src/components/react/pages/UserEdit.tsx b/frontend/src/components/react/pages/UserEdit.tsx
index c0dd23b73..20ac8c51b 100644
--- a/frontend/src/components/react/pages/UserEdit.tsx
+++ b/frontend/src/components/react/pages/UserEdit.tsx
@@ -118,8 +118,8 @@ export default function UserEdit() {
               form="address-form"
             >
               {t("submit")}
-              <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-4 ltr:hidden"></span>
             </button>
           </div>
         </div>
diff --git a/frontend/src/layouts/Base.astro b/frontend/src/layouts/Base.astro
index e61b08c0d..b00bebb70 100644
--- a/frontend/src/layouts/Base.astro
+++ b/frontend/src/layouts/Base.astro
@@ -4,6 +4,7 @@ import Navbar from "../components/react/components/Navbar";
 import i18next from "i18next";
 import { getLanguageFlags } from "../languages";
 import { HeadHrefLangs } from "astro-i18next/components";
+// import "lucide-static/font/Lucide.css"
 import "../tailwind.css";
 import "mapbox-gl/dist/mapbox-gl.css";
 import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
@@ -43,7 +44,7 @@ const { title } = Astro.props;
     <HeadHrefLangs />
 
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/icons/feather/style.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static@0.376.0/font/lucide.css" />
     <link rel="preconnect" href="https://images.clothingloop.org" />
     <link rel="preconnect" href="https://fonts.bunny.net" />
     <link
diff --git a/frontend/src/tailwind.css b/frontend/src/tailwind.css
index d42d29b8a..6ba12fb54 100644
--- a/frontend/src/tailwind.css
+++ b/frontend/src/tailwind.css
@@ -150,6 +150,11 @@
   --btn-text-case: default;
 }
 
+[class^="icon-"],
+[class*=" icon-"] {
+  font-weight: normal !important;
+}
+
 .prose {
   @apply prose-headings2:font-serif prose-headings2:text-secondary prose-headings2:font-bold prose-a:link max-w-screen-md prose-p:my-3;
 }