A visual indicator for a brand or application.
<nve-logo aria-label="NVIDIA">NV</nve-logo>
Installation
<script type="module">
import '@nvidia-elements/core/logo/define.js';
</script>
<nve-logo aria-label="NVIDIA">NV</nve-logo>
Size
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts.
Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.
<div nve-layout="row gap:xs">
<nve-logo size="sm" color="green-mint" aria-label="green mint">Gm</nve-logo>
<nve-logo color="green-mint" aria-label="green mint">Gm</nve-logo>
<nve-logo size="lg" color="green-mint" aria-label="green mint">Gm</nve-logo>
</div>
Color
Defines a base color from the theme color palette
Color Description red-cardinal gray-slate gray-denim blue-indigo blue-cobalt blue-sky teal-cyan green-mint teal-seafoam green-grass yellow-amber orange-pumpkin red-tomato pink-magenta purple-plum purple-violet purple-lavender pink-rose green-jade lime-pear yellow-nova brand-green
All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.
<div nve-layout="row gap:xs align:wrap">
<nve-logo aria-label="NVIDIA">NV</nve-logo>
<nve-logo color="red-cardinal" aria-label="red cardinal">Rc</nve-logo>
<nve-logo color="gray-slate" aria-label="gray slate">Gs</nve-logo>
<nve-logo color="gray-denim" aria-label="gray denim">Gd</nve-logo>
<nve-logo color="blue-indigo" aria-label="blue indigo">Bi</nve-logo>
<nve-logo color="blue-cobalt" aria-label="blue cobalt">Bc</nve-logo>
<nve-logo color="blue-sky" aria-label="blue sky">Bs</nve-logo>
<nve-logo color="teal-cyan" aria-label="teal cyan">Tc</nve-logo>
<nve-logo color="green-mint" aria-label="green mint">Gm</nve-logo>
<nve-logo color="teal-seafoam" aria-label="teal seafoam">Ts</nve-logo>
<nve-logo color="green-grass" aria-label="green grass">Gg</nve-logo>
<nve-logo color="yellow-amber" aria-label="yellow amber">Ya</nve-logo>
<nve-logo color="orange-pumpkin" aria-label="orange pumpkin">Op</nve-logo>
<nve-logo color="red-tomato" aria-label="red tomato">Rt</nve-logo>
<nve-logo color="pink-magenta" aria-label="pink magenta">Pm</nve-logo>
<nve-logo color="purple-plum" aria-label="purple plum">Pp</nve-logo>
<nve-logo color="purple-violet" aria-label="purple violet">Pv</nve-logo>
<nve-logo color="purple-lavender" aria-label="purple lavender">Pl</nve-logo>
<nve-logo color="pink-rose" aria-label="pink rose">Pr</nve-logo>
<nve-logo color="green-jade" aria-label="green jade">Gj</nve-logo>
<nve-logo color="lime-pear" aria-label="lime pear">Lp</nve-logo>
<nve-logo color="yellow-nova" aria-label="yellow nova">Yn</nve-logo>
<nve-logo color="brand-green" aria-label="brand green">Bg</nve-logo>
</div>
NV
Rc
Gs
Gd
Bi
Bc
Bs
Tc
Gm
Ts
Gg
Ya
Op
Rt
Pm
Pp
Pv
Pl
Pr
Gj
Lp
Yn
Bg
Slotted Icon
Slotted icon in logo inherits logo color and size
Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.
<div nve-layout="row gap:xs">
<nve-logo color="pink-rose" aria-label="pink rose large" size="lg">
<nve-icon name="star"></nve-icon>
</nve-logo>
<nve-logo color="pink-rose" aria-label="pink rose medium" size="md">
<nve-icon name="star"></nve-icon>
</nve-logo>
<nve-logo color="pink-rose" aria-label="pink rose small" size="sm">
<nve-icon name="star"></nve-icon>
</nve-logo>
<nve-logo color="red-cardinal" aria-label="red cardinal">
<nve-icon name="star"></nve-icon>
</nve-logo>
<nve-logo color="green-grass" aria-label="green grass">
<nve-icon name="star"></nve-icon>
</nve-logo>
<nve-logo color="blue-cobalt" aria-label="blue cobalt">
<nve-icon name="star"></nve-icon>
</nve-logo>
</div>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days