Logo

beta

The design system provides two logo components for different use cases:

LogoV2 — Full-color logos with brand-specific backgrounds
LogoSymbol — Monochrome symbols that inherit color from parent

Usage

import { LogoV2, LogoSymbol } from '@harnessio/ui/components'

// Full-color logo with brand background
<LogoV2 name="github" size="lg" />

// Monochrome symbol (inherits text color)
<LogoSymbol name="github" size="lg" />

LogoV2 vs LogoSymbol

Use LogoV2 when you need the official brand appearance. Use LogoSymbol when you need the logo to blend with your UI’s color scheme.

Size Variants

Both components support the same size variants: xs, sm, md, and lg. The default size is lg.

LogoSymbol Colors

Since LogoSymbol uses currentColor, it inherits color from its parent element.

API Reference

LogoV2

<LogoV2
  name="logo-name"     // name of the logo
  size="lg"            // [OPTIONAL] size variant
  className="my-class" // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
name	true		string
size	false	'lg'	'xs' \| 'sm' \| 'md' \| 'lg'
className	false		string
fallback	false		string

LogoSymbol

<LogoSymbol
  name="logo-name"     // name of the symbol
  size="lg"            // [OPTIONAL] size variant
  className="my-class" // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
name	true		string
size	false	'lg'	'xs' \| 'sm' \| 'md' \| 'lg'
className	false		string
fallback	false		string

All Logos Browse the complete logo library with Default and Symbol variants

Icons Icon component reference