LobeHub Icons

340+ AI model and provider logos, ready for React, React Native, or as static SVG / PNG / WEBP.

Documents · Changelog · Report Bug · Request Feature

TOC

• 💡 Why Lobe Icons?
• 🚀 Getting Started
• 🤖 AI-Powered Development
• ✨ Icon Showcase
• 📦 Packages
• 📖 Documentation
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 Links

💡 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-4o or openai and 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.md and llms.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 in light / dark folders, e.g. https://unpkg.com/@lobehub/icons-static-png@latest/dark/openai.png, and npmmirror works as a mirror. In React, build these URLs with getLobeIconCDN.
• React Native / Expo: npm i @lobehub/icons-rn react-native-svg, see the package README.
• Vue 3: npm i @lobehub/icons-vue, 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:

This is the beginning of the README. Read the rest at the original. Read the full README ↗