Full Screen Icon

Buttons

About

An animated full-screen toggle icon whose corner brackets expand outward on hover, for buttons that enter or exit fullscreen mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Full Screen Icon to your project and fits it to your theme.

Code

How Full Screen Icon is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FullScreenIcon } from "@/components/ui/hu-full-screen";

export default function Preview() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <button
        type="button"
        className="inline-flex items-center justify-center rounded-md border border-border p-3 text-foreground hover:bg-accent transition-colors"
        aria-label="Toggle fullscreen"
      >
        <FullScreenIcon size={28} />
      </button>
    </div>
  );
}