Icon

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
name	true		string
size	false	'sm'	'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
skipSize	false	false	boolean
className	false		string

Related pages

All Icons Explore the comprehensive icon library

Logos Logo component reference