Table of contents

TOC

• 📦 Installation
  • I'm an Agent
  • I'm an Human
  • Packages
• ✨ Features
• 🤯 CDN Usage
  • A CDN with SVG
  • B CDN with PNG
  • C CDN with WEBP
  • Static Packages
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 Links
  • More Products
  • Design Resources
  • Development Resources

📦 Installation

I'm an Agent

Send this prompt to your agent to use @lobehub/icons

Read https://lobehub.com/icons/skill.md and follow the instructions to use @lobehub/icons

I'm an Human

Install @lobehub/icons with npm and start using the icon set, Read docs

npm i @lobehub/icons

Packages

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

⌨️ 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

• 🤯 LobeHub - The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.
• 🅰️ LobeTheme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
• 🧸 LobeVidol - 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

• 🍭 LobeUI - An open-source UI component library for building AIGC web apps.
• 🥨 LobeIcons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
• 📊 LobeCharts - React modern charts components built on recharts

Development Resources

• 🎤 LobeTTS - A high-quality & reliable TTS/STT library for Server and Browser
• 🌏 LobeI18n - Automation ai tool for the i18n (internationalization) translation process.

More Resources

---

📝 License

Copyright © 2023 LobeHub.
This project is MIT licensed.