Logo

Overview

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

Variations

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.

Sizes

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.

Installation

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" />

Related Pages

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

Icons Icon component reference

Usage

Anatomy

Both components render an inline SVG selected by name. The difference is how they carry color.

<LogoV2 name="github" size="lg" />
<LogoSymbol name="github" size="lg" />

• LogoV2 — resolves a full-color brand mark (glyph plus the brand’s own background) from the logo set. Its colors are fixed; it does not follow the surrounding text color.
• LogoSymbol — resolves a monochrome mark drawn with currentColor, so it inherits the color of its parent (set it with a text-color utility like text-cn-1).
• Sizing — size (xs/sm/md/lg, default lg) applies a size class. Set skipSize when you’re sizing via CSS and want to skip the built-in class.
• Name lookup & fallback — name selects the mark. If it isn’t found and a fallback name is given, the component warns and renders the fallback; with no fallback, it warns and renders nothing.

Best practices

Do

• Use LogoV2 where the official brand appearance matters (marketing, brand cards, connector logos).
• Use LogoSymbol when the mark should blend with the UI — inside buttons, mono toolbars, or on colored surfaces.
• Provide a fallback when the logo name comes from data you don’t fully control, so a missing mark degrades gracefully.

Don’t

• Don’t recolor a LogoV2 — its brand colors are intentional. Reach for LogoSymbol when you need a single color.
• Don’t stretch a logo with mismatched dimensions; use size (or CSS with skipSize).

Content

• Pick the correct brand name — browse the All Logos page for available marks.
• When a logo represents an item in a list (a connector, a provider), keep a text label alongside it rather than relying on the mark alone.

Accessibility

Labeling

• Logos are decorative SVGs with no accessible name. Convey the brand through adjacent text, or add an accessible name on the parent control when a logo stands alone.

Known limitations

• No built-in text alternative. Neither component emits an alt/aria-label; supply meaning through surrounding text.

Properties

Properties

LogoV2

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

LogoSymbol

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