Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Flat Color Icons · FcClapperboard

Clapperboard icon

A free clapperboard icon from Flat Color Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/clapperboard.json

components/icons/flat-color-clapperboard.tsx

import * as React from "react";

/**
 * Clapperboard from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/clapperboard. Sized in em, colored by currentColor.
 */
export function FcClapperboardIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1"
      viewBox="0 0 48 48"
      enableBackground="new 0 0 48 48"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#3F51B5"
        d="M43.4,8.3L4,15l-0.3-2c-0.4-2.2,1.1-4.2,3.3-4.6l31.6-5.3c2.2-0.4,4.2,1.1,4.6,3.3L43.4,8.3z"
      />
      <path fill="#3F51B5" d="M40,41H8c-2.2,0-4-1.8-4-4V15h40v22C44,39.2,42.2,41,40,41z" />
      <g fill="#9FA8DA">
        <polygon points="18.8,6.4 23.7,11.7 27.7,11 22.7,5.7" />
        <polygon points="10.9,7.7 15.8,13 19.8,12.3 14.8,7.1" />
        <polygon points="26.7,5.1 31.6,10.3 35.5,9.7 30.6,4.4" />
        <polygon points="34.5,3.8 39.5,9 43.4,8.3 38.5,3.1" />
      </g>
      <circle fill="#9FA8DA" cx="7.5" cy="11.5" r="1.5" />
      <g fill="#9FA8DA">
        <polygon points="40,15 36,21 40,21 44,15" />
        <polygon points="32,15 28,21 32,21 36,15" />
        <polygon points="24,15 20,21 24,21 28,15" />
        <polygon points="16,15 12,21 16,21 20,15" />
        <polygon points="8,15 4,21 8,21 12,15" />
      </g>
    </svg>
  );
}

With react-icons

import { FcClapperboard } from "react-icons/fc";

export function Example() {
  return <FcClapperboard className="size-5" />;
}

clapperboard.svg

<svg
  version="1"
  viewBox="0 0 48 48"
  enable-background="new 0 0 48 48"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill="#3F51B5"
    d="M43.4,8.3L4,15l-0.3-2c-0.4-2.2,1.1-4.2,3.3-4.6l31.6-5.3c2.2-0.4,4.2,1.1,4.6,3.3L43.4,8.3z"
  />
  <path fill="#3F51B5" d="M40,41H8c-2.2,0-4-1.8-4-4V15h40v22C44,39.2,42.2,41,40,41z" />
  <g fill="#9FA8DA">
    <polygon points="18.8,6.4 23.7,11.7 27.7,11 22.7,5.7" />
    <polygon points="10.9,7.7 15.8,13 19.8,12.3 14.8,7.1" />
    <polygon points="26.7,5.1 31.6,10.3 35.5,9.7 30.6,4.4" />
    <polygon points="34.5,3.8 39.5,9 43.4,8.3 38.5,3.1" />
  </g>
  <circle fill="#9FA8DA" cx="7.5" cy="11.5" r="1.5" />
  <g fill="#9FA8DA">
    <polygon points="40,15 36,21 40,21 44,15" />
    <polygon points="32,15 28,21 32,21 36,15" />
    <polygon points="24,15 20,21 24,21 28,15" />
    <polygon points="16,15 12,21 16,21 20,15" />
    <polygon points="8,15 4,21 8,21 12,15" />
  </g>
</svg>

Attribution

"Clapperboard" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.

Clapperboard icon in other sets

Similar Flat Color Icons icons