Replace Emojis with Consistent Icon Set for Better UI Visibility and User Experience #548
Description
Prerequisites
- I have searched existing issues to ensure this feature hasn't been requested before
- I have read the project documentation and contribution guidelines
🎯 Problem Statement
Currently, the UI uses emojis (🧘, 💧, 🎮, etc.) as icons for different sections such as Yoga & Meditation, Water Tracking, and Mental Wellness Games.
While emojis are simple and colorful, they can appear inconsistent across devices, have low visibility on some screens, and reduce the professional look of the interface.
This affects the overall user experience and visual coherence — especially for accessibility and branding consistency.
💡 Proposed Solution
🔄 Alternatives Considered
Replace the current emojis with consistent, high-quality vector icons or logos (e.g., SVGs from libraries like Lucide, Feather, or Material Icons).
Suggested improvements:
- Use a single icon style (outline/filled) across all modules.
- Ensure icons scale well for all resolutions and themes (light/dark mode).
- Include subtle hover animations or color highlights to enhance interactivity.
- Maintain accessibility by including alt text and ARIA labels.
- This change would make the dashboard more polished, readable, and brand-aligned.
📊 Priority Level
Medium - Would improve workflow
🎭 Use Cases
Use Cases
- Users navigating the wellness dashboard will have a clearer understanding of each feature through recognizable icons.
- Improves visual appeal and consistency across browsers and operating systems.
- Helps designers maintain brand uniformity in future updates.
Example:
A yoga icon (lotus pose) for “Yoga & Meditation” → instantly communicates purpose better than 🧘.
📎 Additional Context
No response
🤝 Contribution
- I'm willing to submit a pull request for this feature
- I'm available to help with testing
- I can provide additional feedback during development