llm-icon-finder

Original source / Raw SKILL.md

---
name: llm-icon-finder
description: Finding and accessing AI/LLM model brand icons from lobe-icons library. Use when users need icon URLs, want to download brand logos for AI models/providers/applications (Claude, GPT, Gemini, etc.), or request icons in SVG/PNG/WEBP formats.
---

# Finding AI/LLM Brand Icons

Access AI/LLM model brand icons and logos from the [lobe-icons](https://github.com/lobehub/lobe-icons) library. The library contains 100+ icons for models (Claude, GPT, Gemini), providers (OpenAI, Anthropic, Google), and applications (ComfyUI, LobeChat).

## Icon Formats and Variants

**Available formats**: SVG (scalable), PNG (raster), WEBP (compressed)
**Theme variants**: light, dark, and color (some icons)

## CDN URL Patterns

Construct URLs using these patterns:

```
# SVG
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-svg/{light|dark}/{icon-name}.svg

# PNG
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/{light|dark}/{icon-name}.png

# WEBP
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-webp/{light|dark}/{icon-name}.webp

# Color variant (append -color to icon-name)
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/{icon-name}-color.png
```

**Icon naming convention**: Lowercase, hyphenated (e.g., `claude`, `chatglm`, `openai`, `huggingface`)

## Workflow

When users request icons:

1. Identify icon name (usually lowercase company/model name, hyphenated if multi-word)
2. Determine format (default: PNG) and theme (default: dark)
3. Construct CDN URL using pattern above
4. Provide URL to user
5. If download requested, use Bash tool with curl
6. Include web viewer link: `https://lobehub.com/icons/{icon-name}`

## Finding Icon Names

**Common icons**: See `references/icons-list.md` for comprehensive list organized by category (Models, Providers, Applications, Chinese AI)

**Uncertain names**:
- Browse https://lobehub.com/icons
- Try variations (e.g., company name vs product name: `alibaba` vs `alibabacloud`)
- Check for `-color` variants if standard URL fails

**Chinese AI models**: Support Chinese queries (e.g., "智谱" → `chatglm`, "月之暗面" → `moonshot`)

## Examples

**Single icon request**:
```
User: "Claude icon"
→ Provide: https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/claude.png
→ Also mention color variant and web viewer link
```

**Multiple icons download**:
```bash
curl -o openai.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/openai.svg"
curl -o anthropic.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/anthropic.svg"
```

**Chinese query**:
```
User: "找一下智谱的图标"
→ Identify: 智谱 = ChatGLM → icon name: chatglm
→ Provide URLs and mention related icons (zhipu, codegeex)
```

## Troubleshooting

If URL returns 404:
1. Try `-color` suffix variant
2. Check alternate naming (e.g., `chatgpt` vs `gpt`, `google` vs `gemini`)
3. Direct user to https://lobehub.com/icons to browse
4. Search repository: https://github.com/lobehub/lobe-icons

## Reference Files

- `references/icons-list.md` - Comprehensive list of 100+ available icons by category
- `references/developer-info.md` - npm installation and React usage examples


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/icons-list.md

```markdown
# Common AI/LLM Icons Reference

This file contains a comprehensive list of popular AI/LLM icons available in the lobe-icons library.

## Models

| Icon Name | Description |
|-----------|-------------|
| `claude` | Anthropic Claude |
| `chatgpt` | ChatGPT |
| `gpt` | GPT models |
| `gemini` | Google Gemini |
| `llama` | Meta LLaMA |
| `mistral` | Mistral AI |
| `chatglm` | 智谱 ChatGLM |
| `baichuan` | 百川 Baichuan |
| `deepseek` | DeepSeek |
| `qwen` | 通义千问 Qwen |
| `yi` | 零一万物 Yi |
| `aya` | Cohere Aya |

## Providers

| Icon Name | Description |
|-----------|-------------|
| `openai` | OpenAI |
| `anthropic` | Anthropic |
| `google` | Google |
| `cohere` | Cohere |
| `huggingface` | Hugging Face |
| `openrouter` | OpenRouter |
| `perplexity` | Perplexity |
| `stability` | Stability AI |
| `alibaba` | 阿里巴巴 Alibaba |
| `alibabacloud` | 阿里云 Alibaba Cloud |
| `tencent` | 腾讯 Tencent |
| `baidu` | 百度 Baidu |
| `zhipu` | 智谱 AI |
| `moonshot` | 月之暗面 Moonshot (Kimi) |
| `minimax` | MiniMax |
| `zeroone` | 零一万物 01.AI |
| `ai21` | AI21 Labs (Jamba) |

## Applications

| Icon Name | Description |
|-----------|-------------|
| `lobechat` | LobeChat |
| `comfyui` | ComfyUI |
| `automatic` | Automatic1111 (SD WebUI) |
| `midjourney` | Midjourney |
| `runway` | Runway |
| `capcut` | CapCut |
| `cline` | Cline |
| `colab` | Google Colab |
| `copilotkit` | CopilotKit |
| `aistudio` | Google AI Studio |
| `clipdrop` | Clipdrop |

## Chinese AI Providers & Models

| Icon Name | Chinese Name | Description |
|-----------|--------------|-------------|
| `chatglm` | 智谱清言 | ChatGLM |
| `zhipu` | 智谱 | Zhipu AI |
| `baichuan` | 百川 | Baichuan |
| `deepseek` | 深度求索 | DeepSeek |
| `moonshot` | 月之暗面 | Moonshot (Kimi) |
| `minimax` | 稀宇科技 | MiniMax |
| `zeroone` | 零一万物 | 01.AI |
| `qwen` | 通义千问 | Qwen |
| `yi` | 零一万物 | Yi |
| `alibaba` | 阿里巴巴 | Alibaba |
| `alibabacloud` | 阿里云 | Alibaba Cloud |
| `tencent` | 腾讯 | Tencent |
| `baidu` | 百度 | Baidu |
| `ai360` | 360智脑 | 360 AI Brain |
| `aimass` | 紫东太初 | AiMass |
| `aihubmix` | 推理时代 | AiHubMix |
| `codegeex` | — | CodeGeeX |

## Tips for Finding Icons

1. **Icon naming**: Usually lowercase, hyphenated (e.g., `anthropic`, `chatglm`)
2. **Company vs Product**: Some have both (e.g., `alibaba` and `alibabacloud`, `zhipu` and `chatglm`)
3. **Color variants**: Many icons have `-color` suffix for colored versions
4. **Browse all**: Visit https://lobehub.com/icons to see the complete catalog

```

### references/developer-info.md

```markdown
# Developer Information

This file contains additional information for developers who want to use lobe-icons in their projects.

## npm Installation

Icons can be installed as npm packages:

```bash
# React components
npm install @lobehub/icons

# Static SVG files
npm install @lobehub/icons-static-svg

# Static PNG files
npm install @lobehub/icons-static-png

# Static WEBP files
npm install @lobehub/icons-static-webp

# React Native
npm install @lobehub/icons-rn
```

## Usage in React

```tsx
import { Claude, OpenAI, Gemini } from '@lobehub/icons';

function MyComponent() {
  return (
    <div>
      <Claude size={48} />
      <OpenAI size={48} />
      <Gemini size={48} />
    </div>
  );
}
```

## Additional Resources

- **Icon Gallery**: https://lobehub.com/icons
- **GitHub Repository**: https://github.com/lobehub/lobe-icons
- **Documentation**: https://icons.lobehub.com
- **NPM Packages**: https://www.npmjs.com/search?q=%40lobehub%2Ficons

```