🥨 Lobe Icons - Brings AI/LLM brand logos to your React & React Native apps — static SVG/PNG/WebP, no dependencies.
Lobe Icons
Every AI Brand, One Icon Set
340+ AI model and provider logos, ready for React, React Native, or as static SVG / PNG / WEBP.
Documents · Changelog · Report Bug · Request Feature
Table of contents
TOC
💡 Why Lobe Icons?
The logos of the AI world, ready to drop into your app: 300+ AI / LLM model, provider and application brands.
- Every AI brand you need: Models, providers and AI apps in one place, kept up to date.
- Looks right everywhere: Mono, color, text and avatar styles that fit light and dark themes.
- Logo from an id: Pass a model or provider id like
gpt-4ooropenaiand get the right logo. - Small bundles: Import only the brands you use.
- Use it anywhere: React, React Native, or plain image URLs from a CDN.
- AI-native: Your coding agent can learn it on its own from
skills.mdandllms.txt.
🚀 Getting Started
npm i @lobehub/icons @lobehub/ui
@lobehub/ui is a peer dependency, and React 19 (react / react-dom) is required.
import { Claude, ModelIcon } from '@lobehub/icons';
export default () => (
<>
<Claude.Color size={48} />
<ModelIcon model="gpt-4o" size={48} />
</>
);
Browse every brand and variant in the documentation.
Other ways to use it:
- CDN / plain HTML:
<img src="https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg" />. PNG and WEBP come inlight/darkfolders, e.g.https://unpkg.com/@lobehub/icons-static-png@latest/dark/openai.png, and npmmirror works as a mirror. In React, build these URLs withgetLobeIconCDN. - React Native / Expo:
npm i @lobehub/icons-rn react-native-svg, see the package README.
🤖 AI-Powered Development
Copy this prompt to your coding agent (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, ...):
Read https://icons.lobehub.com/skills.md and follow the instructions to use @lobehub/icons
| Resource | Link | What it is |
|---|---|---|
| Agent Skills | icons.lobehub.com/skills.md | Skill entry point: setup, workflow and an index of every guide and brand reference. |
| llms.txt | icons.lobehub.com/llms.txt | Page index for llms.txt-aware tools, each entry linking to a markdown reference. |
| Skill file | lobehub.com/icons/skill.md | Standalone skill with steps to save it into your agent's skills directory. |
✨ Icon Showcase
Supported brands:
[!TIP]
More brands are being added, andPRwelcome.
📦 Packages
| Package | Use it for | Version |
|---|---|---|
| @lobehub/icons | React components |  |
| @lobehub/icons-rn | React Native / Expo |  |
| @lobehub/icons-static-svg | SVG files / CDN |  |
| @lobehub/icons-static-png | PNG files / CDN (light & dark) |  |
| @lobehub/icons-static-webp | WEBP files / CDN (light & dark) |  |
| @lobehub/icons-static-avatar | Avatar images (WEBP) / CDN |  |
📖 Documentation
- Docs & live demos: icons.lobehub.com
- Browse all icons: lobehub.com/icons
- For agents: skills.md · llms.txt
- Changelog: CHANGELOG.md
⌨️ Local Development
You can use Github Codespaces for online development:
Or clone it for local development:
$ git clone https://github.com/lobehub/lobe-icons.git
$ cd lobe-icons
$ bun install
$ bun start
🤝 Contributing
Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.
🩷 Sponsor
Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
🔗 Links
- 🍭 Lobe UI - React component library for AI apps
- 🥨 Lobe Icons - AI / LLM brand logos and icon library
- 📊 Lobe Charts - React chart components
- ✒️ Lobe Editor - Lexical-based rich text editor for React, with Markdown, plugins and a chat composer
- 🎤 Lobe TTS - TTS / STT speech library
- 📐 Lobe Lint - ESLint, Prettier, Stylelint, Commitlint and more lint configs
- 😀 Fluent Emoji - Fluent Emoji assets