From 6594bb101dd124a54e73dc621b1dcec06ea9ea5a Mon Sep 17 00:00:00 2001
From: laurastephaniee <331198591+laurastephaniee@users.noreply.github.com>
Date: Thu, 24 Sep 2026 13:12:23 +0100
Subject: [PATCH 1/2] fix(search): use lucide Search icon instead of emoji in
 SearchBar

Replace the unicode magnifying-glass emoji with lucide-react's Search
icon, matching the icon set used by NavBar, Breadcrumb and Toast. The
icon is aria-hidden since the input's placeholder already labels it.
---
 src/components/SearchBar.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 18f85d0..b139697 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
+import { Search } from 'lucide-react';
 import { useDebounce } from '@/hooks/useDebounce';
 
 interface SearchBarProps {
@@ -35,9 +36,11 @@ export function SearchBar({
 
   return (
     <div className={`relative ${className ?? ''}`}>
-      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
-        🔍
-      </span>
+      <Search
+        size={16}
+        aria-hidden="true"
+        className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+      />
       <input
         type="text"
         value={query}

From 90cc5072953cd68991e3f848688614d575fbfe01 Mon Sep 17 00:00:00 2001
From: laurastephaniee <331198591+laurastephaniee@users.noreply.github.com>
Date: Thu, 24 Sep 2026 13:12:48 +0100
Subject: [PATCH 2/2] fix(search): use lucide X icon for SearchBar clear
 button, add tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the unicode ✕ clear glyph for lucide-react's X (same as Toast),
keeping the aria-label. Add tests asserting the Search and X icons
render as lucide SVGs and the emoji/glyph are gone.
---
 src/__tests__/SearchBar.test.tsx | 13 ++++++++++++-
 src/components/SearchBar.tsx     |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/SearchBar.test.tsx b/src/__tests__/SearchBar.test.tsx
index 5e2d686..a64bfe1 100644
--- a/src/__tests__/SearchBar.test.tsx
+++ b/src/__tests__/SearchBar.test.tsx
@@ -29,6 +29,13 @@ describe('SearchBar', () => {
     expect(html).toContain('type="text"');
   });
 
+  it('renders the lucide Search icon instead of an emoji (#651)', () => {
+    const html = renderToStaticMarkup(<SearchBar onSearch={vi.fn()} />);
+    expect(html).toContain('lucide-search');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).not.toContain('🔍');
+  });
+
   it('does not render clear button when query is empty', () => {
     const onSearch = vi.fn();
     const html = renderToStaticMarkup(<SearchBar onSearch={onSearch} />);
@@ -91,7 +98,11 @@ describe('SearchBar debouncing', () => {
     });
     onSearch.mockClear();
 
-    fireEvent.click(screen.getByLabelText('Clear search'));
+    const clear = screen.getByLabelText('Clear search');
+    expect(clear.querySelector('svg.lucide-x')).not.toBeNull();
+    expect(clear.textContent).not.toContain('✕');
+
+    fireEvent.click(clear);
     expect(onSearch).toHaveBeenCalledWith('');
     expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('');
   });
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index b139697..ddaf55a 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { Search } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 import { useDebounce } from '@/hooks/useDebounce';
 
 interface SearchBarProps {
@@ -55,10 +55,10 @@ export function SearchBar({
             setQuery('');
             onSearch('');
           }}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 hover:text-white transition-colors"
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
           aria-label="Clear search"
         >
-          ✕
+          <X size={14} aria-hidden="true" />
         </button>
       )}
     </div>