Accordion: Leading icons

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

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>
  )
}

Add this example

This adds the example as components/examples/accordion/leading-icons.tsx, together with the Accordion component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/accordion-leading-icons.json

To add only the component, follow the Accordion installation.

Props in this example

The Accordion props this example sets, from the API reference.

Accordion

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

AccordionItem

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

AccordionTrigger

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

Every prop is in the Accordion API reference.

More Accordion examples

See them all, with keyboard support and accessibility notes, on the Accordion page.