Skip to content
Frontend Nav
中文 (Language)

Recommend a site

Leave a name and a URL — submitting opens the recommendation page on GitHub to finish.

Shape-aware icon morphing - sun flows into moon, full Lucide support, 80KB engine

Content updated · 2026-10-30

What is it · 它是什么

What is shapcn?

shapcn is a shape-aware icon morphing tool: change an icon's name and any icon smoothly flows into another (sun to moon, menu to close). The trick is shape-aware binding - parts of each icon get a hierarchy so pieces move in order instead of every point sliding at once. Lucide, Tabler, Phosphor and other major icon libraries are supported, with custom icons possible; the engine is about 80KB gzipped (170KB including all 1,858 Lucide icons). MIT licensed, a perfect pair with the Lucide icon library in this directory.

How to use · 怎么用

How to use shapcn

  1. Try morphing two icons in the site playground.
  2. Install via script tag, npm or the shadcn CLI.
  3. Shines on state changes: theme toggle, menu open/close.

Key features · 核心特点

Key features of shapcn

  • Shape-aware morphing, not crossfading
  • Lucide/Tabler/Phosphor support
  • About 80KB engine, lightweight
  • MIT licensed, custom icons supported

Related sites

A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern