JSPM

@lobehub/icons

1.43.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 82379
  • Score
    100M100P100Q156143F
  • License MIT

Popular AI / LLM Model Brand SVG Logo and Icon Collection

Package Exports

  • @lobehub/icons
  • @lobehub/icons/es/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lobehub/icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

  • ๐Ÿš€ 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
โœ… Ai21Labs (Jamba)
โœ… Aya (Cohere)
โœ… Baichuan (็™พๅท)
โœ… ChatGLM (ๆ™บ่ฐฑ)
โœ… Claude
โœ… CodeGeeX
โœ… CogVideo
โœ… CogView
โœ… DALLยทE (OpenAI)
โœ… DBRX (Databricks)
โœ… DeepSeek
โœ… Doubao (่ฑ†ๅŒ…)
โœ… FishAudio (Bert)
โœ… Flux (black forest labs)
โœ… Gemini (Google)
โœ… Gemma (Google)
โœ… Grok (xAI)
โœ… Hunyuan (่…พ่ฎฏๆททๅ…ƒ)
โœ… LLaVA
โœ… Magic
โœ… Minimax
โœ… Mistral
โœ… OpenChat
โœ… PaLM (Google)
โœ… Qwen (ๅƒ้—ฎ)
โœ… RWKV
โœ… Spark (่ฎฏ้ฃžๆ˜Ÿ็ซ)
โœ… Stepfun (้˜ถ่ทƒๆ˜Ÿ่พฐ)
โœ… Wenxin (ๆ–‡ๅฟƒ)
โœ… Yi (้›ถไธ€ไธ‡็‰ฉ)		 โœ… 01.AI (้›ถไธ€ไธ‡็‰ฉ)
โœ… Ai360 (360 ๆ™บ่„‘)
โœ… AiMass (็ดซไธœๅคชๅˆ)
โœ… Alibaba
โœ… AntGroup
โœ… Anthropic
โœ… AWS
โœ… Baidu
โœ… BaiduCloud (็™พๅบฆๆ™บ่ƒฝไบ‘)
โœ… Bedrock (AWS)
โœ… ByteDance
โœ… Cloudflare
โœ… Cohere (Command)
โœ… DeepMind (Google)
โœ… Fireworks
โœ… GiteeAI
โœ… Github
โœ… Google
โœ… Groq
โœ… Higress
โœ… HuggingFace
โœ… InternLM
โœ… LM Studio
โœ… LobeHub
โœ… Meta
โœ… Microsoft (Azure)
โœ… Moonshot (ๆœˆไน‹ๆš—้ข)
โœ… Novita
โœ… Ollama
โœ… OpenAI (ChatGPT)
โœ… OpenRouter
โœ… Perplexity
โœ… Replicate
โœ… SenseNova
โœ… SiliconCloud (SiliconFlow)
โœ… Stability (StableDiffusion)
โœ… Tencent
โœ… together.ai
โœ… Upstage
โœ… VertexAI (Google)
โœ… vLLM
โœ… WorkersAI (Cloudflare)
โœ… xAI
โœ… Zhipu (ๆ™บ่ฐฑ)		 โœ… Adobe
โœ… Automatic1111 (SD Webui)
โœ… Firefly (Adobe)
โœ… Github Copilot
โœ… Google (Colab)
โœ… Langfuse
โœ… Microsoft Copilot
โœ… Midjourney
โœ… Nvidia (ChatWithRTX)
โœ… Pollinations
โœ… Qingyan (ๆ™บ่ฐฑๆธ…่จ€)
โœ… Runway
โœ… Suno
โœ… Viggle
โœ… Zeabur

[!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/open-ai.svg" />

<!--ALIYUN-->
<img
  height="64"
  src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/open-ai.svg"
/>
<!--UNPKG-->
<img height="64" src="https://unpkg.com/@lobehub/icons-static-svg@latest/icons/open-ai-text.svg" />

<!--ALIYUN-->
<img
  height="64"
  src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/open-ai-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/open-ai.png"
  />
  <img height="64" src="https://unpkg.com/@lobehub/icons-static-png@latest/light/open-ai.png" />
</picture>

<!--ALIYUN-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/open-ai.png"
  />
  <img
    height="64"
    src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/open-ai.png"
  />
</picture>
<!--UNPKG-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://unpkg.com/@lobehub/icons-static-png@latest/dark/open-ai-text.png"
  />
  <img
    height="64"
    src="https://unpkg.com/@lobehub/icons-static-png@latest/light/open-ai-text.png"
  />
</picture>

<!--ALIYUN-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/open-ai-text.png
    "
  />
  <img
    height="64"
    src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/open-ai-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/open-ai.webp"
  />
  <img height="64" src="https://unpkg.com/@lobehub/icons-static-webp@latest/light/open-ai.webp" />
</picture>

<!--ALIYUN-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/dark/open-ai.webp
    "
  />
  <img
    height="64"
    src="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/light/open-ai.webp"
  />
</picture>
<!--UNPKG-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://unpkg.com/@lobehub/icons-static-webp@latest/dark/open-ai-text.webp"
  />
  <img
    height="64"
    src="https://unpkg.com/@lobehub/icons-static-webp@latest/light/open-ai-text.webp"
  />
</picture>

<!--ALIYUN-->
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/dark/open-ai-text.webp
    "
  />
  <img
    height="64"
    src="https://registry.npmmirror.com/@lobehub/icons-static-webp/latest/files/light/open-ai-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.