Icons

The UI Kit is designed to work seamlessly with popular icon libraries like Phosphor Icons, Font Awesome or Material Icons. These libraries follow the recommended conventions—using currentColor for fill and 1em for size—ensuring icons inherit color and scale properly when used within UI Kit components.

If you’re using custom SVG icons, make sure they follow the same conventions and are converted to React components.

const CustomIcon = () => (
  <svg viewBox="0 0 16 16" fill="currentcolor" width="1em" height="1em">
    <path d="M16 8.5H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z" />
  </svg>
);


export default function Demo() {
  return (
    <HvButton variant="warningSubtle" startIcon={<CustomIcon />}>
      Button
    </HvButton>
  );
}

Given a <CustomIcon /> SVG React component, usage would look like this:

<HvButton startIcon={<CustomIcon />} />
<HvInput endAdornment={<CustomIcon />} />
<HvCardHeader icon={<CustomIcon />} />

HvIconContainer

Icons are often used independently from other components. To support this, the UI Kit provides the HvIconContainer utility component, which ensures icons are styled according to the design specifications.

HvIconContainer enhances icon usage by adding support for HvColor and applying consistent padding through a “container box” based on the icon size. This helps maintain visual alignment and spacing across your UI.

For detailed usage and examples, see the HvIconContainer documentation.

export default function Demo() {
  return (
    <div className="flex gap-xs items-center text-warning">
      <HvIconContainer size="M">
        <CustomIcon />
      </HvIconContainer>
      <HvTypography variant="title2">Title</HvTypography>
    </div>
  );
}


const CustomIcon = () => (
  <svg viewBox="0 0 16 16" fill="currentcolor" width="1em" height="1em">
    <path d="M16 8.5H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z" />
  </svg>
);