# Collapsible: Custom icon

> Children of `<CollapsibleTriggerIcon />` replace the chevron. Style the open state with `group-data-panel-open/collapsible-trigger`.

Example: https://hextaui.com/docs/collapsible/examples/custom-icon
Component docs: https://hextaui.com/docs/collapsible.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/collapsible-custom-icon.json
```

This adds `components/examples/collapsible/custom-icon.tsx` with the Collapsible component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/collapsible/custom-icon.tsx"
import { IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleCustomIcon() {
  return (
    <Collapsible className="flex w-full max-w-sm flex-col gap-2">
      <CollapsibleTrigger
        render={<Button variant="ghost" />}
        className="self-start"
      >
        <CollapsibleTriggerIcon data-icon="inline-start">
          <IconPlus className="transition-transform duration-200 ease-out-cubic group-data-panel-open/collapsible-trigger:rotate-45 motion-reduce:transition-none" />
        </CollapsibleTriggerIcon>
        Add a note
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p className="ps-3 text-sm text-muted-foreground">
          Notes are only visible to you.
        </p>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

## Props in this example

### CollapsibleTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` | Usually a Button. |

## More Collapsible examples

- [Open by default](https://hextaui.com/docs/collapsible/examples/open-by-default.md)
- [Show more](https://hextaui.com/docs/collapsible/examples/show-more.md)
- [Controlled](https://hextaui.com/docs/collapsible/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/collapsible/examples/disabled.md)
- [File tree](https://hextaui.com/docs/collapsible/examples/file-tree.md)
- [Inside a card](https://hextaui.com/docs/collapsible/examples/card.md)
- [Unmounted when closed](https://hextaui.com/docs/collapsible/examples/unmounted.md)
- [Long content](https://hextaui.com/docs/collapsible/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/collapsible/examples/rtl.md)