Home
cd ../playbooks
Developer ToolsBeginner

LLM Icon Finder

Find and download AI/LLM model brand icons from the lobe-icons library — Claude, GPT, Gemini, and more — as ready-to-use SVG, PNG, or WEBP URLs.

5 minutes
By daymadeSource
#icons#branding#ai#svg#design

Hunting for an official, correctly-licensed brand logo for an AI model wastes time and produces inconsistent assets. This playbook pulls clean icon URLs in any format on demand.

Who it's for: frontend developers, designers, product teams, content creators

Example

"Get me SVG icons for Claude, GPT, and Gemini" → Direct lobe-icons URLs for each brand in the format you asked for

CLAUDE.md Template

New here? 3-minute setup guide → | Already set up? Copy the template below.

# 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

Get new playbooks like this one

One email a week with new Claude Code workflows. Free, like everything here.

No spam. Unsubscribe anytime.

README.md

What This Does

Find and download AI/LLM model brand icons from the lobe-icons library — Claude, GPT, Gemini, and more — as ready-to-use SVG, PNG, or WEBP URLs.

What's Inside

The template covers:

  • Icon Formats and Variants
  • CDN URL Patterns
  • Workflow
  • Finding Icon Names
  • Examples
  • Troubleshooting

Quick Start

Step 1: Create a Project Folder

Make a dedicated folder for this workflow and open it in Claude Code.

Step 2: Download the Template

Click Download above to save the template, then drop it into your project as CLAUDE.md (or paste it into your existing one).

Step 3: Start Working

Tell Claude what you need in plain language — it will follow the template's workflow automatically. For example:

Get me SVG icons for Claude, GPT, and Gemini

Claude reads the template and runs the steps for you.

$Related Playbooks

Developer Tools

MCP Server Hub Manager

Access 1200+ AI Agent tools via Model Context Protocol (MCP)

10 minutes
Advanced
Developer Tools

MCP Server Builder

Guide for creating high-quality Model Context Protocol (MCP) servers that enable LLMs to interact with external services and APIs.

30 minutes
Advanced
Developer Tools

Minimalist UI Design Skill: Editorial, Monochrome Interfaces

A frontend design system that enforces warm monochrome, bento grids, and editorial typography — the Notion/Linear look, banned from gradients, heavy shadows, and Inter

5 minutes
Beginner
Developer Tools

Mermaid Tools

Extract Mermaid diagrams from markdown files and render them to high-quality PNG images using bundled scripts — turning text diagrams into shareable visuals.

5 minutes
Beginner
Developer Tools

Minimalist MVP Scoping

Scope a weekend-shippable MVP using the manual → processized → productized progression. Build as little as possible; charge from day one.

5 minutes
Beginner
Developer Tools

n8n Workflow Builder

Automate document workflows with n8n - 7800+ workflow templates

10 minutes
Advanced
Developer Tools

Nuxt UI Component Guidance

Build interfaces correctly with @nuxt/ui v4 — five core rules (UApp wrapper, semantic colors, reading generated theme files for real slot names, override priority, icon naming), a task-to-focus-area routing table, the Nuxt UI MCP server for live component API lookups, and full installation for both Nuxt and standalone Vue.

5 minutes
Beginner
Developer Tools

Office MCP Server Setup

MCP server with 39 tools for Word, Excel, PowerPoint, PDF, OCR operations

10 minutes
Intermediate
Developer Tools

Tech Debt Analyzer

Identify, analyze, document, and track technical debt in JavaScript/TypeScript codebases with automated detection and prioritized remediation plans.

10 minutes
Intermediate
Developer Tools

Test Specialist

Comprehensive JavaScript/TypeScript testing guidance with test writing, bug analysis, coverage analysis, and proactive issue detection.

10 minutes
Intermediate
Developer Tools

Accessibility Engineering for Components

Build accessible UI components at the code level, not just the audit level — 14 concrete engineering principles (focus-visible over bare :focus, roving tabindex for composite widgets, inert-based modal focus trapping, WCAG 2.5.8 hit-area minimums), a common-mistakes table with fixes, and a severity-rated review format ending in a hard Block/Needs-changes/Approve verdict.

5 minutes
Intermediate
Developer Tools

Adversary Emulation: MuddyWater

An intelligence-grounded, authorized purple-team emulation profile for MuddyWater (MITRE ATT&CK G0069), Iran's MOIS-linked cyber-espionage group — attribution, targeting, representative TTPs by ATT&CK tactic, emulation guidance mapped to generic red-team tooling, and paired detection/defense recommendations for every offensive technique, all under an explicit authorized-use caveat.

15 minutes
Advanced

Browse all Developer Tools playbooks →