Icon
A wrapper around Lucide icons with consistent sizing and color tokens.
Installation
tsx
import { Icon } from "madagent";Default
Sizes
Colors
With Label (Accessible)
| Prop | Type | Default | Description |
|---|---|---|---|
icon* | LucideIcon | - | Lucide icon component to render |
size | "xs""sm""md""lg""xl" | "md" | Icon size |
color | "current""primary""secondary""success""warning""error""muted" | "current" | Icon color |
label | string | - | Accessible label. When provided, icon gets role=img |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ display: "flex", gap: 16, justifyContent: "center" }}>
<Icon icon={Star} size="lg" color="primary" label="نجم" />
<Icon icon={Heart} size="lg" color="error" label="قلب" />
<Icon icon={Share2} size="lg" color="secondary" label="مشاركة" />
</div>