---
name: agenticdriver-provider-icons
description: Add AI provider and product icons with ready-to-use React components, JavaScript DOM helpers and SVG layouts. Use for icon assets and interface integration, not provider execution or account setup.
---

# AgenticDriver provider icons

Browse https://agenticdriver.dev/icons. Use the standalone icon package; it does
not require the AgenticDriver SDK or make runtime network requests.

## Install

Reuse the project's installed package when it supports these exports. Otherwise
install the latest verified GitHub archive and keep the generated lockfile:

```sh
npm install https://agenticdriver.dev/downloads/provider-icons.tgz
```

The installed name is `@agenticdriver/provider-icons`, also published on npm.
The archive command above selects the website's verified release. React is an optional
peer dependency for the React entrypoint; core/DOM usage does not install React.

## React — use the components

```tsx
"use client";

import { PPIO } from "@agenticdriver/provider-icons/react";

export default () => <PPIO.Combine size={32} mode="color" />;
```

Each provider has a named component, such as `Claude`, `OpenAI` or `PPIO`.
Use the base component for its logo, `.Color` for colour, `.Text` for a wordmark,
`.Combine` for logo plus wordmark, and `.Avatar` for a circular treatment.
`.Brand`, `.BrandColor`, `.TextCn`, `.TextCnColor` and `.TextColor` are
available where their underlying artwork exists. Combine requires a wordmark.

Components handle layout, aspect ratio, colour fallback and hydration-safe SVG
IDs. Do not write an extra wrapper, stylesheet, SVG parser or ID generator.
`size` is the height in pixels (default 24). `mode="color"` selects colour on
Combine/Avatar; `style` is a normal React CSS object. Named imports include only
the selected provider's artwork in tree-shaking bundlers. React 18/19 are supported.

For names selected at runtime:

```tsx
"use client";

import { ProviderIcon } from "@agenticdriver/provider-icons/react";

export default () => <ProviderIcon provider="ppio" artwork="combine" size={32} mode="color" />;
```

The client directive also makes these examples usable in a Next.js App Router
component. Label the surrounding control, or add `aria-label` for a standalone image.

Monochrome inherits the surrounding text colour, so it follows an application's
light/dark theme automatically. Colour artwork retains its brand colours.

## Brand colours

`Claude.primaryColour` (also `Claude.colorPrimary`) exposes the source's primary
hex value. `Claude.colourTheme` (also `Claude.colorTheme`) is a read-only array
of the source's declared colours. For example, Claude's primary is `#D97757`.

For framework-independent usage, import `providerIconTheme` from the root package
and call `providerIconTheme("claude")`; it returns the same metadata and accepts
aliases. These values are recorded from LobeHub's colour definitions at the
artwork's pinned revision. A provider with no definition has an undefined primary
and an empty array; unknown providers return undefined. Do not invent colours.

Gallery cards can copy a primary colour, copy SVG or download SVG directly.
The website catalogue also includes `palette.colours` entries with hex values
and source-defined names where available, plus `palette.source`. These labels
are website metadata; the package's `colourTheme` remains an array of hex values.

## JavaScript — mount in a container

```js
import { mountProviderIcon } from "@agenticdriver/provider-icons/dom";

mountProviderIcon("#provider-icon", "ppio", { artwork: "combine", style: "color", size: 32 });
```

Pass a container selector or element. Use `createProviderIcon(provider, options)`
when you want the SVG node without mounting. Both handle sizing and unique IDs.
Add `label` for an accessible image. Missing icons leave the container unchanged.

## CDN — no installation

The gallery's CDN tab offers version-free jsDelivr and unpkg URLs that follow the
package's npm `latest` tag; CDN caches may lag after publication. Copy a direct SVG URL or the complete `<img>` example for
logos and wordmarks. External images do not inherit the surrounding text colour.
For Combine and Avatar, copy the short browser-module example: the package's
`dom.js` builds the layout without a stylesheet or downloaded files.

Use the actual URLs in https://agenticdriver.dev/icons/catalogue.json; do not
guess asset filenames or offer a static SVG URL for a runtime composition.
CDN loading makes requests to the selected CDN. Locally installed usage does not.

## SVG and discovery

`providerIconSvg` from `@agenticdriver/provider-icons/svg` returns a standalone
SVG string and also supports `combine`, `avatar`, `size` and automatic IDs.
The gallery can copy SVG or download a transparent PNG or WebP. Copy link preserves
the chosen mark, artwork layout and colour style for another visitor.

The root export's `providerIcons`, `providerAliases`, `providerIconComponentNames`
and `resolveProviderIcon` describe installed assets, names and alternatives.
Only offer artwork actually present in the catalogue. Colour falls back to
monochrome; unavailable artwork returns undefined (null for React). Do not
invent a wordmark or treat icon availability as SDK/model support.

For Python, Go, Rust and native apps, bundle `manifest.json` and `assets/*.svg`.

## Find icons without guessing

Search `searchProviderIcons(query, {category})` from the root package. It accepts
aliases, localized names (for example 千问 finds Qwen) and alternate model-family
names (Nemotron finds Nvidia). Categories are `model`, `provider` and
`application`; `other` selects entries with no source category. Omit the filter
to search all icons. Category membership does not imply SDK/provider support.

Entries include `fullName`, `category`, `searchTerms` and `upstreamUrl` where
source metadata exists. The gallery uses this same data for category browsing.

Read https://agenticdriver.dev/icons/catalogue.json for the current version,
canonical IDs, aliases, exact React export names, available layouts and colours.
Asset filenames in that JSON refer to files inside the package. The plain index
at https://agenticdriver.dev/icons/llms.txt links every icon and the usage guide.

[Library documentation](https://github.com/agenticdriver/provider-icons/tree/v1.1.0) ·
[Notices](https://github.com/agenticdriver/provider-icons/blob/v1.1.0/NOTICE) ·
[Licenses](https://github.com/agenticdriver/provider-icons/tree/v1.1.0/licenses)

Preserve attribution. Logos belong to their respective owners; inclusion does
not imply endorsement.