# Theme Toggle Icon 1 - Icon toggle 1

> Theme toggle icon button with outline variant.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/theme-toggle-theme-toggle-icon-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/theme-toggle-theme-toggle-icon-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/theme-toggle-theme-toggle-icon-1-light-3adb4ec513c9dbf0.png
- Registry item: https://shadcnblocks.com/r/theme-toggle-theme-toggle-icon-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/theme-toggle-theme-toggle-icon-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`, `lucide-react`
- Registry items: `button`

## Files

### `example/theme-toggle/theme-toggle-icon-1.tsx`

```tsx
"use client";

import { ThemeToggle } from "@/components/shadcnblocks/theme-toggle";

export const title = "Icon toggle 1";

const Example = () => <ThemeToggle variant="outline" size="icon" />;

export default Example;
```

### `components/shadcnblocks/theme-toggle.tsx`

```tsx
"use client";

import { Moon, Sun } from "lucide-react";
import * as React from "react";
import { cn } from "cn";

import { buttonVariants } from "@/components/ui/button";
type ThemeToggleVariant = "default" | "outline" | "ghost";
type ThemeToggleSize = "default" | "icon";

export interface ThemeToggleProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ThemeToggleVariant;
  size?: ThemeToggleSize;
}

export const ThemeToggle = ({
  variant = "outline",
  size = "icon",
  className,
  ...props
}: ThemeToggleProps) => {
  const [dark, setDark] = React.useState(false);

  return (
    <button
      type="button"
      onClick={() => setDark((prev) => !prev)}
      className={cn(buttonVariants({ variant, size }), className)}
      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
      {...props}
    >
      {dark ? <Sun className="size-4" /> : <Moon className="size-4" />}
      {size === "default" && (
        <span>{dark ? "Light mode" : "Dark mode"}</span>
      )}
    </button>
  );
};
```