Icon — Vortex Design System

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

Features

Adjustable size, color, and shape.
Inherits parent size and color.
Responsive design support.
Auto width for layout optimization.

Color

To customize the color of the icon, simply utilize the color prop. You can explore the available color options in the icons props section.

<Icon src={Hexagon} size={8} color="default" />
<Icon src={Hexagon} size={8} color="subtle" />
<Icon src={Hexagon} size={8} color="subtlest" />
<Icon src={Hexagon} size={8} color="primary" />
<Icon src={Hexagon} size={8} color="primary-bold" />
<Icon src={Hexagon} size={8} color="success" />
<Icon src={Hexagon} size={8} color="success-bold" />
<Icon src={Hexagon} size={8} color="info" />
<Icon src={Hexagon} size={8} color="info-bold" />
<Icon src={Hexagon} size={8} color="warning" />
<Icon src={Hexagon} size={8} color="warning-bold" />
<Icon src={Hexagon} size={8} color="critical" />
<Icon src={Hexagon} size={8} color="critical-bold" />

Inverse Color

Use inverse color for dark backgrounds.

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

Color Inheritance

Use inherit to inherit color from parent element.

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

Size

The Icon component has a size prop. A value of 4 means 1rem, and higher values increase the size.

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

Responsive Sizes

Use responsive sizing with breakpoint objects. xs: 5 equals 1.25rem, sm: 10 equals 2.5rem.

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

Percentage Sizing

Use percentage values to fill container dimensions.

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

Size Inheritance

Icon component is able to inherit its size and color from the parent element.

Size inheritance from font size

Vortex

<Text 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

The autoWidth property allows the Icon component to maintain only the vertical bounding box, eliminating any unnecessary horizontal space. This is particularly beneficial when you need to preserve vertical spacing while reducing the horizontal extent.

Square boundaries (default)

<div style={{ display: 'inline-block', border: 'var(--vortex-space-25) solid var(--vortex-color-border-critical-default)' }}>
  <Icon src={Hexagon} size={8} color='info' />
</div>

Vertical boundaries (autoWidth)

Use autoWidth to remove horizontal space. Note that you need to remove the width and height properties from the icon file to make it work.

<div style={{ display: 'inline-block', border: 'var(--vortex-space-25) solid var(--vortex-color-border-critical-default)' }}>
  <Icon src={MicIcon} size={8} autoWidth color='info' />
</div>

Accessibility

Icons are decorative and not interactive. For actions, use a Link or Button component.

Description

Icon uses <span> element by default.

Icons have aria-hidden="true" by default to prevent screen readers from reading the icon text.

For interactive icons, use Button or Link components with proper ARIA labels.