Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@lobehub/icons
Advanced tools
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
✨ 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
<sup>Released on 2025-01-28</sup>
✨ Features
- auto: Auto build static icons.
What's improved
- auto: Auto build static icons (88f6d4d)
FAQs
Popular AI / LLM Model Brand SVG Logo and Icon Collection
The npm package @lobehub/icons receives a total of 865 weekly downloads. As such, @lobehub/icons popularity was classified as not popular.
We found that @lobehub/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 28 Jan 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025