Icon

Overview

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.

Variations

Sizes

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

Colors

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

Custom colors

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

With tooltip

IconWithTooltip pairs an icon with a tooltip — useful for inline “informer” affordances. Pass tooltip content and, optionally, iconProps to control the icon it renders.

Installation

import { IconV2 } from '@harnessio/ui/components'

//...

return <IconV2 name="check" size="lg" />

Related pages

All Icons Explore the comprehensive icon library

Logos Logo component reference

Usage

Anatomy

IconV2 renders a single inline SVG. You give it a name, and it looks that name up in the icon set and draws the matching glyph.

<IconV2 name="double-tick" size="md" color="success" />

• Name lookup — name selects the glyph from the icon set. If the name isn’t found, the component warns in the console and renders nothing (unless you provide a fallback name).
• Sizing — size applies a predefined size class (2xs through xl). Set skipSize when you’re sizing the icon yourself via className and want to opt out of the built-in size classes.
• Color — color maps to a semantic icon-color token (text-cn-icon-*). inherit (the default) takes the surrounding text color, so an icon inside colored text matches it automatically.
• Tooltip helper — IconWithTooltip composes IconV2 inside a <button> wrapped by a Tooltip, giving you a focusable, hoverable icon with explanatory content.

Best practices

Do

• Reach for a semantic color variant (danger, warning, success, …) before overriding color by hand, so status meaning stays consistent.
• Let color="inherit" carry the icon color when the icon sits alongside text.
• Keep icon sizes consistent within a group (e.g. all sm in a toolbar) so they read as a set.

Don’t

• Don’t rely on an icon alone to convey meaning in interactive controls — pair it with a text label or an accessible name.
• Don’t hard-code pixel sizes with className while leaving the size classes on; use skipSize when you take over sizing.

Content

• Choose the icon whose conventional meaning matches the action or status — browse the full set on the All Icons page.
• Use IconWithTooltip when an icon needs a short explanation, and keep that tooltip text to a phrase.

Accessibility

Labeling

• IconV2 renders a decorative SVG with no accessible name of its own. When an icon stands alone in an interactive control, give that control a label (e.g. aria-label on the button) so its purpose is announced.
• IconWithTooltip renders the icon inside a real <button>, so the tooltip trigger is focusable and reachable by keyboard.

Known limitations

• No built-in text alternative. IconV2 doesn’t add a title or aria-label; supply meaning through surrounding text or the parent control.

Properties

Properties

IconV2

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

IconWithTooltip

Prop	Required	Default	Type
content	false		ReactNode (from TooltipProps)
iconProps	false		IconPropsV2
disabled	false		boolean
className	false		string