chore: Organize SVG icons into a centralized component library

[AlAfiz]

Description

Right now, we are pasting raw <svg> tags directly into our React components, cluttering the code and making icons hard to reuse.
We need to create a dedicated folder for icons and export them as clean React components.
This allows us to change an icon once and have it update everywhere across the entire app.
It massively improves developer experience and code readability.

Requirements

• Create a components/icons/ directory.
• Move at least 3 raw SVGs (e.g., Wallet, Swap Arrows, Settings) into their own files (e.g., WalletIcon.tsx).
• Ensure the SVGs accept standard className props so we can size/color them with Tailwind.
• Replace the raw SVGs in the main UI with these new imported components.