refactor: replace emoji-based password visibility toggles with SVG icons using next/image components.

src/components/settings/PasswordSecurityForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import { TwoFactorSettings } from './TwoFactorSettings';
 import api from '@/services/api';
 
@@ -146,7 +147,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('current')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.current ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.current ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.current ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
           </div>
@@ -169,7 +175,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('new')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.new ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.new ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.new ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
             <p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
@@ -195,7 +206,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('confirm')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.confirm ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.confirm ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.confirm ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
           </div>