NVIDIA/icons

NVIDIA/icons

Description: A monorepo publishing official NVIDIA icon packages. They contain SVG assets and dependency-free React components for web and React applications.

Language: TypeScript

License: NOASSERTION

Stars: 0

Forks: 0

Open issues: 0

Created: 2026-08-17T16:54:58Z

Pushed: 2026-09-16T00:32:02Z

Default branch: main

Fork: no

Archived: no

README:

NVIDIA Icons

Official NVIDIA GUI icon packages for web and React applications: raw SVG assets, and React components that render via a lightweight sprite-injection runtime. All icon path data ships in the package and is bundled at install time; there is no CDN or web-font dependency at runtime. See [Rendering model](#rendering-model) below for how the React components work and their SSR caveat.

Overview

This repository publishes four npm packages under the @nvidia scope:

| Package | Description | |---|---| | [@nvidia/gui-icons](./packages/gui-icons) | Raw SVG assets + TypeScript constants (748 icons, line and fill variants) | | [@nvidia/react-gui-icons](./packages/react-gui-icons) | React icon components for GUI Icons (sprite-based rendering) | | [@nvidia/micro-gui-icons](./packages/micro-gui-icons) | Raw SVG assets + TypeScript constants for Micro GUI Icons (24 utility icons) | | [@nvidia/react-micro-gui-icons](./packages/react-micro-gui-icons) | React icon components for Micro GUI Icons (sprite-based rendering) |

Documentation

This README and the per-package READMEs linked above are the complete documentation today. A browsable icon gallery and searchable docs site is planned, but is not yet available. Until it ships, the authoritative list of every icon name is the IconNames constant exported from @nvidia/gui-icons and @nvidia/micro-gui-icons. To browse by keyword, use IconTagMap from either package; to browse by category, use IconCategoryMap from @nvidia/gui-icons (the Micro set ships no categories, see [Finding an icon](#finding-an-icon)).

Getting started

# Raw SVG assets + TypeScript constants
npm install @nvidia/gui-icons

# React icon components
npm install @nvidia/react-gui-icons

import { NvidiaGuiIcon } from "@nvidia/react-gui-icons";

;

Requirements

• Node.js: 22 or newer (engines.node is >=22).
• React (React packages only): ^17.0.0 || ^18.0.0 || ^19.0.0 as a peer

dependency. The base @nvidia/gui-icons / @nvidia/micro-gui-icons packages have no runtime dependencies.

Usage

React: generic component

import { NvidiaGuiIcon } from "@nvidia/react-gui-icons";

// line variant (default)


// fill variant, custom size

React: tree-shakable named imports

// barrel import (tree-shakable by bundlers with sideEffects: false support)
import { Gpu, Add, Close } from "@nvidia/react-gui-icons/icons";

// per-icon subpath import (explicit tree-shaking boundary)
import { Gpu } from "@nvidia/react-gui-icons/icons/Gpu";

These packages do not use external-svg-loader, CDN-hosted SVG files, or web fonts. All path data is bundled at install time; see [Rendering model](#rendering-model) for how it reaches the DOM.

Finding an icon

There is no hosted icon browser yet, so the icon set is searchable programmatically instead. Every name, category and keyword ships with the package as plain data, and all of it is typed.

import {
IconNames, // all 748 names
IconTagMap, // name -> search keywords
IconCategoryMap, // category -> names
getIconCategory, // name -> category
isIconName, // runtime type guard
} from "@nvidia/gui-icons";

// Search by name or keyword
const matches = IconNames.filter(
(name) => name.includes("gpu") || IconTagMap[name]?.includes("gpu"),
);
// -> ["gpu", "gpu-card", "gpu-card-multi", "gpu-card-off", "gpu-off", "gpu-sync"]

getIconCategory("gpu"); // -> "hardware"
IconCategoryMap.hardware.length; // -> 118
isIconName("not-an-icon"); // -> false

IconCategories lists the 14 categories and IconTags the full keyword vocabulary. Both are exported as const arrays with matching IconCategory and IconTag types, so an editor will autocomplete them and a typo is a compile error rather than a blank icon.

@nvidia/micro-gui-icons exports the same name and keyword API: IconNames, isIconName, IconTags, IconTagMap, and the IconName / IconTag types. It ships no categories. At 24 icons the set is small enough to read in one go, so IconCategories, IconCategoryMap and getIconCategory exist only on @nvidia/gui-icons.

The React packages re-export the IconName and Variant types for their own icon set. They do not re-export the name, tag or category *values*; import those from the matching base package.

Raw SVG assets

import { IconNames, isIconName } from "@nvidia/gui-icons";

// Resolve an SVG file's URL through the package's ./assets/* subpath export
const svgUrl = import.meta.resolve("@nvidia/gui-icons/assets/line/gpu.svg");

import.meta.resolve requires Node.js or a bundler that supports it (Vite, webpack 5+, esbuild). If your bundler doesn't, resolve the package's install path yourself (e.g. via require.resolve or your bundler's asset-URL syntax) and join it with assets//.svg.

SVG files are available at assets/fill/.svg and assets/line/.svg within each installed package.

Rendering model

The React components do not inline ` markup directly. Each renders " /> against a definition that's injected into document.body the first time that icon mounts (see runtime/sprite.tsx` in each React package). This keeps rendered markup small and de-duplicates repeated icons, at the cost of one extra step between mount and paint.

SSR / no-JS caveat: the injection runs in useLayoutEffect (falling back to useEffect when document is undefined), so server-rendered HTML and any render that never executes React effects (static export previews, noscript fallbacks) will show an empty `` with no visible icon until hydration.

If you need icons to render in the initial HTML (SSR, static generation, or snapshot testing), render ` (or ) once, high in your tree. It renders each declaratively as part of the React tree instead of via an effect, so the symbols are present in the markup on first paint and every ` that references them resolves immediately.

Pass the icons you actually use. getNvidiaGuiIconSpriteSymbols accepts icon names, or { iconName, variant } objects when you need a variant other...