lobe-icons
🥨 Lobe Icons - Brings AI/LLM brand logos to your React & React Native apps — static SVG/PNG/WebP, no dependencies.
Top Related Projects
A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
The iconic SVG, font, and CSS toolkit
SVG icons for popular brands
Quick Overview
The lobehub/lobe-icons repository is a collection of open-source icons designed for the Lobe AI platform. These icons are intended to be used in various Lobe-related projects and applications.
Pros
- Comprehensive Icon Set: The repository provides a wide range of icons covering various categories, making it a valuable resource for Lobe-based projects.
- Open-Source: The icons are licensed under the MIT license, allowing for free use, modification, and distribution.
- Consistent Design: The icons follow a cohesive design style, ensuring a visually harmonious experience across Lobe-related applications.
- Active Maintenance: The repository is actively maintained, with new icons being added and existing ones being updated regularly.
Cons
- Limited to Lobe-Specific Use: The icons are primarily designed for the Lobe AI platform and may not be suitable for use in non-Lobe-related projects.
- Potential Compatibility Issues: As the icons are designed for Lobe, they may not seamlessly integrate with other design systems or UI frameworks without additional customization.
- Lack of Detailed Documentation: The repository could benefit from more comprehensive documentation, including guidelines for usage, integration, and contribution.
- Limited Customization Options: The icons are provided in a fixed set of styles and formats, which may limit the ability to customize them to fit specific design needs.
Code Examples
Since this repository is a collection of icons and not a code library, there are no code examples to provide.
Getting Started
To use the Lobe icons in your project, follow these steps:
- Clone the
lobehub/lobe-iconsrepository to your local machine:
git clone https://github.com/lobehub/lobe-icons.git
- Navigate to the cloned repository:
cd lobe-icons
-
Explore the available icons in the
iconsdirectory. Each icon is provided in various file formats, including SVG, PNG, and EPS. -
To use an icon in your project, simply copy the desired file and include it in your codebase or design assets.
-
Refer to the repository's README file for additional information on the icon categories, naming conventions, and usage guidelines.
Competitor Comparisons
A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- Larger icon set with over 4,200 icons
- More established project with higher GitHub stars (16.5k vs 200+)
- Offers multiple file formats (SVG, React, Vue, etc.)
Cons of Tabler Icons
- Less focused on AI and tech-specific icons
- May have more unnecessary icons for specific use cases
- Potentially slower updates due to larger icon set
Code Comparison
Tabler Icons (React):
import { IconHome } from '@tabler/icons-react';
function App() {
return <IconHome size={24} color="blue" />;
}
Lobe Icons (React):
import { Home } from '@lobehub/icons';
function App() {
return <Home size={24} color="blue" />;
}
Both libraries offer similar usage patterns for React components, with minor differences in import statements and component names. Tabler Icons uses the "Icon" prefix for its components, while Lobe Icons uses the icon name directly.
Simply beautiful open-source icons
Pros of Feather
- Larger icon set with over 280 icons compared to Lobe Icons' 130+
- More established project with a longer history and larger community
- Supports multiple formats including SVG, React, and Vue components
Cons of Feather
- Less frequent updates compared to Lobe Icons
- Limited customization options for icon styles
- Lacks some modern design trends and AI-related icons found in Lobe Icons
Code Comparison
Feather (React):
import { Camera } from 'react-feather';
const MyComponent = () => (
<Camera color="red" size={48} />
);
Lobe Icons (React):
import { Camera } from '@lobehub/icons';
const MyComponent = () => (
<Camera size="large" color="red" />
);
Both libraries offer similar usage patterns, with minor differences in prop naming and available customization options. Feather uses numeric sizes, while Lobe Icons uses predefined size categories.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Larger and more established icon set with a longer history
- Officially maintained by GitHub, ensuring consistency with their platform
- Extensive documentation and usage guidelines
Cons of Octicons
- More focused on GitHub-specific use cases, potentially limiting versatility
- Less frequent updates compared to Lobe Icons
- Heavier package size due to the extensive icon set
Code Comparison
Octicons usage:
import { MarkGithubIcon } from '@primer/octicons-react'
function App() {
return <MarkGithubIcon size={24} />
}
Lobe Icons usage:
import { GithubFill } from '@lobehub/icons'
function App() {
return <GithubFill size={24} />
}
Both libraries offer similar ease of use in React applications, with straightforward import and implementation. The main difference lies in the naming conventions and the specific icons available in each set.
Octicons provides a more comprehensive set of GitHub-related icons, while Lobe Icons offers a broader range of general-purpose icons with a modern design aesthetic. The choice between the two depends on the specific needs of the project and the desired visual style.
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- Larger icon set with over 1,300 icons
- Longer development history and more established community
- Supports multiple file formats (SVG, WebFont, PNG)
Cons of Ionicons
- Larger file size due to extensive icon set
- May require more setup for custom usage
- Less focused on modern design trends
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Lobe Icons usage:
import { HeartIcon } from '@lobehub/icons'
<HeartIcon />
Summary
Ionicons offers a comprehensive icon set with broad format support, making it suitable for various projects. However, its large size and potentially complex setup may be drawbacks for some users. Lobe Icons, while newer and with a smaller icon set, focuses on modern design trends and offers simpler React integration. The choice between the two depends on project requirements, with Ionicons being more versatile and Lobe Icons being more streamlined for React applications.
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Extensive icon library with over 7,000 icons
- Well-established and widely adopted in web development
- Supports multiple file formats (SVG, webfonts, etc.)
Cons of Font-Awesome
- Larger file size due to comprehensive icon set
- Some advanced features require a paid Pro version
- Less focused on modern, minimalist design trends
Code Comparison
Font-Awesome (HTML):
<i class="fas fa-user"></i>
Lobe-icons (React):
import { User } from '@lobehub/icons'
<User />
Key Differences
- Lobe-icons focuses on AI and technology-related icons, while Font-Awesome offers a broader range of icons
- Lobe-icons is designed specifically for React applications, whereas Font-Awesome is more versatile across different frameworks
- Font-Awesome has a longer history and larger community, while Lobe-icons is newer and more niche-focused
Use Cases
Font-Awesome is ideal for:
- General-purpose web development projects
- Applications requiring a wide variety of icon styles
Lobe-icons is better suited for:
- React-based AI and tech-focused applications
- Projects needing a modern, minimalist icon set
SVG icons for popular brands
Pros of Simple Icons
- Larger collection with over 2,000 brand icons
- Longer project history and more established community
- Provides multiple file formats (SVG, PDF, EPS)
Cons of Simple Icons
- Limited to brand/company logos only
- Less customization options for icon styles
- Slower release cycle for new icons
Code Comparison
Simple Icons usage:
<img src="https://simpleicons.org/icons/github.svg" alt="GitHub Icon">
Lobe Icons usage:
import { GithubIcon } from '@lobehub/icons'
<GithubIcon size={24} />
Key Differences
- Lobe Icons focuses on AI and tech-related icons, while Simple Icons covers a broader range of brands
- Lobe Icons offers React components for easy integration, Simple Icons provides static files
- Lobe Icons allows for more customization (size, color) through props
- Simple Icons has a larger collection but slower updates, Lobe Icons is smaller but more frequently updated
Use Cases
- Choose Simple Icons for projects requiring a wide variety of brand logos
- Opt for Lobe Icons in React-based projects, especially those focused on AI and technology themes
Community and Support
- Simple Icons has a larger community and more contributors
- Lobe Icons, being newer, has a smaller but growing community
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Lobe Icons
Popular AI / LLM Model Brand SVG Logo and Icon Collection. See them all on one page at lobehub.com/icons.
Contributions, corrections & requests can be made on GitHub.
Documents · Changelog · Report Bug · Request Feature
Table of contents
TOC
ð¦ Packages
| Logo | Package | Version | Downloads | Links |
|---|---|---|---|---|
@lobehub/icons |  |  | Source | |
@lobehub/icons-rn |  |  | Source | |
@lobehub/icons-static-svg |  |  | Source | |
@lobehub/icons-static-png |  |  | Source | |
@lobehub/icons-static-webp |  |  | Source |
⨠Features
- ð Lightweight & Scalable: Icons are designed to be lightweight, utilizing highly optimized scalable vector graphics (SVG) for the best performance and quality.
- ð³ Tree Shakable: The collection is tree-shakable, ensuring that you only import the icons that you use, which helps in reducing the overall bundle size of your project.
- ð¥ Active Community: Lobe Icons boasts an active community of designers and developers. Engage with us on platforms like GitHub and Discord to contribute or get support.
Supported brands:
[!TIP]
More brands are being added, andPRwelcome.
𤯠CDN Usage
Icons can be served from a CDN such as unpkg or npmmirror (aliyun). Simply use the lobe icons npm package and specify a version in the URL like the following:
A CDN with SVG
We provide a CDN service (@lobehub/icons-static-svg) which allows you to use SVG.
<!--UNPKG-->
<img height="64" src="https://unpkg.com/@lobehub/icons-static-svg@latest/icons/[ICON SLUG].svg" />
<!--ALIYUN-->
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/[ICON SLUG].svg"
/>
Example
<!--UNPKG-->
<img height="64" src="https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg" />
<!--ALIYUN-->
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/openai.svg"
/>
<!--UNPKG-->
<img height="64" src="https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai-text.svg" />
<!--ALIYUN-->
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/openai-text.svg"
/>
B CDN with PNG
We provide a CDN service (@lobehub/icons-static-png) which allows you to use PNG.
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-png@latest/dark/[ICON SLUG].png"
/>
<img height="64" src="https://unpkg.com/@lobehub/icons-static-png@latest/light/[ICON SLUG].png" />
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/[ICON SLUG].png"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/[ICON SLUG].png"
/>
</picture>
Example
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-png@latest/dark/openai.png"
/>
<img height="64" src="https://unpkg.com/@lobehub/icons-static-png@latest/light/openai.png" />
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/openai.png"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/openai.png"
/>
</picture>
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-png@latest/dark/openai-text.png"
/>
<img height="64" src="https://unpkg.com/@lobehub/icons-static-png@latest/light/openai-text.png" />
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="
https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/openai-text.png
"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/openai-text.png"
/>
</picture>
C CDN with WEBP
We provide a CDN service (@lobehub/icons-static-webp) which allows you to use WEBP.
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-webp@latest/dark/[ICON SLUG].webp"
/>
<img
height="64"
src="https://unpkg.com/@lobehub/icons-static-webp@latest/light/[ICON SLUG].webp"
/>
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/dark/[ICON SLUG].webp"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/light/[ICON SLUG].webp"
/>
</picture>
Example
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-webp@latest/dark/openai.webp"
/>
<img height="64" src="https://unpkg.com/@lobehub/icons-static-webp@latest/light/openai.webp" />
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/dark/openai.webp"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/light/openai.webp"
/>
</picture>
<!--UNPKG-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-webp@latest/dark/openai-text.webp"
/>
<img
height="64"
src="https://unpkg.com/@lobehub/icons-static-webp@latest/light/openai-text.webp"
/>
</picture>
<!--ALIYUN-->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="
https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/dark/openai-text.webp
"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/light/openai-text.webp"
/>
</picture>
Static Packages
| Package | FileType | Version |
|---|---|---|
| @lobehub/icons-static-svg | SVG |  |
| @lobehub/icons-static-png | PNG |  |
| @lobehub/icons-static-webp | WEBP |  |
ð¦ Installation
[!IMPORTANT]
This package is ESM only.
To install Lobe UI, run the following command:
$ bun add @lobehub/icons
Compile with NextJS
[!NOTE]
By work correct with nextjs ssr, addtranspilePackages: ['@lobehub/icons']tonext.config.js. For example:
// next.config.js
const nextConfig = {
// ...other config
transpilePackages: ['@lobehub/icons'],
};
â¨ï¸ 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
More Products
- 𤯠Lobe Chat - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
- ð °ï¸ Lobe Theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
- 𧸠Lobe Vidol - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.
Design Resources
- ð Lobe UI - An open-source UI component library for building AIGC web apps.
- 𥨠Lobe Icons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
- ð Lobe Charts - React modern charts components built on recharts
Development Resources
- ð¤ Lobe TTS - A high-quality & reliable TTS/STT library for Server and Browser
- ð Lobe i18n - Automation ai tool for the i18n (internationalization) translation process.
ð License
Top Related Projects
A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
The iconic SVG, font, and CSS toolkit
SVG icons for popular brands
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot