From 2781341269ab90dfe66578e320d1cecaf34eaa36 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 8 May 2026 18:56:09 +0200
Subject: [PATCH] Replace emoji icons in buttons with Lucide React components
 for improved scalability and consistency

---
 web/components/filters/search.tsx  |  5 +++--
 web/components/searches/button.tsx | 10 ++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx
index fd3b5d49..a33560ad 100644
--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -3,6 +3,7 @@ import {DisplayUser} from 'common/api/user-types'
 import {FilterFields} from 'common/filters'
 import {Profile} from 'common/profiles/profile'
 import {debounce as debounceFn} from 'lodash'
+import {Bell} from 'lucide-react'
 import {forwardRef, ReactElement, useEffect, useRef, useState} from 'react'
 import toast from 'react-hot-toast'
 import {IoFilterSharp} from 'react-icons/io5'
@@ -233,9 +234,9 @@ export const Search = forwardRef<
             }}
             // size={'xs'}
             color={'none'}
-            className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl'}
+            className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl text-xs'}
           >
-            🔔{' '}
+            <Bell className="h-4 w-4 mr-1 hidden sm:flex" />{' '}
             {bookmarked
               ? t('common.saved', 'Saved!')
               : loadingBookmark
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index 6572609a..f69ee39f 100644
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -4,6 +4,7 @@ import {DisplayUser} from 'common/api/user-types'
 import {FilterFields} from 'common/filters'
 import {formatFilters, locationType} from 'common/filters-format'
 import {User} from 'common/user'
+import {Star, Users} from 'lucide-react'
 import Link from 'next/link'
 import {useState} from 'react'
 import toast from 'react-hot-toast'
@@ -37,9 +38,10 @@ export function BookmarkSearchButton(props: {
         onClick={() => setOpen(true)}
         color="gray-outline"
         // size={'xs'}
-        className={'rounded-xl bg-canvas-50'}
+        className={'rounded-xl bg-canvas-50  text-xs'}
       >
-        ⭐ {t('saved_searches.button', 'Saved Searches')}
+        <Star className="h-4 w-4 mr-1 hidden sm:flex" />{' '}
+        {t('saved_searches.button', 'Saved Searches')}
       </Button>
       <ButtonModal
         open={open}
@@ -165,9 +167,9 @@ export function BookmarkStarButton(props: {
         onClick={() => setOpen(true)}
         color="gray-outline"
         // size={'xs'}
-        className={'rounded-xl bg-canvas-50'}
+        className={'rounded-xl bg-canvas-50 text-xs'}
       >
-        👥 {t('saved_people.button', 'Saved People')}
+        <Users className="h-4 w-4 mr-1 hidden sm:flex" /> {t('saved_people.button', 'Saved People')}
       </Button>
       <StarModal
         open={open}