# Lobe Icons: AI and LLM brand logos as React components, static SVG and PNG

> Lobe Icons packages AI and LLM brand marks for React, React Native and plain static files, with no runtime dependencies. The interesting part is the packaging split, not the artwork.

**lobehub/lobe-icons** — 🥨 Lobe Icons - Brings AI/LLM brand logos to your React & React Native apps — static SVG/PNG/WebP, no dependencies.

- Repository: https://github.com/lobehub/lobe-icons
- Website: https://icons.lobehub.com
- Stars: 2,553 · Forks: 262
- Language: TypeScript
- License: MIT
- Published: 2026-09-09 · Updated: 2026-09-09 · Language: en
- Canonical page: https://hysenlabs.com/projects/lobehub-lobe-icons

## The problem Lobe Icons solves for model-picker UIs

Any product that lets a user choose a model or a provider eventually needs a row of small brand marks: OpenAI, Claude, Gemini, Mistral, and whatever shipped last week. Collecting those by hand means downloading SVGs from a dozen marketing sites, normalising their viewBoxes, and redoing the work every time a brand refreshes its logo. Lobe Icons exists to move that chore into a versioned npm dependency.

The audience is narrow and specific. It is front-end engineers building chat clients, agent dashboards, model routers and comparison pages, mostly in React. The repository is a TypeScript monorepo, and the README describes the collection as "Popular AI / LLM Model Brand SVG Logo and Icon Collection". If your product never renders a model name next to a logo, this package has nothing for you.

## Six packages, one artwork source

The mechanism is a build pipeline rather than a runtime library. Artwork lives in src/, and scripts published in package.json generate the other formats: build:toc regenerates the table of contents, build:static installs Chrome through Puppeteer and runs scripts/svgWorkflow/index.tsx, and build:rn converts web icons for React Native through scripts/rn-conversion/auto-converter.ts. The static PNG and WebP packages are therefore rendered from the same vector source, not drawn separately.

The README's Packages table lists six published artifacts: @lobehub/icons for React, @lobehub/icons-rn for React Native, and four static packages (@lobehub/icons-static-svg, @lobehub/icons-static-png, @lobehub/icons-static-webp and @lobehub/icons-static-avatar). The main package declares sideEffects as false, which is what makes bundlers drop the icons you never import. That flag is the practical difference between importing one logo and shipping the whole catalogue.

One detail in that table deserves suspicion. Its npm link for @lobehub/icons points at the @lobehub/icons-static-svg package page, which looks like a copy-paste error in the README rather than a real redirect. Check npm directly before you assume which artifact a name resolves to.

## Installing @lobehub/icons and getting a first logo on screen

The README gives a single install command, and it is the only code the README prints for the React package. Run it in your project root:

```bash
npm i @lobehub/icons
```

The README does not print a component usage example, so this article will not invent one. Read the docs at icons.lobehub.com for the export names and props, and check es/index.d.ts in the installed package, since package.json points types at es/index.d.ts. The README does state that the icons are tree shakable, so importing one component should not pull the rest into your bundle.

If you would rather not add a dependency at all, the CDN section documents three direct-link routes, one each for SVG, PNG and WebP, plus a set of static packages for teams that want files on disk. The README also offers an agent-oriented path, and this is the exact prompt it gives:

```bash
Read https://lobehub.com/icons/skill.md and follow the instructions to use @lobehub/icons
```

## Where Lobe Icons stops being the right tool

The catalogue is AI and LLM brands. It is not a general icon set, so the moment your interface needs a settings gear, a trash can or a chevron, you are back to another library and now you are maintaining two visual languages side by side.

The heavier limitation is legal rather than technical. The repository is MIT, but MIT covers the code and the packaging, not the trademarks. A brand mark belongs to the company that owns it, and those companies publish their own rules about colour, clear space and permitted contexts. Lobe Icons does not grant you permission to use a logo, and nothing in the repository can. If your use is commercial, in an app store listing, or implies endorsement, the brand's own guidelines are the document that matters, not this package's licence file.

There is also a currency question. Brand marks change when companies rebrand, and a package can only carry what has been contributed and merged. The README states that contributions, corrections and requests go through GitHub, which is the honest description of how coverage improves: someone notices a missing or outdated mark and files it.

## Lobe Icons versus react-icons and hand-managed SVG files

The obvious alternative is react-icons, which wraps many upstream icon sets into React components and covers far more ground: interface glyphs, file types, general-purpose symbols. If you need one library for everything, react-icons is the broader choice, and it includes some brand sets.

The difference is curation and packaging. react-icons aggregates existing icon projects; Lobe Icons maintains a single catalogue aimed at one subject, and then renders that catalogue into several delivery formats from one source, including a React Native package and static PNG, WebP and avatar packages. If your stack includes a mobile app or a marketing site that needs raster files, that fan-out is the reason to pick it. If you only need a handful of marks and already have them, a local SVG folder with a small wrapper component has no dependency to upgrade, no version to track and no tree-shaking question. That is a legitimate answer, and for two or three logos it is usually the better one.

## Upgrades, licence and the cost of keeping marks current

Versioning is the maintenance surface. The repository published v5.18.0, v5.17.0 and v5.16.2 on 2026-09-05, with the last push to the repository on the same day, so releases are frequent and the version number moves quickly. Frequent minor releases are good for coverage and annoying for lockfiles: a Renovate or Dependabot PR will arrive regularly, and each one needs a visual check that a mark you depend on has not been redrawn.

The repository ships a compatibility.json file, which is the first thing to read before upgrading a major version, and a CHANGELOG.md at the root. Because sideEffects is false, an unused icon should fall out of the bundle, so the upgrade risk is mostly visual rather than a bundle-size regression.

On licensing: the package is MIT, which is permissive for the code. That does not extend to the logos. The repository does not contain per-brand licence metadata that would let you audit usage rights automatically, so if your legal review needs that, you will be checking each brand's guidelines by hand.

## Conclusion

Adopt Lobe Icons if you are building a React or React Native interface that lists models or providers and you want the marks to come from one versioned package instead of a folder of hand-downloaded files. Do not adopt it if you need icons outside the AI and LLM brand set, or if you cannot accept that each brand's usage terms sit with the brand and not with this MIT repository. Before wiring it in, check compatibility.json for your React version, confirm on npm which artifact each package name resolves to (the README's own Packages table links @lobehub/icons to the @lobehub/icons-static-svg npm page), and read the licence file shipped inside the package you install.

## FAQ

### What is an icon in a logo, and how does Lobe Icons treat that distinction?

In Lobe Icons the distinction is packaging rather than artwork. The static packages ship rendered files (SVG, PNG, WebP and avatar), while @lobehub/icons ships React components built from the same source artwork, so the vector original is the same and only the delivery format changes.

### What is the AI icons logo collection in Lobe Icons?

It is the catalogue of AI and LLM model brand marks that the README describes as a popular AI / LLM model brand SVG logo and icon collection, browsable on one page at lobehub.com/icons. The packages ship those marks as React components and as static SVG, PNG, WebP and avatar files.

### What is the difference between an image and an icon in Lobe Icons?

The README separates the two by delivery format: the static packages give you image files (SVG, PNG, WebP, avatar) for direct use, while @lobehub/icons gives you components that render the artwork inside a React tree. Both come from the same source vector.

### How does Lobe Icons create a vector icon?

The README does not document the authoring process for a new mark. What the repository does show is the build side: build:static runs scripts/svgWorkflow/index.tsx to render the static packages, and build:rn converts web icons for React Native through scripts/rn-conversion/auto-converter.ts.

## Sources

- [License: MIT](https://github.com/lobehub/lobe-icons/blob/master/LICENSE)
- [lobehub/lobe-icons on GitHub](https://github.com/lobehub/lobe-icons)
- [Project website](https://icons.lobehub.com)
- [README](https://github.com/lobehub/lobe-icons/blob/master/README.md)
- [Releases](https://github.com/lobehub/lobe-icons/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lobehub-lobe-icons