Model Icon

Grayscale provider logos for the model list.

import { Card } from "@/components/ui/card";

import { PerplexityModelIcon } from "../components/perplexity-model-icon";
import type { PerplexityModelProvider } from "../types/perplexity";

const PROVIDERS: PerplexityModelProvider[] = [
  "perplexity",
  "openai",
  "google",
  "anthropic",
  "kimi",
  "zhipu",
  "xai",
  "nvidia",
];

export default function PerplexityModelIconExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-row items-center justify-center gap-4 rounded-2xl p-6">
      {PROVIDERS.map((provider) => (
        <PerplexityModelIcon
          aria-label={provider}
          key={provider}
          provider={provider}
          role="img"
        />
      ))}
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-model-icon

provider is one of perplexity, openai, google, anthropic, kimi, zhipu, xai or nvidia. Logos render at 16px in grayscale, like Perplexity’s menu. The inline SVGs live in perplexity-icons.tsx.

Used in

Perplexity

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.