Sizes any icon onto the glyph ladder and gives it one ink.
<Icon icon={Heart} />pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
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" />One ink axis: the quiet text inks for glyphs beside secondary copy, the status inks for real state.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Heart} tone="secondary" />
<Icon icon={Heart} tone="tertiary" />
<Icon icon={Check} tone="success" />
<Icon icon={Warning} tone="warning" />
<Icon icon={Warning} tone="danger" />Regular by default; bold beside strong text; fill for a filled state.
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<Icon icon={Heart} weight="regular" />
<Icon icon={Heart} weight="bold" />
<Icon icon={Heart} weight="fill" />
</div>Prop | Type | Default | Description |
|---|---|---|---|
iconRequired | AnyIconComponent | Not set | Icon component to render |
size | IconSize | undefinedxssmmdlgxl | md | A step on the glyph ladder: xs 12, sm 14, md 16, lg 18, xl 24 |
tone | IconTone | undefinedinfowarningdangeraccentsuccesssecondarytertiary | Not set | The glyph ink: secondary and tertiary follow the text ladder, accent is the accent ink, the status inks mark real state only. Omit to inherit currentColor |
weight | IconWeight | undefinedfillboldregular | regular | The glyph weight, forwarded to icon components that take one |
style | CSSProperties | undefined | Not set | — |