# Animated icon weight — Lottie where a glyph is expected

Learned 2026-08-27 from Resend's sidebar navigation.

- **The DOM tell**: `<svg style="transform: translate3d(0,0,0);
  content-visibility: visible">` on a `0 0 400 400` viewBox, holding a mask
  path on a 1080-unit artboard and paths at fractional bezier coordinates. A
  tag census heavy in `<g>`, `<clipPath>`, `<filter>` and `<feColorMatrix>`
  confirms it — those are an After Effects export, not hand-drawn icons.
- **The motion is stroke weight.** The same path appears twice at
  `stroke-width:42` and `stroke-width:70` on the 400 grid, which is the icon
  thickening on interaction. The wrapper is `text-gray-11 opacity-80 invert
  dark:invert-0`, so the source art is white and the icons sit at 80%.
- **No CSS replica reaches it.** The honest substitute is a 1.5–2px stroked
  icon that thickens on hover, declared as a substitute. Silently shipping a
  static icon set is the failure mode 6 trade — a difference that reads as an
  improvement and is still a difference.
