# With icons

> Leading icon beside each trigger label.

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

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

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/accordion-03.json
```

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

## Dependencies

- Registry items: `accordion`

## Files

### `registry/patterns/accordion/accordion-03.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import {
  CreditCardIcon,
  LifeBuoyIcon,
  SettingsIcon,
  ShieldIcon,
} from 'lucide-react'

const sections = [
  {
    value: 'account',
    icon: SettingsIcon,
    title: 'Account',
    body: 'Update your name, email, and profile photo from the account settings.',
  },
  {
    value: 'billing',
    icon: CreditCardIcon,
    title: 'Billing',
    body: 'Manage your payment method, view invoices, and change your plan.',
  },
  {
    value: 'security',
    icon: ShieldIcon,
    title: 'Security',
    body: 'Enable two-factor authentication and review active sessions.',
  },
  {
    value: 'support',
    icon: LifeBuoyIcon,
    title: 'Support',
    body: 'Reach our team any time — we typically reply within a few hours.',
  },
]

export function Accordion03() {
  return (
    <Accordion className="w-full max-w-md">
      {sections.map((section) => (
        <AccordionItem key={section.value} value={section.value}>
          <AccordionTrigger>
            <span className="flex items-center gap-2.5">
              <section.icon className="text-muted-foreground size-4" />
              {section.title}
            </span>
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            {section.body}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```