Tailwind UI Pattern Registry for humans and agents

icon swap hover crossfade transition replace toggle icon button with hover state change nav link with arrow reveal on hover social icon with alternate on hover action button with state indicator need icon change on hover without JS want smooth crossfade between two icons need directional icon swap animation

Icon Swap

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/icon-swap.json
Format
Preview
Stage Background
Customize

Quick Start

<span class="icon-swap"><svg class="icon-swap-default">...</svg><svg class="icon-swap-hover">...</svg></span>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
972 bytes · 50 lines
Custom Properties
--swap-speed
Classes
.icon-swap.icon-swap-default.icon-swap-hover
icon swap hover crossfade transition replace toggle

Two icons stacked in the same container. On hover, the default slides up and fades while the replacement slides in from below. Uses translateY + opacity transitions for a smooth directional swap.

Arrow button

<a href="#" class="icon-swap inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/10">
  <svg class="icon-swap-default h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
  </svg>
  <svg class="icon-swap-hover h-5 w-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
  </svg>
</a>

Heart to filled heart

<button class="icon-swap h-10 w-10 rounded-full bg-rose-500/10" style="--swap-speed: 0.25s;">
  <svg class="icon-swap-default h-5 w-5 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
  </svg>
  <svg class="icon-swap-hover h-5 w-5 text-rose-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
  </svg>
  <span class="sr-only">Like</span>
</button>