[#DEV-2619] Migrate to use Lucide Icons

Kamile Liucija Vainiuterequested to merge
feat/DEV-2619-migrate-to-use-lucide into main

Summary

  • Migrate 140 custom SVG icons from ui-assets to lucide-react across ~460 consumer files in the monorepo, reducing custom icon maintenance burden and standardizing on a single icon library
  • Delete 140 icon source files from packages/ui-assets/src/icons/components/, shrinking the barrel export from ~175 entries to 33
  • Fix broken JSX references left by incomplete prior migrations (e.g. imports changed but JSX component names not updated)
  • Improve the Storybook Icons page with search, categorization, click-to-copy, and a callout directing developers to use Lucide for standard icons

Details

Icon migration

All general-purpose icons (arrows, checks, close, edit, settings, trash, etc.) have been replaced with their lucide-react equivalents. Imports were updated from "ui" / "ui-assets" to "lucide-react" in every consumer across all packages and websites.

Where a lucide icon name clashed with a local component (e.g. CreditCard icon vs CreditCard component in payments), the icon was aliased: import { CreditCard as CreditCardIcon } from "lucide-react".

Remaining custom icons (33)

Icons that are not available in Lucide and remain in ui-assets:

  • Animated/complex: AnimatedChevronIcon, Spinner
  • Brand/social: BlueskyIcon, FacebookIcon, GitlabIcon, InstagramIcon, LinkedInIcon, RedNoteIcon, TikTokIcon, TwitterIcon, WeChatIcon, YoutubeIcon, ZoomIcon, LinearIcon
  • Custom domain-specific: DiversityIcon, EmojiFlags, HeartFilledIcon, MedalIcon, SimpleMedalIcon, MysteriousManIcon, MysteriousPersonIcon, MysteriousWomanIcon, NotificationsIcon, NotificationsUnreadIcon, PeopleInHeartIcon, PersonPlayIcon, PersonRemoveIcon, QuoteIcon, RegistryIcon, StadiumIcon, TicketFilledIcon, VillageIcon, WireTransferIcon

Storybook

The Assets/Icons story was redesigned:

  • Search input to filter icons by name
  • Icons grouped into "Custom" and "Social & Integrations" categories
  • Click-to-copy ( copied to clipboard)
  • Info banner directing developers to https://lucide.dev/icons for all standard icons

Merge request reports