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.

Color Variants

IconV2 supports predefined color variants through the color prop: inherit, danger, warning, success, info, and disabled. The default color is inherit.

Custom Colors

You can also set custom colors using the className prop to override the default styling.

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)
  color="inherit"     // [OPTIONAL] color variant (inherit, danger, warning, success, info, disabled)
  className="my-class" // [OPTIONAL] custom class name
  skipSize={false}    // [OPTIONAL] skip size classes if custom styling is applied
/>

Prop	Required	Default	Type
name	true		string
size	false	'sm'	'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'
color	false	'inherit'	'inherit' \| 'danger' \| 'warning' \| 'success' \| 'info' \| 'disabled'
skipSize	false	false	boolean
className	false		string

All Icons Explore the comprehensive icon library

Logos Logo component reference