# Label: Icon

> Icons inside a label are sized and muted to sit next to the text.

Example: https://hextaui.com/docs/label/examples/icon
Component docs: https://hextaui.com/docs/label.md

## Add this example

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

This adds `components/examples/label/icon.tsx` with the Label component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/label/icon.tsx"
import { IconLock } from "@tabler/icons-react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="label-icon-key">
        <IconLock aria-hidden="true" />
        API key
      </Label>
      <Input id="label-icon-key" defaultValue="sk_live_51H…" readOnly />
    </div>
  )
}
```

## Props in this example

### Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` | `string` | – | The id of the control. Leave it out when the label wraps the control. |

## More Label examples

- [Follows its control](https://hextaui.com/docs/label/examples/states.md)
- [Required and optional](https://hextaui.com/docs/label/examples/indicator.md)
- [Checkbox](https://hextaui.com/docs/label/examples/checkbox.md)
- [Long content](https://hextaui.com/docs/label/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/label/examples/rtl.md)