lobe-icons

Generate CDN URLs and React components for AI brand icons.

8|Updated Jul 26, 2026

Search Tags:#branding #react #llm #assets #icons #cdn

Ready to run

npx skills add https://github.com/joonlab/joonlab-claudecode-setting-for-share --skill lobe-icons

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lobe-icons
Source: https://github.com/joonlab/joonlab-claudecode-setting-for-share/tree/main/claude/skills/lobe-icons
Command: npx skills add https://github.com/joonlab/joonlab-claudecode-setting-for-share --skill lobe-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lobehub/icons, and includes references (resource) components.

What problem does it solve?

This skill solves the challenge of finding, managing, and implementing consistent AI and LLM brand assets, logos, and provider icons in development projects.

Core Features & Use Cases

Comprehensive Icon Library: Provides access to over 200 AI/LLM brand SVG logos and React components.
Flexible Asset Formats: Supports React component integration, CDN-based static asset retrieval (SVG/PNG/WebP), and helper components for model/provider identification.
Use Case: When building an AI-powered application, use this skill to dynamically render the correct model provider icon (e.g., OpenAI, Anthropic, DeepSeek) based on the model ID string without manually downloading or managing image files.

Quick Start

Use the lobe-icons skill to retrieve the CDN URL for the Claude brand icon in SVG format.

Frequently Asked Questions about lobe-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I display AI brand icons like OpenAI or Anthropic in my React application?▼

To display AI brand icons in your React application, use this skill to access over 200 AI and LLM brand SVG logos as standardized React components. It dynamically renders the correct model provider icon without manual file management.

Can I get LLM provider logos via a CDN instead of importing React components?▼

You can retrieve LLM provider logos via a CDN. The skill generates standardized CDN URLs to fetch static brand assets in SVG, PNG, or WebP formats, facilitating flexible integration without direct component imports.

How do I map a model ID string to its correct provider logo for rendering?▼

To map a model ID string to its provider logo, the skill provides helper components for model-to-provider mapping. This enables dynamic icon rendering based on the model ID string within your web applications.

What is the best way to manage AI and LLM brand assets for multiple model providers?▼

The best way to manage AI and LLM brand assets is using a centralized icon library. This skill provides a comprehensive collection of over 200 brand SVG logos, solving the challenge of finding and implementing consistent provider icons.

Does this icon library support variant selection for different brand assets?▼

The icon library supports technical requirements for icon rendering and variant selection. You can retrieve specific brand asset variants dynamically through standardized naming and CDN URL generation.

Why use standardized naming for LLM icons instead of downloading static image files?▼

Using standardized naming for LLM icons prevents manual image file management. This approach ensures consistent asset integration across projects by dynamically mapping model IDs to provider logos via CDN URLs or React components.