Skip to content

refactor(ui): replace emoji icons with lucide-react icon libraryΒ #176

@mpiton

Description

@mpiton

Refactor Request

Problem

The app uses Unicode emoji characters (πŸ‘€ ❌ βœ…) as icons. Emoji rendering varies significantly across operating systems, browsers, and WebView versions, leading to inconsistent visual appearance.

Current Usage

  • Review request indicators: πŸ‘€
  • CI failure: ❌
  • PR approved: βœ…
  • Various status indicators in notifications and activity feed

Proposed Solution

Migrate to lucide-react β€” a lightweight, tree-shakeable icon library with consistent SVG rendering:

npm install lucide-react

Replacement mapping:

Current Lucide equivalent
πŸ‘€ <Eye />
❌ <XCircle /> or <CircleX />
βœ… <CheckCircle /> or <CircleCheck />

Benefits

  • Consistent rendering across all platforms
  • Customizable size, color, stroke width
  • Tree-shakeable (only bundled icons are included)
  • ~0.5KB per icon

Files to Modify

  • Components using emoji icons (grep for emoji patterns)
  • src/components/Toast/Toast.tsx β€” notification icons
  • Various card and status components

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions