HowItWorks - Dashboard frontend revamp #451
Description
Is your feature request related to a problem? Please describe.
The How It Works section currently uses custom SVG icon components imported from utils/Icons. These icons are only used in this section and add additional maintenance surface and bundle weight, despite us already depending on well-optimized icon libraries elsewhere in the ecosystem.
Describe the solution you’d like
Replace the custom icon components with equivalent icons from a standard icon library such as lucide-react or react-icons. This would remove the need for custom SVG components while keeping the UI visually consistent.
Describe alternatives you’ve considered
- Keeping the current custom SVG icons
- Further optimizing or tree-shaking the custom icons
However, both alternatives still require maintaining a custom icon set for limited usage, which is unnecessary given existing icon libraries.
Additional context
- Lucide / react-icons provide tree-shakable, lightweight icons
- Reduces custom code in utils/Icons
- Improves consistency with other UI elements
- Reduces frontend bundle and Docker image size
- Makes future icon swaps or design tweaks easier
Note: Do make sure the context and icons should be similar