Popular AI / LLM Model Brand SVG Logo and Icon Collection for React.
Contributions, corrections & requests can be made on GitHub.
[ailogo.yldm.ai][site-link] — browse all 1298 marks, every variant, in 11 languages.
[Website][site-link] · Changelog · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
[![][npm-release-shield]][npm-release-link]
[![][npm-downloads-shield]][npm-downloads-link]
[![][github-releasedate-shield]][github-releasedate-link]
[![][github-action-test-shield]][github-action-test-link]
[![][github-action-release-shield]][github-action-release-link]
[![][github-contributors-shield]][github-contributors-link]
[![][github-forks-shield]][github-forks-link]
[![][github-stars-shield]][github-stars-link]
[![][github-issues-shield]][github-issues-link]
[![][github-license-shield]][github-license-link]
The brand logos in this collection are trademarks of their respective owners. They are included for identification purposes; inclusion does not imply any affiliation or endorsement.
Table of contents
Send this prompt to your agent to use ai-logo
Read https://github.com/yldm-tech/ai-logo/blob/main/README.md and follow the instructions to use @yldm-tech/ai-logo.Install @yldm-tech/ai-logo and start using the icon set.
| Package manager | Command |
|---|---|
| npm | npm i @yldm-tech/ai-logo |
| pnpm | pnpm add @yldm-tech/ai-logo |
| yarn | yarn add @yldm-tech/ai-logo |
| bun | bun add @yldm-tech/ai-logo |
The unscoped name ai-logo also works. It is an alias: a few hundred bytes that re-export @yldm-tech/ai-logo and depend on it at the matching version, so installing it pulls in the real package and import { OpenAI } from "ai-logo" resolves as it reads. Prefer the scoped name in new code — it is the one that is built and released, and the one the documentation uses. Install one, not both.
react, react-dom and antd are peer dependencies. npm 7+, pnpm 8+ and bun install those for you; Yarn Classic does not, so install them alongside:
yarn add react react-dom antdantd is needed because ModelTag renders an antd Tag and antd-style — a runtime dependency of this package — declares antd as its own peer. Nothing else is required: the layout and icon wrappers the components use are part of this package.
Import a brand directly when you know which one you need. Every icon is a compound component: the default export is the mono mark, with .Color, .Text, .Avatar, .Combine and the rest attached when that brand has them.
import { Claude } from "@yldm-tech/ai-logo";
<Claude size={24} />
<Claude.Color size={24} />
<Claude.Combine size={24} type="color" />
<Claude.Avatar size={40} shape="circle" />;Which subcomponents a brand has varies, and the type definitions are the contract: a monochrome brand has no .Color, and a .Combine built on a brand without one takes no type prop. OpenAI, for instance, ships .Text, .Combine and .Avatar but no .Color, so <OpenAI.Color /> does not exist. Check src/<Brand>/index.ts for what is attached, or see every variant rendered on [the website][site-link].
When the brand is only known at runtime — a provider id from an API, a model name from a config — use the lookup components instead. They take an arbitrary string and fall back to a neutral icon when nothing matches:
import { AgentIcon, ModelIcon, ProviderIcon } from "@yldm-tech/ai-logo";
<ProviderIcon provider="anthropic" size={24} type="color" />
<ModelIcon model="claude-sonnet-4" size={24} type="avatar" />
<AgentIcon agent="cursor" size={24} />;These carry their whole mapping table, so prefer the direct import where you can — see the bundle-size note under Features.
toc is exported too, if you want to enumerate the set:
import { toc } from "@yldm-tech/ai-logo";
toc.map((entry) => entry.id); // "OpenAI", "Anthropic", …| Logo | Package | Version | Downloads | Links |
|---|---|---|---|---|
 |
@yldm-tech/ai-logo |
 |
 |
Source |
|
ai-logo (alias) |
 |
 |
Source |
Four more packages carry the rendered files rather than React components. They have no code, no dependencies and no build — just the images, published at the same version as @yldm-tech/ai-logo so the whole set can be pinned together. Install one when you want the assets on disk; reach for CDN Usage when you do not.
| Package | Version | Downloads | Contents |
|---|---|---|---|
@yldm-tech/ai-logo-static-svg |
 |
 |
icons/ — one SVG per icon and per variant |
@yldm-tech/ai-logo-static-png |
 |
 |
light/ and dark/ PNG renders |
@yldm-tech/ai-logo-static-webp |
 |
 |
light/ and dark/ WebP renders, the smallest of the three |
@yldm-tech/ai-logo-static-avatar |
 |
 |
avatars/ — one square WebP avatar per icon |
The same files live in this repository under packages/static-*, which is what the CDN paths below and getLobeIconCDN's jsDelivr and unpkg hosts resolve to.
A fifth package, @yldm-tech/ai-logo-rn, ports the icons to react-native-svg and lives under packages/react-native. It is private and not published — see its README for why and for what using it today involves.
[ailogo.yldm.ai][site-link] is the fastest way to find an icon and to see what it actually ships.
Search the whole set or filter it by model, provider and application, then open any mark to get its variants rendered side by side — each one labelled with the JSX that produces it, so <Claude.Combine /> existing and <OpenAI.Color /> not existing is something you can see rather than infer. The panel also carries the brand's primary colour, the import line with a copy button, and direct links to the SVG, PNG, WebP and avatar renders of that icon.
The site is translated into 11 languages — English, Simplified and Traditional Chinese, Japanese, Korean, Spanish, French, German, Portuguese, Russian and Arabic, which lays out right-to-left — and any of them can be linked directly with ?lang=, as in ailogo.yldm.ai/?lang=ja. It is prerendered and served from GitHub Pages. It is also this repository's consumer smoke test: it imports @yldm-tech/ai-logo through node_modules the way a published dependency resolves, and carries the bundle budgets, so the published surface cannot break without a CI failure.
- 🚀 Lightweight & Scalable: Icons are designed to be lightweight, utilizing highly optimized scalable vector graphics (SVG) for the best performance and quality.
- 🌳 Tree Shakable: Importing a brand directly —
import { OpenAI } from "@yldm-tech/ai-logo"— pulls in that brand and nothing else, around 216 kB against the full set. The lookup components are the exception:ProviderIcon,ModelIconandAgentIconresolve an arbitrary id string at runtime, so they necessarily carry their whole mapping table and cost roughly 1.7 MB. Reach for them when the id is dynamic, and for the brand export when it is not. Both sizes are pinned by a budget inapps/site/treeshake. - 🎨 Every Major Model: 1298 brands — AI companies, models and applications, plus mainstream services beyond AI: social networks, developer tools, productivity apps, media, gaming, payments, commerce, travel, hardware and automotive. Every one ships a mono mark, and most add some combination of color, text, combined and avatar variants — which ones a given brand has is listed on [the website][site-link] and attached in
src/<Brand>/index.ts. The non-AI services are ported from Simple Icons and ship mono, color and avatar variants; see THIRD_PARTY_NOTICES.md for their licensing.
Supported brands:
