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][github-issues-link] · [Request Feature][github-issues-link]

[![][npm-release-shield]][npm-release-link] [![][vercel-shield]][vercel-link] [![][discord-shield]][discord-link] [![][npm-downloads-shield]][npm-downloads-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-test-shield]][github-action-test-link] [![][github-action-release-shield]][github-action-release-link] [![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link]

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.

![][back-to-top]

🤯 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 | [![](https://img.shields.io/npm/v/@lobehub/icons-st