Skip to content

Add Cute, Accessible Icons to Achievement Badges (light/dark) #23

@Gourangi4

Description

@Gourangi4

Summary

Show a small, consistent icon for each Achievement (First Challenge, Design Master, Code Warrior, Community Helper, Streak Master). Icons must work in light & dark themes and remain accessible.

Why

Icons make achievements clearer and more delightful without changing text.
Scope

Create a tiny BadgeIcon map/component (badge key → inline SVG).

Place the icon before the title with 8px gap.

Icons should use currentColor so they adapt to theme automatically.

SVGs marked aria-hidden="true"; the badge text stays readable.

Icon Suggestions

First Challenge → medal 🥇

Design Master → palette 🎨

Code Warrior → angle-brackets/ swords ⚔️

Community Helper → chat bubble 💬

Streak Master → flame 🔥

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions