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.
BasicUsage.tsx
<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.
xs
sm
md
lg
xl
Sizes.tsx
<Row flexWrap itemsEnd> <Col itemsCenter> <Icon xs> <Star /> </Icon> <Text secondary sm>xs</Text> </Col> <Col itemsCenter> <Icon sm> <Star /> </Icon> <Text secondary sm>sm</Text> </Col> <Col itemsCenter> <Icon md> <Star /> </Icon> <Text secondary sm>md</Text> </Col> <Col itemsCenter> <Icon lg> <Star /> </Icon> <Text secondary sm>lg</Text> </Col> <Col itemsCenter> <Icon xl> <Star /> </Icon> <Text secondary sm>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
Appearances.tsx
<Row flexWrap> <Col itemsCenter> <Icon primary> <Star /> </Icon> <Text secondary xs>primary</Text> </Col> <Col itemsCenter> <Icon brand> <Star /> </Icon> <Text secondary xs>brand</Text> </Col> <Col itemsCenter> <Icon accent> <Star /> </Icon> <Text secondary xs>accent</Text> </Col> <Col itemsCenter> <Icon secondary> <Star /> </Icon> <Text secondary xs>secondary</Text> </Col> <Col itemsCenter> <Icon tertiary> <Star /> </Icon> <Text secondary xs>tertiary</Text> </Col> <Col itemsCenter> <Icon success> <Star /> </Icon> <Text secondary xs>success</Text> </Col> <Col itemsCenter> <Icon danger> <Star /> </Icon> <Text secondary xs>danger</Text> </Col> <Col itemsCenter> <Icon warning> <Star /> </Icon> <Text secondary xs>warning</Text> </Col> <Col itemsCenter> <Icon info> <Star /> </Icon> <Text secondary xs>info</Text> </Col> <Col itemsCenter> <Icon link> <Star /> </Icon> <Text secondary xs>link</Text> </Col></Row>Variants
Icons support outline (default, text color only) and filled (background fill) variants.
outline
filled
outline
filled
Variants.tsx
<Row flexWrap> <Col itemsCenter> <Icon primary> <Star /> </Icon> <Text secondary xs>outline</Text> </Col> <Col itemsCenter> <Icon filled primary> <Star /> </Icon> <Text secondary xs>filled</Text> </Col> <Col itemsCenter> <Icon danger> <AlertCircle /> </Icon> <Text secondary xs>outline</Text> </Col> <Col itemsCenter> <Icon danger filled> <AlertCircle /> </Icon> <Text secondary xs>filled</Text> </Col></Row>In Context
Icons work naturally alongside text and inside buttons.
Icons inherit inline sizing when placed in text.
InContext.tsx
<Col> <Row> <Button> <Search /> Search </Button> <Button filled success> <Check /> Saved </Button> <Button danger> <AlertCircle /> Delete </Button> </Row> <Text> <Icon info sm> <Info /> </Icon> Icons inherit inline sizing when placed in text. </Text></Col>Icon Props
Size
Size props for controlling component dimensions
xs
Extra small size
sm
Small size
md
Medium size (default)
lg
Large size
xl
Extra large size
Appearance
Appearance props for controlling component colors
primary
Primary color appearance (gray)
brand
Brand color appearance (blue)
accent
Accent color appearance (rose)
secondary
Secondary color appearance (gray)
tertiary
Tertiary color appearance
success
Success color appearance (green)
danger
Danger color appearance (red)
warning
Warning color appearance (amber)
info
Info color appearance (cyan)
link
Link color appearance (blue, for hyperlinks)
inherit
Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
Variant
Variant props for controlling component style variations
filled
Filled variant - solid background with contrasting text color
outline
Outline variant - transparent background with border and colored text (default)
Display
Display props for controlling CSS display property
inline
Inline display - flows with text
block
Block display - takes full width, new line
inlineBlock
Inline-block display - inline but with block properties
flex
Flex display - flexbox container
inlineFlex
Inline-flex display - inline flexbox container
grid
Grid display - CSS grid container
inlineGrid
Inline-grid display - inline grid container
contents
Contents display - element's box is removed, children display as if parent didn't exist
table
Table display - behaves like table element
tableCell
Table-cell display - behaves like td element
hidden
Hidden display - element is not visible
Hide
Hide props for responsive element visibility
mobileHide
Hide element on mobile devices and below (max-mobile: 48rem)
tabletHide
Hide element on tablet devices and below (max-tablet: 64rem)
desktopHide
Hide element on desktop devices and below (max-desktop: 80rem)
Items
Items props for controlling flex item alignment (align-items)
itemsStart
Align items to start (top/left)
itemsEnd
Align items to end (bottom/right)
itemsCenter
Align items to center
itemsBaseline
Align items to baseline
itemsStretch
Stretch items to fill container
Justify
Justify props for controlling flex content alignment (justify-content)
justifyStart
Pack items toward the start of the main axis
justifyEnd
Pack items toward the end of the main axis
justifyCenter
Center items along the main axis
justifyBetween
Distribute items with space between them
justifyAround
Distribute items with space around them
justifyEvenly
Distribute items with equal space around them
justifyStretch
Stretch items to fill the main axis
justifyBaseline
Align items along their baseline on main axis