Basic Components

Icon

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

A lightweight SVG wrapper that provides consistent sizing, color inheritance, and themed appearances for icons. With padding it switches into container mode, gaining shape, border, ring, and shadow around the glyph.

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

brand

accent

secondary

tertiary

success

danger

warning

info

link

<Row flexWrap>
  <Col itemsCenter>
    <Icon primary><Star /></Icon>
    <Text xs secondary>primary</Text>
  </Col>
  <Col itemsCenter>
    <Icon brand><Star /></Icon>
    <Text xs secondary>brand</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>
  <Col itemsCenter>
    <Icon link><Star /></Icon>
    <Text xs secondary>link</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>

Shape

Shape props apply once the icon enters container mode (any of padding, border, ring, 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, ring, 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 ring><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 ring><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

Use transparent to keep the container background see-through while still applying the appearance color to the glyph, border, or ring.

filled + transparent

success

danger

<Row flexWrap>
  <Col itemsCenter>
    <Icon padding pill primary filled transparent border><Star /></Icon>
    <Text xs secondary>filled + transparent</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill success filled transparent ring><Check /></Icon>
    <Text xs secondary>success</Text>
  </Col>
  <Col itemsCenter>
    <Icon padding pill danger filled transparent border><AlertCircle /></Icon>
    <Text xs secondary>danger</Text>
  </Col>
</Row>

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 bold>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)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`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
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`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
`noRing`	Ring	✓	Disable focus ring
`ring`	Ring		Enable focus 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