Skip to content
Harness Design System Harness Design System Harness Design System

Icon

beta

The IconV2 component allows you to render various icons with customizable properties such as size, color theme, and name. It will soon replace the old Icon component.

Size Variants

IconV2 supports multiple predefined size variants: 2xs, xs, sm, md, lg and xl. The default size is sm.

Colored Icon

By default, IconV2 components will inherit the color from the parent. You can also set the color explicitly using the className prop.

Usage

import { IconV2 } from '@harnessio/ui/components'
//...
return <IconV2 name="check" size="lg" />

API Reference

The IconV2 component can be sized using the size prop, which applies predefined size classes.

<IconV2
name="double-tick" // name of the icon
size="md" // [OPTIONAL] size variant (2xs, xs, sm, md, lg, xl)
className="my-class" // [OPTIONAL] custom class name
skipSize={false} // [OPTIONAL] skip size classes if custom styling is applied
/>
Prop
Required
Default
Type
nametruestring
sizefalse'sm''2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
skipSizefalsefalseboolean
classNamefalsestring