Lobe Icons
🥨 Lobe Icons - Brings AI/LLM brand logos to your React & React Native apps — static SVG/PNG/WebP, no dependencies.
Last verified:
What is Lobe Icons?
Lobe Icons is a comprehensive open-source icon library that specializes in AI and LLM (Large Language Model) brand logos and icons. It provides a growing collection of over 100 SVG logos covering major AI brands, models, and platforms such as OpenAI, Anthropic, Google, Meta, Mistral, and many more. The library transforms a single set of source SVG assets into multiple distribution formats to serve different platforms and use cases.
The tool offers React web components, React Native components, and static assets (SVG, PNG, WebP) for direct consumption. Key features include lightweight & scalable optimized SVGs, tree-shakable imports to reduce bundle size, dynamic icon resolution through ModelIcon and ProviderIcon components, and automatic asset generation through its build pipeline. Icons include both color and mono variants with official brand colors.
Lobe Icons is designed for developers building AI-related applications, including chatbot interfaces, AI dashboards, developer documentation sites, AI tool aggregators, and machine learning platforms. It is particularly useful for those building React or React Native applications that need to display AI brand logos for integrations, provider selection interfaces, or model comparison tools.
Lobe Icons pricing
Pricing model: Freemium
Lobe Icons is completely free and open-source. It is available as an npm package (@lobehub/icons) with no paid tiers or commercial licensing fees. The library can be installed via 'bun add @lobehub/icons' or 'npm i @lobehub/icons'. All icons, formats (SVG, PNG, WebP), and components are free to use in personal and commercial projects. The project is maintained by the LobeHub community and accepts contributions via GitHub.
Lobe Icons pros
- Open-source and free to use
- Over 100 AI/LLM brand icons covered
- Lightweight optimized SVG format
- Tree-shakable for minimal bundle size
- Supports both React and React Native
- Includes color and mono variants
- Official brand colors included
- Multiple format distributions (SVG, PNG, WebP)
- Active community on GitHub and Discord
- Easy installation via npm or bun
- CDN distribution for static assets
- Dynamic icon resolution via string lookup
- Standardized component patterns across brands
- Regular updates with new brands added
- Accepts community PRs for new icons
- ESM-only for modern workflows
- Built-in Next.js SSR support with transpile config
Lobe Icons cons
- ESM-only package (no CommonJS support)
- Requires transpilePackages config for Next.js SSR
- Primarily focused on AI/LLM brands only
- No built-in icon search in npm package
- Requires JavaScript/React knowledge to use
- No offline documentation included
- Brand coverage depends on community contributions
- May need manual SVG optimization for specific use cases
- React Native requires separate import path
Frequently asked questions about Lobe Icons
What is Lobe Icons?
Lobe Icons is a popular AI/LLM Model Brand SVG Logo and Icon Collection that brings AI and large language model brand logos to React and React Native applications. It provides over 100 icons covering major AI brands like OpenAI, Anthropic, Google, Meta, Mistral, and many more in optimized SVG format.
What formats are available?
Lobe Icons is distributed in multiple formats including React web components, React Native components, static SVG files, PNG images, and WebP assets. The main package @lobehub/icons provides React components, while @lobehub/icons-static-svg provides static SVG assets.
Is Lobe Icons free to use?
Yes, Lobe Icons is completely free and open-source. There are no paid plans or licensing fees. You can use it in both personal and commercial projects without any cost.
Does it support React Native?
Yes, Lobe Icons supports React Native through the @lobehub/icons-rn package. The build system automatically converts web icons to React Native format, providing consistent icon usage across both web and mobile platforms.
How do I add a new brand icon?
Contributions are welcome via GitHub. You can submit a PR to add new brand icons by following the contributing guidelines in the repository. The project maintains an active community and regularly accepts PRs for new brands.
What brands are supported?
Lobe Icons supports over 100 AI and LLM brands including OpenAI, Anthropic (Claude), Google (Gemini), Meta (Llama), Mistral, AWS (Bedrock), Azure, HuggingFace, Cohere, Groq, Perplexity, DeepSeek, Kimi, Midjourney, Stability, and many more AI platforms and models.
Are the icons tree-shakable?
Yes, Lobe Icons is fully tree-shakable. You can import individual icons or brands, and only the icons you use will be included in your bundle, helping to reduce overall bundle size.
How do I use icons in my React component?
Import specific brand icons directly (e.g., {OpenAI} from '@lobehub/icons') and use them as components <OpenAI />. You can also use ModelIcon or ProviderIcon components for dynamic string-based icon resolution.
Where can I see all available icons?
You can view all available icons at icons.lobehub.com, which displays the complete collection with color and mono variants, brand names, and official brand colors for each icon.