@lobehub/icons

Lobe Icons

Popular AI / LLM Model Brand SVG Logo and Icon Collection. See them all on one page at icons.lobehub.com.
Contributions, corrections & requests can be made on GitHub.

Changelog · Report Bug · Request Feature

Table of contents

TOC

• ✨ Features
• 🤯 CDN Usage
  • A CDN with SVG
  • B CDN with PNG
  • C CDN with WEBP
  • Static Packages
• 📦 Installation
  • Compile with NextJS
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 More Products

✨ 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:

Model	Provider	Application
AI21	01.AI	Adobe
Aya	AI360	Automatic
Baichuan	AiMass	AdobeFirefly
ChatGLM	Alibaba	GithubCopilot
Claude	AntGroup	Colab
CodeGeeX	Anthropic	Kling
CogVideo	AWS	Langfuse
CogView	Baidu	Luma
DALL-E	BaiduCloud	Bing
DBRX	Bedrock	Copilot
DeepSeek	ByteDance	Midjourney
Doubao	Cloudflare	Nvidia
FishAudio	Cohere	Pollinations
Flux	DeepMind	Qingyan
Gemini	Fireworks	Runway
Gemma	GiteeAI	Suno
Grok	Github	Viggle
Hunyuan	Google	Zeabur
LLaVA	Groq
Magic	Higress
Minimax	HuggingFace
Mistral	InternLM
OpenChat	LM Studio
PaLM	LobeHub
Qwen	Meta
RWKV	Azure
Spark	MoonshotAI
Stepfun	novita.ai
Wenxin	Ollama
Yi	OpenAI
	OpenRouter
	Perplexity
	Replicate
	SenseNova
	SiliconCloud
	Stability
	Tencent
	together.ai
	Upsate
	VertexAI
	vLLM
	WorkersAI
	Grok
	Zhipu

[!TIP]
More brands are being added, and PR welcome.

🤯 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, add transpilePackages: ['@lobehub/icons'] to next.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.

🔗 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 i18n : Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
• 💌 Lobe Commit : Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.

---

📝 License

Copyright © 2023 LobeHub.
This project is MIT licensed.