Icon — Vortex Design System

<Icon
  src={Hexagon}
  size="32px"
  color="default"
/>

Features

Accepts an SVG element or component.
Supports responsive sizes and colors.
Matches the parent font size by default.
Supports non-square icons with autoWidth.

Reference Links

WAI decorative images tutorial

Color

Use color to choose a foreground color. See Properties for all options.

import { Icon, Stack } from "@vortexlabs/vortex";
import { Hexagon } from "@vortexlabs/vortex-icons";

<Stack direction="row" gap={2} wrap>
  <Icon src={Hexagon} size={8} color="default" />
  <Icon src={Hexagon} size={8} color="subtle" />
  <Icon src={Hexagon} size={8} color="primary" />
  <Icon src={Hexagon} size={8} color="success" />
  <Icon src={Hexagon} size={8} color="warning" />
  <Icon src={Hexagon} size={8} color="critical" />
</Stack>

Inverse Color

Use color="inverse" on an inverse background.

<Stack backgroundColor="inverse" padding={4} width={12}>
  <Icon src={Hexagon} color="inverse" />
</Stack>

Color Inheritance

Use color="inherit" to match the parent element's color.

<div style={{ color: "goldenrod" }}>
  <Icon src={Hexagon} color="inherit" size={8} />
</div>

Size

Set size with a number or CSS value. Numeric sizes use theme sizing units.

<Icon src={Hexagon} size={4} />
<Icon src={Hexagon} size={8} />
<Icon src={Hexagon} size="3rem" />

Responsive Sizes

Pass a breakpoint object to change the size across screen sizes.

<Icon src={Hexagon} size={{ xs: 5, sm: 10 }} />

Percentage Sizing

Use size="100%" inside a container with a defined height.

<Stack width={25} height={25}>
  <Icon src={Hexagon} size="100%" />
</Stack>

Size Inheritance

The default size is 1em, which matches the parent font size.

Vortex

<Text as="div" size={{ xs: "heading-md-mobile", sm: "heading-md-desktop" }}>
  <Stack direction="row" align="center" gap={2}>
    <Icon src={Hexagon} />
    <Stack.Item>Vortex</Stack.Item>
  </Stack>
</Text>

Auto Width

Icons use a square aspect ratio. Use autoWidth for non-square icons.

Square boundaries (default)

<div style={{ display: "inline-block", border: "1px solid currentColor" }}>
  <Icon src={Hexagon} size={8} color="info" />
</div>

Vertical boundaries (autoWidth)

The icon keeps its height while allowing a non-square width.

<div style={{ display: "inline-block", border: "1px solid currentColor" }}>
  <Icon
    size={8}
    autoWidth
    color="info"
    src={
      <svg viewBox="0 0 16 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <rect x="5" y="1" width="6" height="14" rx="3" />
        <path d="M15 10v2a7 7 0 0 1-14 0v-2M8 19v4M4 23h8" />
      </svg>
    }
  />
</div>

Accessibility

Description

Icon is decorative and always sets aria-hidden="true". Use the SVG directly when it needs an accessible name.

For actions, use a [Button](/docs/components/button) or [Link](/docs/components/link) and give it an accessible name.