Documentation

Visit https://tabler-animated-docs.vercel.app/ to browse every icon and view the full documentation.

Getting Started

npm install tabler-animated

import { IconHeart } from 'tabler-animated';

const App = () => {
  return <IconHeart size={32} />;
};

Hovering the icon plays its animation automatically - no extra setup required.

Imperative control

Every icon also exposes a ref handle, so you can trigger the animation yourself (loop it, play it on mount, sync it to some other event, etc.):

import { useEffect, useRef } from 'react';
import { IconHeart, type IconHandle } from 'tabler-animated';

const App = () => {
  const iconRef = useRef<IconHandle>(null);

  useEffect(() => {
    iconRef.current?.startAnimation();
  }, []);

  return <IconHeart ref={iconRef} size={32} />;
};

Contributing

Contributions are always welcome. See CONTRIBUTING.md for how to report issues, set up the project locally, and add a new icon.