Skip to content

SYSTEM Cited by 1 source

lucide-react

lucide-react (lucide.dev/guide/packages/lucide-react) is a community icon library exposing open-source SVG icons as individual React components. Fork of Feather Icons; now the community-maintained successor.

Why it shows up on this wiki

The default icon library v0 generates React components against. Weekly releases add and remove icons, which makes it a canonical instance of the LLM icon- hallucination failure mode: "the LLM will often reference icons that no longer exist or never existed."

(Source: sources/2026-01-08-vercel-how-we-made-v0-an-effective-coding-agent)

The v0 embedding-resolution mechanism

v0 wraps lucide-react imports with a five-step resolution pipeline inside LLM Suspense (verbatim from Vercel's disclosure):

  1. Embed every icon name in a vector database.
  2. Analyze actual exports from lucide-react at runtime.
  3. Pass through the correct icon when available.
  4. When the icon does not exist, run an embedding search to find the closest match.
  5. Rewrite the import during streaming.

Completes in <100 ms per substitution with no further model calls — pure embedding lookup.

Worked example: the LLM emits 

import { VercelLogo } from 'lucide-react'
(no such icon exists). Suspense rewrites to: 
import { Triangle as VercelLogo } from 'lucide-react'
— Triangle is the nearest real export under the embedding distance metric, aliased to the hallucinated name so the rest of the generated code compiles unchanged.

Why this is the canonical example

Three properties make lucide-react the paradigmatic icon-hallucination target:

  1. Churning namespace — weekly adds/removes mean the training cutoff is permanently stale.
  2. Large symbol space — thousands of icon names makes hallucination likely.
  3. Semantic neighbourhood — icon names like VercelLogo have close real neighbours (Triangle) in embedding space, so the nearest-match rewrite is plausible.

Seen in

Last updated · 476 distilled / 1,218 read