Skip to content

Migrate: All Icons from Flowbite to Lucide #123

@dokterbob

Description

@dokterbob

Objective

Replace all Flowbite icons with Lucide icons throughout the application.

Icon Usage Locations

  • Layout navigation
  • Chat components
  • Action buttons
  • Landing page
  • Language switcher
  • Theme toggle

Complete Icon Migration Map

Component Flowbite Icon Lucide Icon
Sign out ArrowLeftToBracketOutline LogOut
App logo MessagesOutline MessageSquare
User menu UserOutline User
Language GlobeOutline Globe
Edit PenOutline PenLine
Error ExclamationCircleOutline AlertCircle
Regenerate ArrowsRepeatOutline RefreshCw
Retry RefreshOutline RotateCw
Tools ToolsOutline Wrench
Success CheckCircleOutline CheckCircle
Pending ClockOutline Clock
Expand AngleRightOutline ChevronRight
CTA Arrow ArrowRightOutline ArrowRight
Like ThumbsUpOutline ThumbsUp
Dislike ThumbsDownOutline ThumbsDown
Send PaperPlaneSolid Send
Video VideoCameraSolid Video
Light mode SunSolid Sun
Dark mode MoonSolid Moon
Copy ClipboardCleanSolid Clipboard
Check CheckOutline Check

Tasks

  • Update all icon imports in each component
  • Adjust icon sizes (Lucide uses different sizing)
  • Update icon class names and styling
  • Test all icons in light/dark modes
  • Verify icon alignment and spacing
  • Remove flowbite-svelte-icons package

Size Mapping

  • Flowbite size="xs" → Lucide class="h-3 w-3"
  • Flowbite size="sm" → Lucide class="h-4 w-4"
  • Flowbite size="md" → Lucide class="h-5 w-5"

Acceptance Criteria

  • All icons display correctly
  • Consistent sizing across app
  • No missing icons
  • Icons align properly in buttons/menus

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions