IconText

An inert glyph + copy pair. The content counterpart of Button (action), Label (status) and Link (navigation): it has no state and no interaction — just an icon beside a line of text, aligned and spaced by tokens, with typography and color cascading to both parts.

When to use

✅ Use when…	🚫 Avoid when…
Metadata rows ("updated 2 min ago"), feature lists, empty-state lines, menu rows — any copy that carries a glyph. `as="li"` for icon bullet lists.	It triggers something. Use `Button`, `IconButton` or `Link`. It announces a state with a chip. Use `Label`. It is a title. Use `Text` with an inline `Icon`.

Basic

Updated 2 min ago

Two-factor enabledSettings

<IconText icon={<Icon icon={clock} />} text="Updated 2 min ago" color="ink.secondary" fontSize="micro" />
<IconText icon={<Icon icon={check} />} text="Two-factor enabled" color="success" />
<IconText icon={<Icon icon={cog} />} iconPosition="right" text="Settings" />

color, fontSize, fontWeight and the other typography props apply to the pair — the icon follows currentColor and 1em. Give the Icon its own color when only the glyph should differ.

Alignment

center (default) for single-line rows; baseline when the copy may wrap or the icon and type sizes differ.

Baseline-aligned headline

Lists

Feature one
Feature two

<Flex as="ul" gap="micro">
  <IconText as="li" icon={<Icon icon={check} color="success" />} text="Feature one" />
</Flex>

Properties


Prop	Type	Default	Description
`align`	`"center" \| "baseline"`	`center`	Cross-axis alignment of icon and copy. `center` for single-line rows; `baseline` when the copy may wrap or the sizes differ.
`alignContent`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| "stretch"`	—	Packing of wrapped lines / grid tracks on the block axis.
`as`	`ElementType<any, keyof IntrinsicElements>`	`span`	Tag of the pair. `span` inline by default; `li` for icon bullet lists.
`children`	`ReactNode`	—	Copy as nodes.
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`cq`	`Partial<Record<ContainerSizeTypes, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; ... 14 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>>`	—	Container-relative layout styles per `theme.containerSizes` key.
`enableBreakpoint`	`"xs" \| "xl" \| "sm" \| "md" \| "lg"`	—	Forces a breakpoint's prop set to apply regardless of viewport (stories/previews).
`icon *`	`ReactNode`	—	The glyph — usually an `<Icon>`. Any node works (an `Avatar`, a `Spinner`).
`iconPosition`	`"left" \| "right"`	`left`	Side of the icon relative to the copy.
`ignoreResponsive`	`boolean`	—	Fully disables the responsive factory (tests / fixed snapshots).
`justifyItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: inline alignment of every item in its cell.
`legibility`	`"on-photo"`	—	Reading-shadow preset for text over a photographic background (`on-photo`). Replaces the inline `style={{ textShadow }}` in the consumer (brasil_2030 radar, gap A3). Token emission is deferred until a 2nd consumer asks for the raw var (see backlog).
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`placeItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: `place-items` shorthand (block + inline).
`readable`	`number \| boolean`	—	Makes the `color` legible against the page surface: `true` = WCAG AA (4.5), a number sets a custom floor. Ignored with `contrast`. See the Layout Props concept page for the full semantics.
`text`	`string`	—	Copy as a string. Alternative to `children`; `children` wins when both are set.
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.
`viewportMedias`	`Partial<Record<keyof BreakPoint<any>, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; container: boolean; ... 13 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>> \| unde...`	—	Viewport-driven layout styles per `theme.breakpoints` key.