Provider Icon
Icons for AI providers and models, resolved by id — ProviderIcon, ModelIcon, avatars, and type icons.
A family of icon components for AI providers and models. Logos are resolved by id from the bundled /icons assets, with sensible fallbacks. ProviderIcon/ModelIcon are flat by default; the *Avatar presets are always rounded tiles. ModelIcon resolves with a priority of model icon → developer icon → provider icon.
Import
import {
ProviderIcon,
ProviderAvatar,
ModelIcon,
ModelAvatar,
ModelTypeIcon,
} from "@yuhuanowo/yunui/ai";
Provider icons
Pass a provider id (e.g. openai, anthropic, google, deepseek, mistral). Set rounded for an avatar tile, or use ProviderAvatar which is rounded by default.
Provider icons
Model icons
ModelIcon falls back through model → developer → provider. Here the developer id resolves a dedicated model-family logo. ModelAvatar is the rounded preset.
Model icons
Model type icons
ModelTypeIcon renders a colored glyph for a model's modality (chat, embedding, image_generation, tts, video, …), falling back to a generic bot icon.
Model type icons
ProviderIcon props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| iconUrl | string | null | — | Custom icon URL that overrides the built-in lookup (falls back on load error). |
| provider* | string | — | Provider id; resolved to a built-in icon by name (e.g. "openai", "anthropic"). |
| rounded | boolean | false | Render as a rounded avatar tile with a subtle background. |
| size | number | 20 | Icon size in pixels. |
ProviderAvatar props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| provider* | string | — | Provider id (resolved by name). |
| size | number | 32 | Icon size in pixels. |
ModelIcon props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| developer | string | null | — | Developer/maker id, used to resolve a developer icon (second priority). |
| iconUrl | string | null | — | Model's own icon URL or `/icons/models/` filename (highest priority). |
| provider* | string | — | Provider id, used as the final fallback icon. |
| rounded | boolean | false | Render as a rounded avatar tile with a subtle background. |
| size | number | 20 | Icon size in pixels. |
ModelAvatar props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| developer | string | null | — | Developer id (second priority). |
| iconUrl | string | null | — | Model's own icon URL or filename (highest priority). |
| provider* | string | — | Provider id (fallback). |
| size | number | 32 | Icon size in pixels. |
ModelTypeIcon props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 16 | |
| type* | string | — |