StatusIcon

Custom icon

The HvStatusIcon component supports two other variants that you can use to customize the icon’s appearance: default and accent. These don’t have a default icon, so you need to provide a custom icon using the customIcon prop. If no icon is provided, a placeholder will be displayed.

<div className="flex items-center gap-xs">
  <HvStatusIcon
    customIcon={<div className="i-ph-tree-structure" />}
    variant="default"
  />
  <HvStatusIcon
    customIcon={<div className="i-ph-sparkle" />}
    variant="accent"
  />
  <HvStatusIcon variant="default" />
</div>