---
name: lucide-react icon name collisions
description: lucide-react exports icons whose names collide with UI components and React 19 built-ins, causing silent JSX type errors
---

When importing from `lucide-react`, some icon names collide with other symbols and the wrong one silently wins, producing confusing JSX prop type errors (e.g. "variant does not exist on LucideProps" or "className does not exist on ActivityProps").

**Why:** `lucide-react` exports `Badge` (collides with shadcn/ui `Badge`) and `Activity` (collides with React 19's built-in `Activity` component). If `Badge`/`Activity` is imported from `lucide-react` alongside, or the UI component is NOT imported, TS resolves the JSX tag to the wrong type. `<Badge variant=...>` then fails because the lucide icon has no `variant`, and `<Activity className=...>` fails against React's `ActivityProps`.

**How to apply:** Import `Badge` from `@/components/ui/badge`, never from `lucide-react`. Import `Activity` from `lucide-react` explicitly (not from `react`). When a JSX element reports props missing that clearly belong to a different component, check the import source for a name collision first.