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 18f85d0..ddaf55a 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, X } 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}
@@ -52,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>