Model Icon
ngx-prompt-kit original — not part of ibelick/prompt-kit
A monochrome icon for every OpenRouter vendor, copied into your app by the schematic and served with it, so no icon is fetched from a third party. providerIconUrl() and makerIconUrl() turn a model id into its icon's URL for pk-model-selector (iconUrl, makerIconUrl) and pk-model-browser (iconUrl). Vendors without an icon get a neutral box. The set also has an icon per inference provider (Groq, Azure, Bedrock, Ollama, ...), which iconUrl() resolves by file name.
Examples
Every bundled icon
One SVG per vendor slug (the part of the model id before the slash), plus gemma and the unknown fallback. They are black on transparent: render them with dark:invert, as in the dark panel.
aion-labs
amazon
anthracite-org
anthropic
arcee-ai
baidu
bytedance
bytedance-seed
cognitivecomputations
cohere
deepseek
dots-studio
fireworks
google
gryphe
ibm-granite
inception
inclusionai
inference-net
kwaipilot
liquid
mancer
meituan
meta
meta-llama
microsoft
minimax
mistralai
moonshotai
morph
nex-agi
nousresearch
nvidia
openai
openrouter
perceptron
perplexity
poolside
prism-ml
qwen
rekaai
relace
sakana
sao10k
stealth
stepfun
tencent
thedrummer
thinkingmachines
typesafe
unbiased
undi95
upstage
writer
x-ai
xiaomi
z-ai
gemma
unknownaion-labsamazonanthracite-organthropicarcee-aibaidubytedancebytedance-seedcognitivecomputationscoheredeepseekdots-studiofireworksgooglegrypheibm-graniteinceptioninclusionaiinference-netkwaipilotliquidmancermeituanmetameta-llamamicrosoftminimaxmistralaimoonshotaimorphnex-aginousresearchnvidiaopenaiopenrouterperceptronperplexitypoolsideprism-mlqwenrekaairelacesakanasao10kstealthstepfuntencentthedrummerthinkingmachinestypesafeunbiasedundi95upstagewriterx-aixiaomiz-aigemmaunknown<img [src]="providerIconUrl(model)" alt="" class="size-4 dark:invert" />Model id → icon
providerIconUrl gives Gemma its own icon under Google; makerIconUrl always gives the vendor's, which is what the selector's maker rail shows. The ~vendor alias form resolves like the vendor; an unknown vendor gets the box.
openai/gpt-5anthropic/claude-sonnet-5.5~anthropic/claude-opus-5.5google/gemini-3-progoogle/gemma-3-27b-itmeta-llama/llama-4-maverickmistralai/mistral-largedeepseek/deepseek-v4x-ai/grok-5somevendor/mystery-modelimport { makerIconUrl, providerIconUrl } from 'ngx-prompt-kit/model-icon';
// pk-model-selector: the row icon, and the maker's own icon for the rail
const models: SelectorModel[] = apiModels.map((m) => ({
...m,
iconUrl: providerIconUrl(m),
makerIconUrl: makerIconUrl(m),
}));
// pk-model-browser
const browserModels = apiModels.map((m) => ({ ...m, iconUrl: providerIconUrl(m) }));Provider icons
The platforms that serve models: clouds, hosted inference, local runtimes and speech or embedding APIs. They are not keyed by model id, so iconUrl(name) takes the file name. It does not check the file exists; these are the names in the set.
ai21
akashml
aleph-alpha
alibaba-cloud
assemblyai
atlascloud
aws
azure-ai
azure
baidu-cloud
baseten
bedrock
cerebras
chutes
cloudflare
coreweave
crusoe
decart
deepgram
deepinfra
digitalocean
elevenlabs
featherless
fishaudio
friendli
github
glama
gmicloud
google-ai-studio
groq
huggingface
hyperbolic
ibm
inceptron
infermatic
infomaniak
ionet
ionos
jina
kluster
lambda
llama-cpp
lmstudio
localai
modal
nebius
nextbit
novita
ollama
open-inference
ovhcloud
parasail
phala
prime-intellect
replicate
sail-research
sambanova
scaleway
siliconflow
snowflake
streamlake
targon
tencent-cloud
together
venice
vercel
vertex-ai
vllm
voyage
wafer
workers-ai
xinference
zenmuxai21akashmlaleph-alphaalibaba-cloudassemblyaiatlascloudawsazure-aiazurebaidu-cloudbasetenbedrockcerebraschutescloudflarecoreweavecrusoedecartdeepgramdeepinfradigitaloceanelevenlabsfeatherlessfishaudiofriendligithubglamagmicloudgoogle-ai-studiogroqhuggingfacehyperbolicibminceptroninfermaticinfomaniakionetionosjinaklusterlambdallama-cpplmstudiolocalaimodalnebiusnextbitnovitaollamaopen-inferenceovhcloudparasailphalaprime-intellectreplicatesail-researchsambanovascalewaysiliconflowsnowflakestreamlaketargontencent-cloudtogethervenicevercelvertex-aivllmvoyagewaferworkers-aixinferencezenmuximport { iconUrl } from 'ngx-prompt-kit/model-icon';
// The platform serving the model, next to its maker's icon
const servedBy = { name: 'Groq', iconUrl: iconUrl('groq') }; // /model-icons/groq.svgInstallation
Adds the helpers to your components folder and copies the icons, with SOURCES.md, to public/model-icons. Pass --assets-path to put them in another folder your app serves; the helpers' URLs follow it (src/assets/model-icons is served at /assets/model-icons).
ng generate ngx-prompt-kit:model-icon
# or into another static folder
ng generate ngx-prompt-kit:model-icon --assets-path=src/assets/model-iconsWhere each icon comes from and its licence is listed in SOURCES.md, which is copied next to the icons. Most are LobeHub's (MIT), a few Simple Icons' (CC0); every logo stays a trademark of its owner and only labels that owner's models or service.
Component API
model-icon
| Prop | Type | Default | Description |
|---|---|---|---|
| providerIconUrl(model) | ({ id, provider? }) => string | — | The model's icon: its vendor's, or Gemma's for Google's Gemma models. The vendor is the part of the id before the slash (a leading ~ is dropped), or provider when the id has none. |
| makerIconUrl(model) | ({ id, provider? }) => string | — | The vendor's own icon, without sub-brands; for pk-model-selector's maker rail. |
| iconUrl(name) | (name: string) => string | — | The icon with this file name, without .svg: for inference providers (groq, azure, ollama, ...), which are not keyed by model id. Follows assetsPath like the others; does not check the file exists. |
| VENDORS | ReadonlySet<string> | — | The vendor slugs that have an icon. Anything else resolves to unknown.svg. |
| modelIconUrl(model) | ({ id, provider? }) => string | — | Deprecated alias of providerIconUrl, kept for existing callers. |