IconFrame

Give an icon a consistent size, semantic color and framed treatment for cards, metrics and status summaries.

IconFrame

View source · API reference

Three frame sizes

Use a small frame for compact metadata and a larger frame to introduce a section.

Small, medium and large 
<Flex align="center" wrap="true">
  <IconFrame name="lucide:check" tone="success" size="sm" aria-hidden="true" />
  <IconFrame name="lucide:check" tone="success" size="md" aria-hidden="true" />
  <IconFrame name="lucide:check" tone="success" size="lg" aria-hidden="true" />
  <span>Small, medium and large</span>
</Flex>

Tone and treatment

Frames consume the same semantic palette as surrounding components.

Message destinations 
<Flex align="center" wrap="true">
  <IconFrame name="lucide:mail" tone="accent" variant="solid" aria-hidden="true" />
  <IconFrame name="lucide:mail" tone="info" variant="surface" aria-hidden="true" />
  <IconFrame name="lucide:mail" tone="neutral" variant="outline" aria-hidden="true" />
  <span>Message destinations</span>
</Flex>

Behavior and accessibility

IconFrame is a span, not a control. Use a visible label alongside decorative frames or an accessible wrapper for meaningful standalone symbols. A missing name removes the frame.

API reference

IconFrame contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

name

RefOrValue<string>
Default
not set

Exact registered SVG icon name, including its collection prefix.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

size

RefOrValue<IconFrameSize>
Default
md

Frame size: sm, md or lg. Invalid values use the medium frame.

variant

RefOrValue<ComponentVariant>
Default
solid

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

variantMode

RefOrValue<ComponentVariantMode>
Default
stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

Composition

No slots. Register defineIconComponents with the icon resolver; it registers both Icon and IconFrame.