# Icon

> Visual glyphs for actions and status indicators.

**URL:** https://inference.sh/docs/agents/widgets/icon
**Last updated:** 2026-09-18

---

Visual glyphs for actions and status indicators.

## Preview

```
🔍 ⭐ ✓ ⚡
```

## Usage

```go
node := models.WidgetNode{
    Type: models.WidgetNodeTypeIcon,
    Name: "search",
    Size: "md",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"icon"` | Node type | required |
| `name` | `string` | Name of the icon to display | required |
| `size` | `string` | Size token: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `"md"` |
| `color` | `string \| ThemeColor` | Icon color | `"prose"` |

### Available Icons

| Category | Icons |
|----------|-------|
| **Actions** | `check`, `plus`, `search`, `reload`, `play`, `write` |
| **Status** | `info`, `check-circle`, `check-circle-filled`, `empty-circle`, `dot` |
| **Navigation** | `chevron-left`, `chevron-right`, `external-link` |
| **Objects** | `document`, `book-open`, `calendar`, `mail`, `globe` |
| **UI** | `dots-horizontal`, `dots-vertical`, `settings-slider` |
| **Misc** | `sparkle`, `sparkle-double`, `lightbulb`, `bolt`, `star`, `star-filled` |

### Size Reference

| Size | Pixels |
|------|--------|
| `xs` | 12px |
| `sm` | 16px |
| `md` | 20px |
| `lg` | 24px |
| `xl` | 28px |
| `2xl` | 32px |

## Examples

### Basic Icon

```go
{Type: models.WidgetNodeTypeIcon, Name: "check", Color: "success"}
```

### Icon with Text

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeIcon, Name: "star-filled", Color: "warning"},
        {Type: models.WidgetNodeTypeText, Value: "Featured"},
    },
}
```

### Status Indicator

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeIcon, Name: "check-circle-filled", Color: "success", Size: "lg"},
        {Type: models.WidgetNodeTypeCol, Gap: 0, Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeText, Value: "Payment Complete", Variant: "title"},
            {Type: models.WidgetNodeTypeText, Value: "Your order has been processed", Variant: "muted"},
        }},
    },
}
```

### Button with Icon

Note: For buttons, use the `iconStart` or `iconEnd` props instead:

```go
{
    Type:      models.WidgetNodeTypeButton,
    Label:     "Search",
    IconStart: "search",
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "icon",
  name: "sparkle",
  size: "lg",
  color: "primary",
}
```

## Best Practices

1. **Use semantic icons** - Match icon meaning to content
2. **Pair with text** - Icons alone can be ambiguous
3. **Consistent sizing** - Use same size for related icons
4. **Use color meaningfully** - Success=green, Warning=yellow, etc.