Movie clapper

Available formats

• Lottie (.json)—Plays in React, Vue, iOS, Android, Flutter, and HTML with the lottie-web player.
• Rive (.riv)—GPU-accelerated with interactive hover and click state machines via @rive-app.
• SVG—Scalable vector for CSS and HTML — no rasterization at any size.
• PNG—Raster fallback for email templates and static image contexts.

Integration examples

// React — lottie-react
import Lottie from "lottie-react";
import movieClapperIcon from "./movie-clapper.json";

export default function App() {
  return <Lottie animationData={movieClapperIcon} loop />;
}

// React — @rive-app/react-canvas
import { useRive } from "@rive-app/react-canvas";

export default function App() {
  const { RiveComponent } = useRive({
    src: "/movie-clapper.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
  });
  return <RiveComponent style={{ width: 64, height: 64 }} />;
}

Frequently asked questions

How do I use the Movie clapper icon in React?

Install lottie-react (npm install lottie-react), download the Movie clapper .json file, then import and render it: <Lottie animationData={movieClapperIcon} loop />. The animation plays automatically and loops by default.

What formats is the Movie clapper icon available in?

The Movie clapper icon is available in Lottie (.json), Rive (.riv), SVG, PNG. Download any format from the export panel — you can also customize colors and speed before downloading.

Is the Movie clapper icon free to use?

Yes, the Movie clapper icon is free to use in personal and commercial projects under the Unicorn Icons license. No attribution required.