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

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>

Shapes

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
`borderE`	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
`borderS`	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
`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