thumbs-up

Animated

Usage

Animated icons ship from @cohere-ai/waypoint-icons. Use AnimatedIcon, Icon with animated, or the Animated.* namespace (e.g. Animated.ThumbsUpIcon). The set of available animated icons is published with the package; consult animatedIconMap for the full list.

Animated namespace

import { Animated } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => (
  <Animated.ThumbsUpIcon size="lg" playOnMount />
);

Play on mount

import { AnimatedIcon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => (
  <AnimatedIcon name="thumbs-up" playOnMount size="lg" />
);

Playback mode

Use playback="once" or playback="none" to control auto-play. duration / animationDuration set animation length in seconds.

import { AnimatedIcon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => (
  <AnimatedIcon name="thumbs-up" playback="once" size="lg" duration={1.2} />
);

Icon with animated prop

Icon with animated forwards playOnHover, playTrigger, playback, and animationDuration.

import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => (
  <Icon name="thumbs-up" animated size="lg" animationDuration={1.2} />
);

With playback controls:

import { useState } from 'react';
import { Icon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  const [trigger, setTrigger] = useState(0);
  return (
    <>
      <Icon
        name="thumbs-up"
        animated
        size="lg"
        animationDuration={1.2}
        playOnHover
        playTrigger={trigger}
        playback="once"
      />
      <button onClick={() => setTrigger((t) => t + 1)}>Replay</button>
    </>
  );
};

Replay and play on hover/focus

playTrigger — increment to replay on demand. playOnHover runs the animation once when the pointer enters (mouse or focus).

import { AnimatedIcon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  const [trigger, setTrigger] = useState(0);
  return (
    <>
      <AnimatedIcon name="thumbs-up" playTrigger={trigger} playOnHover size="lg" />
      <button onClick={() => setTrigger((t) => t + 1)}>Replay</button>
    </>
  );
};

Using a ref

Pass a ref and call startAnimation() to trigger the animation programmatically.

import { useRef } from 'react';
import { AnimatedIcon } from '@cohere-ai/waypoint-icons';
 
const MyComponent = () => {
  const ref = useRef(null);
  return (
    <>
      <AnimatedIcon ref={ref} name="thumbs-up" size="lg" />
      <button onClick={() => ref.current?.startAnimation?.()}>Play</button>
    </>
  );
};

Props (AnimatedIcon)

Prop	Type	Default	Description
name	string	—	Icon name (must exist in animated set)
playOnMount	boolean	false	Play animation once on mount
playOnHover	boolean	false	Play once when pointer enters (mouse or focus)
playTrigger	number	—	Increment to trigger animation again
playback	'once' \| 'none'	—	When 'once', run animation on mount; when 'none', no auto-play
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number	md	Icon size (keyword or pixel number)
duration	number	1	Animation duration in seconds
animationDuration	number	—	Alias for duration
className	string	—	Additional CSS classes

thumbs-down

AnimateIcons (Lucide)

Animated icons are built in the spirit of AnimateIcons with CSS keyframes. More Lucide animations at animateicons.in.

Visit AnimateIcons