Add Circle Icon

Buttons

About

An animated plus-in-circle icon that rotates and scales on hover, for add/create actions in toolbars and buttons.

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

Code

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

Usage.tsx

import { AddCircleIcon } from "@/components/ui/hu-add-circle";

export default function AddCircleIconDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center">
      <button
        type="button"
        aria-label="Add"
        className="inline-flex items-center justify-center rounded-full border border-border p-3 text-foreground transition-colors hover:bg-accent"
      >
        <AddCircleIcon size={28} />
      </button>
    </div>
  );
}