Basic Components

Icon

A lightweight SVG wrapper that provides consistent sizing, color inheritance, and themed appearances for icons.

Basic usage

Wrap any SVG inside Icon to apply consistent sizing and color inheritance.

<Row flexWrap>
  <Icon><Star /></Icon>
  <Icon><Heart /></Icon>
  <Icon><AlertCircle /></Icon>
  <Icon><Check /></Icon>
  <Icon><Info /></Icon>
</Row>

Sizes

Icons support five sizes: xs, sm, md (default), lg, xl.

<Row flexWrap itemsEnd>
  <Col itemsCenter>
    <Icon xs><Star /></Icon>
    <Text sm secondary>xs</Text>
  </Col>
  <Col itemsCenter>
    <Icon sm><Star /></Icon>
    <Text sm secondary>sm</Text>
  </Col>
  <Col itemsCenter>
    <Icon md><Star /></Icon>
    <Text sm secondary>md</Text>
  </Col>
  <Col itemsCenter>
    <Icon lg><Star /></Icon>
    <Text sm secondary>lg</Text>
  </Col>
  <Col itemsCenter>
    <Icon xl><Star /></Icon>
    <Text sm secondary>xl</Text>
  </Col>
</Row>

Appearances

By default, Icon inherits currentColor from the parent. Use appearance props to apply themed colors.

primary

accent

secondary

tertiary

success

danger

warning

info

<Row flexWrap>
  <Col itemsCenter>
    <Icon primary><Star /></Icon>
    <Text xs secondary>primary</Text>
  </Col>
  <Col itemsCenter>
    <Icon accent><Star /></Icon>
    <Text xs secondary>accent</Text>
  </Col>
  <Col itemsCenter>
    <Icon secondary><Star /></Icon>
    <Text xs secondary>secondary</Text>
  </Col>
  <Col itemsCenter>
    <Icon tertiary><Star /></Icon>
    <Text xs secondary>tertiary</Text>
  </Col>
  <Col itemsCenter>
    <Icon success><Star /></Icon>
    <Text xs secondary>success</Text>
  </Col>
  <Col itemsCenter>
    <Icon danger><Star /></Icon>
    <Text xs secondary>danger</Text>
  </Col>
  <Col itemsCenter>
    <Icon warning><Star /></Icon>
    <Text xs secondary>warning</Text>
  </Col>
  <Col itemsCenter>
    <Icon info><Star /></Icon>
    <Text xs secondary>info</Text>
  </Col>
</Row>

Variants

Icons support outline (default, text color only) and filled (background fill) variants.

outline

filled

outline

filled

<Row flexWrap>
  <Col itemsCenter>
    <Icon primary><Star /></Icon>
    <Text xs secondary>outline</Text>
  </Col>
  <Col itemsCenter>
    <Icon primary filled><Star /></Icon>
    <Text xs secondary>filled</Text>
  </Col>
  <Col itemsCenter>
    <Icon danger><AlertCircle /></Icon>
    <Text xs secondary>outline</Text>
  </Col>
  <Col itemsCenter>
    <Icon danger filled><AlertCircle /></Icon>
    <Text xs secondary>filled</Text>
  </Col>
</Row>

Shapes

Shape props apply once the icon enters container mode (any of padding, border, insetRing, shadow, filled). Without a container, the SVG has no visible box for the radius to act on.

sharp

rounded

pill

<Row flexWrap>
  <Col itemsCenter>
    <Icon padding primary filled sharp><Star /></Icon>
    <Text xs secondary>sharp</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding primary filled><Star /></Icon>
    <Text xs secondary>rounded</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding primary filled pill><Star /></Icon>
    <Text xs secondary>pill</Text>
  </Col>
</Row>

Container mode

Add padding to give the icon a sized box, then combine filled, border, insetRing, or shadow to style the container. Padding and radius scale with the size prop.

filled

border

ring

filled + shadow

filled + ring

<Row flexWrap itemsCenter>
  <Col itemsCenter>
    <Icon padding pill primary filled><Heart /></Icon>
    <Text xs secondary>filled</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill primary border><Heart /></Icon>
    <Text xs secondary>border</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill primary insetRing><Heart /></Icon>
    <Text xs secondary>ring</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill primary filled shadow><Heart /></Icon>
    <Text xs secondary>filled + shadow</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill success filled insetRing><Check /></Icon>
    <Text xs secondary>filled + ring</Text>
  </Col>
  <Col itemsCenter>
    <Icon lg padding pill danger filled><AlertCircle /></Icon>
    <Text xs secondary>lg</Text>
  </Col>
</Row>

Transparent

transparent drops the container's background and changes nothing else. It only has an effect on filled, since every other variant is already background-less.

That leaves the glyph in the "on this fill" colour with no fill of its own, so it belongs on a filled surface of the same appearance, where that colour is the readable one. On a plain surface, use the default outline variant instead.

filled: paints its own surface

transparent: blends into a matching fill

<Row flexWrap itemsCenter>
  <Col itemsCenter>
    <Icon padding pill danger filled><AlertCircle /></Icon>
    <Text xs secondary>filled: paints its own surface</Text>
  </Col>
  <Card danger filled wFit>
    <Col itemsCenter>
      <Icon padding pill danger filled transparent><AlertCircle /></Icon>
      <Text xs>transparent: blends into a matching fill</Text>
    </Col>
  </Card>
</Row>

Note that border and insetRing have nothing to show on a filled icon: the filled variant resolves both to transparent so the edge disappears into the fill. Pair them with outline instead.

In context

Icons work naturally alongside text and inside buttons.

Icons inherit inline sizing when placed in text.

Container-mode icons

Pair a padded icon with adjacent text for compact summaries.

<Col>
  <Row>
    <Button><Search /> Search</Button>
    <Button success filled><Check /> Saved</Button>
    <Button danger><AlertCircle /> Delete</Button>
  </Row>
  <Text><Icon sm info><Info /></Icon> Icons inherit inline sizing when placed in text.</Text>
  <Row itemsCenter>
    <Icon padding pill primary filled><Star /></Icon>
    <Col gap noPadding>
      <Text fontBold>Container-mode icons</Text>
      <Text sm secondary>Pair a padded icon with adjacent text for compact summaries.</Text>
    </Col>
  </Row>
</Col>

Icon Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`noPadding`	Padding	✓	Disable internal padding
`padding`	Padding		Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape	✓	Medium rounded corners (default)
`sharp`	Shape		No rounded corners (square)
`noShrink`	Shrink	✓	Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderEnd`	Border		Enable border on the inline-end side (right in LTR, left in RTL)
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderStart`	Border		Enable border on the inline-start side (left in LTR, right in RTL)
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border	✓	Disable all borders
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display	✓	Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items	✓	Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify	✓	Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`insetRing`	Ring		Enable the inset ring — emits ring-inset
`noInsetRing`	Ring	✓	Disable the inset ring
`noShadow`	Shadow	✓	Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`noTransition`	Transition	✓	Disable transitions for instant state changes
`transition`	Transition		Enable smooth transitions between states
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width	✓	Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint