` attrs.\n\n`IconCombine` props: `size`, `Icon`, `Text`, `spaceMultiple`, `textMultiple`, `extra`, `inverse` (text-first), `showLogo`, `showText`.\n\n---\n\n## Brand metadata (titles, colors)\n\nEvery brand exposes its display title and primary brand color as static properties:\n\n```tsx\nimport { OpenAI, Anthropic, Gemini } from 'modelicons';\n\nOpenAI.title // \"OpenAI\"\nOpenAI.colorPrimary // \"#000\"\nAnthropic.title // \"Anthropic\"\nAnthropic.colorPrimary // \"#F1F0E8\"\n```\n\nSome brands include extras (model-specific colors, alternate marks):\n\n```tsx\nOpenAI.colorGpt3 // \"#19C37D\"\nOpenAI.colorGpt4 // \"#AB68FF\"\nOpenAI.colorGpt5 // \"#F86AA4\"\nOpenAI.colorO1 // \"#F9C322\"\n```\n\nInspect any brand in DevTools or via `Object.keys(OpenAI)` to discover what's available.\n\n---\n\n## Bundle cost reference\n\nMeasured with esbuild + minify + gzip against a real npm install:\n\n| Usage | minified | gzipped |\n|---|---|---|\n| `import { OpenAI } from 'modelicons'` | 5.9 KB | 2.8 KB |\n| `import OpenAI from 'modelicons/OpenAI'` (subpath) | 5.9 KB | 2.8 KB |\n| Brand with gradients (e.g. `Gemini`) | 8.8 KB | 2.9 KB |\n| 3 brands | 17.7 KB | 6.6 KB |\n| 10 brands | 59 KB | 20 KB |\n| 30 brands | 195 KB | **59 KB** |\n| All 301 brands | 2.4 MB | 775 KB |\n| `import { ProviderIcon }` (full registry) | 1.6 MB | 485 KB |\n\nIn **Next.js Server Components**, any number of brands costs **0 KB of client JavaScript** — the SVGs ship as HTML.\n\n---\n\n## TypeScript\n\nAll types are bundled. Per-brand prop types are accessible:\n\n```ts\nimport type { IconType, IconAvatarProps, IconCombineProps } from 'modelicons';\n\ninterface MyButtonProps {\n Icon: IconType;\n size?: number;\n}\n```\n\n`IconType` is the `forwardRef`-wrapped SVG component shape used by all brand mono/color/text variants.\n\n---\n\n## Common recipes\n\n### Model badge (LLM provider chip)\n\n```tsx\nimport { OpenAI, Anthropic, Gemini, DeepSeek } from 'modelicons';\n\nconst PROVIDER_ICONS = {\n openai: OpenAI, anthropic: Anthropic, gemini: Gemini, deepseek: DeepSeek,\n} as const;\n\nexport function ModelBadge({ provider }: { provider: keyof typeof PROVIDER_ICONS }) {\n const Icon = PROVIDER_ICONS[provider];\n return (\n
\n \n {Icon.title}\n \n );\n}\n```\n\n### Stream-message indicator\n\n```tsx\nimport { Anthropic } from 'modelicons';\n\nexport function StreamingIndicator() {\n return (\n
\n );\n}\n```\n\n### Themed avatar (uses brand's own color)\n\n```tsx\nimport { OpenAI, IconAvatar } from 'modelicons';\n\n
\n```\n\n### Tailwind class pass-through\n\n```tsx\n\n```\n\nTailwind's text color applies because the icon uses `fill=\"currentColor\"`.\n\n### Animated provider switcher (lazy registry)\n\n```tsx\n'use client';\nimport { lazy, Suspense, useState } from 'react';\nconst ProviderIcon = lazy(() => import('modelicons').then((m) => ({ default: m.ProviderIcon })));\n\nconst PROVIDERS = ['openai', 'anthropic', 'gemini', 'deepseek', 'cohere', 'mistral'];\n\nexport function ProviderCarousel() {\n const [i, setI] = useState(0);\n return (\n setI((i + 1) % PROVIDERS.length)} style={{ cursor: 'pointer' }}>\n
}>\n
\n \n