Sizes and colours any icon so it lines up with the text beside it.
import { Icon } from "@/fragments/ui";Source<Icon icon={Heart} />npx @usefragments/cli add iconWrites src/fragments/ui/components/Icon plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Steps tuned to the type scale, so icons never float off the baseline.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Star} size="xs" />
<Icon icon={Star} size="sm" />
<Icon icon={Star} size="md" />
<Icon icon={Star} size="lg" />
<Icon icon={Star} size="xl" />Tone states carry meaning — never use them for decoration.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Check} tone="success" />
<Icon icon={Warning} tone="warning" />
<Icon icon={Warning} tone="danger" />
<Icon icon={Info} tone="accent" />
</div>The text colour ladder, for glyphs that sit beside secondary or tertiary copy.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Heart} color="primary" />
<Icon icon={Heart} color="secondary" />
<Icon icon={Heart} color="tertiary" />
</div>Match the stroke to the text weight next to it.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Heart} weight="thin" />
<Icon icon={Heart} weight="light" />
<Icon icon={Heart} weight="regular" />
<Icon icon={Heart} weight="bold" />
<Icon icon={Heart} weight="fill" />iconProps passes anything the underlying icon package supports.
<Icon icon={Heart} iconProps={{ mirrored: true }} />Prop | Type | Default | Description |
|---|---|---|---|
style | object | Not set | — |
iconRequired | union | Not set | Icon component to render |
size | enumxssmmdlgxl | md | Icon size |
weight | stringthinlightregularboldfillduotone | regular | Optional icon style/weight hint (forwarded when supported by the icon component) |
tone | enumaccentinfosuccesswarningdanger | Not set | Semantic colour. Reserve success, warning and danger for real state; omit to inherit currentColor |
color | enumprimarysecondarytertiary | Not set | Text-hierarchy colour, the same axis as Text color. tone wins when both are set |
iconProps | object | Not set | Additional props forwarded to the underlying icon component (typed from the icon prop in TypeScript) |