# Icon in thumb

> Custom larger toggle with sun / moon icons that swap inside the thumb.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/switch-07).

- Page, with a live preview: https://shadcn.exchange/r/flx/switch-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/switch-07-light-50430ad0fa451b8f.png
- Registry item: https://ui.flexnative.com/r/switch-07.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/switch-07.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: `@base-ui/react`

## Files

### `registry/patterns/switch/switch-07.tsx`

```tsx
'use client'

import * as React from 'react'
import { MoonIcon, SunIcon } from 'lucide-react'
import { Switch as SwitchPrimitive } from '@base-ui/react/switch'

import { cn } from '@/lib/utils'

export function Switch07() {
  return (
    <SwitchPrimitive.Root
      defaultChecked
      aria-label="Toggle theme"
      className={cn(
        'group relative inline-flex h-8 w-14 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
        'data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80',
      )}
    >
      <SunIcon className="absolute left-1.5 size-3.5 text-amber-500 transition-opacity group-data-checked:opacity-0" />
      <MoonIcon className="text-background absolute right-1.5 size-3.5 opacity-0 transition-opacity group-data-checked:opacity-100" />
      <SwitchPrimitive.Thumb
        className={cn(
          'bg-background pointer-events-none flex size-6 items-center justify-center rounded-full shadow-sm ring-0 transition-transform',
          'data-checked:translate-x-7 data-unchecked:translate-x-1',
        )}
      >
        <SunIcon className="size-3.5 text-amber-500 group-data-checked:hidden" />
        <MoonIcon className="text-primary hidden size-3.5 group-data-checked:block" />
      </SwitchPrimitive.Thumb>
    </SwitchPrimitive.Root>
  )
}
```