# Accordion: Leading icons

> Icons before the label are sized and aligned for you. `icon={null}` removes the chevron.

Example: https://hextaui.com/docs/accordion/examples/leading-icons
Component docs: https://hextaui.com/docs/accordion.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/accordion-leading-icons.json
```

This adds `components/examples/accordion/leading-icons.tsx` with the Accordion component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/accordion/leading-icons.tsx"
import { IconLock, IconUser } from "@tabler/icons-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function AccordionLeadingIcons() {
  return (
    <Accordion variant="outline" className="w-full max-w-md">
      <AccordionItem value="account">
        <AccordionTrigger icon={null}>
          <IconUser />
          Account
        </AccordionTrigger>
        <AccordionContent>Name, email and avatar.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="security">
        <AccordionTrigger icon={null}>
          <IconLock />
          Security
        </AccordionTrigger>
        <AccordionContent>Password and two-factor settings.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

## Props in this example

### Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "separated" \| "ghost"` | `"default"` |  |

### AccordionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – | Generated automatically when omitted. |

### AccordionTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode \| null` | `<IconChevronDown />` | null removes the icon. |

## More Accordion examples

- [Outline](https://hextaui.com/docs/accordion/examples/outline.md)
- [Separated](https://hextaui.com/docs/accordion/examples/separated.md)
- [Ghost](https://hextaui.com/docs/accordion/examples/ghost.md)
- [Multiple](https://hextaui.com/docs/accordion/examples/multiple.md)
- [Disabled](https://hextaui.com/docs/accordion/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/accordion/examples/controlled.md)
- [Custom icon](https://hextaui.com/docs/accordion/examples/custom-icon.md)
- [Long content](https://hextaui.com/docs/accordion/examples/long-content.md)
- [Nested](https://hextaui.com/docs/accordion/examples/nested.md)
- [Right to left](https://hextaui.com/docs/accordion/examples/rtl.md)