Icon

Utility component that can be used to display an icon and control its size, color, and shape.

Import

import { Icon } from '@vortex-kit/vortex';
import type { IconProps } from '@vortex-kit/vortex';

Display

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

Allied components

Image

Features

Adjustable size, color, and shape.

Responsive design support.

Inherits parent size and color.

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.

Show Code

Inverse Color

Use inverse color for dark backgrounds.

Show Code

Color Inheritance

Use inherit to inherit color from parent element.

Show Code

Size

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

Show Code

Responsive Sizes

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

Show Code

Percentage Sizing

Use percentage values to fill container dimensions.

Show Code

Size Inheritance

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

Size inheritance from font size

Vortex

Show Code

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)

Show Code

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.

Show Code

Accessibility

Icons are decorative and not interactive. For actions, use a link or button component.

Key	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.