# Icon

A decorative glyph slot that renders an SVG icon, sized and tinted from its container.

## Installation

```tsx
import { Icon } from "@makeplane/propel/components/icon";
```
## Usage

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { AiStar1Outline } from "@makeplane/propel/icons";

export default function BasicDemo() {
  return <Icon icon={AiStar1Outline} size="md" />;
}
```
## Examples

### Tints

The `tint` axis colors the glyph. `inherit` (the default) takes `currentColor` from the container; the semantic tints override it. `placeholder` is the input-adornment tint — muted at rest, brightening when the enclosing control is focused — while `muted` is its plain static form.

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import {
  AlertCircleOutline,
  FolderOutline,
  HashOutline,
  SearchOutline,
  UserAltOutline,
  MembersOutline,
} from "@makeplane/propel/icons";

export default function TintsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={FolderOutline} tint="inherit" />
      <Icon icon={MembersOutline} tint="secondary" />
      <Icon icon={HashOutline} tint="tertiary" />
      <Icon icon={SearchOutline} tint="placeholder" />
      <Icon icon={UserAltOutline} tint="muted" />
      <Icon icon={AlertCircleOutline} tint="danger" />
    </div>
  );
}
```

### Sizes

`size` pins the glyph to a ladder rung: `xs` and `sm` 14 px, `md`, `lg` and `xl` 16 px, `2xl` 20 px. It defaults to `inherit`, which takes the
size from the surrounding control's `--node-size` — that is what you want almost everywhere,
since every sized component already sets it. Reach for an explicit step only outside such a
container.

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { AiStar1Outline } from "@makeplane/propel/icons";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Icon icon={AiStar1Outline} size="sm" />
      <Icon icon={AiStar1Outline} size="md" />
    </div>
  );
}
```
## API Reference

### Icon

Public decorative icon slot. Pass the element this creates into components with icon slots
(`startIcon`, `endIcon`, or `icon`) so those components render it directly.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` (required) | `IconSource` | — | SVG component or node rendered inside the shared icon slot, e.g. `icon={Plus}`. |
| `tint` | `"inherit" \| "danger" \| "placeholder" \| "muted" \| "secondary" \| "tertiary"` | — |  |
| `size` | `"inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — |  |