props-reference.mdx

title	Props Reference for Motive Animated Icon Components
description	Complete TypeScript props API for every Motive animated icon: size, color, strokeWidth, trigger, isActive, and other shared React component options.
icon	sliders

All animated icon components (<AnimatedBell />, <AnimatedHeart />, etc.) inherit the universal AnimatedIconProps interface.

Component Props

Icon width and height in pixels. Stroke thickness for the underlying vector paths. Stroke color string. Defaults to inheriting CSS text color (`currentColor`). Trigger mode strategy: * `"hover"`: Animates while pointer is hovering or element is focused. * `"click"`: Fires one-shot spring animation on click or Space/Enter key. * `"auto"`: Animates immediately on mount. * `"focus"`: Triggers specifically when element receives keyboard focus. When set to `true`, the animation loops infinitely while active. Bypasses internal trigger state to give parent component full control over animation state. Accessibility label passed to `aria-label` on the wrapper SVG element. Custom CSS class names applied to the outer container wrapper.

---

TypeScript Declaration

export interface AnimatedIconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  strokeWidth?: number;
  color?: string;
  trigger?: "hover" | "click" | "auto" | "focus";
  loop?: boolean;
  active?: boolean;
  ariaLabel?: string;
  className?: string;
}