Visual glyphs for actions and status indicators.
Preview
code
1�� ⭐ ✓ ⚡Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeIcon,3 Name: "search",4 Size: "md",5}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
1{Type: models.WidgetNodeTypeIcon, Name: "check", Color: "success"}Icon with Text
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeIcon, Name: "star-filled", Color: "warning"},6 {Type: models.WidgetNodeTypeText, Value: "Featured"},7 },8}Status Indicator
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeIcon, Name: "check-circle-filled", Color: "success", Size: "lg"},6 {Type: models.WidgetNodeTypeCol, Gap: 0, Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeText, Value: "Payment Complete", Variant: "title"},8 {Type: models.WidgetNodeTypeText, Value: "Your order has been processed", Variant: "muted"},9 }},10 },11}Button with Icon
Note: For buttons, use the iconStart or iconEnd props instead:
go
1{2 Type: models.WidgetNodeTypeButton,3 Label: "Search",4 IconStart: "search",5}TypeScript
typescript
1const node: WidgetNode = {2 type: "icon",3 name: "sparkle",4 size: "lg",5 color: "primary",6}Best Practices
- Use semantic icons - Match icon meaning to content
- Pair with text - Icons alone can be ambiguous
- Consistent sizing - Use same size for related icons
- Use color meaningfully - Success=green, Warning=yellow, etc.