# How to Define a Logo for Your Claude Plugin: Complete Manifest Guide

> Learn how to define your Claude plugin logo using the plugin.json manifest. Discover how to use local file paths or absolute URLs for SVG and PNG images.

- Repository: [Anthropic/claude-plugins-community](https://github.com/anthropics/claude-plugins-community)
- Tags: how-to-guide
- Published: 2026-09-01

---

**Claude plugins expose their logo through the `icon` field in the plugin's [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json) manifest, accepting either a relative path to a local image file (SVG or PNG) or an absolute URL.**

Every Claude plugin in the [`anthropics/claude-plugins-community`](https://github.com/anthropics/claude-plugins-community) repository structures its metadata inside a hidden `.claude-plugin` folder. Within this folder, [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json) serves as the manifest that tells Claude how to display and identify your plugin—including its visual logo.

## Where to Define the Plugin Logo

The logo definition resides in the **plugin manifest**. In the `quickdesign` plugin example, the manifest file is located at [[`quickdesign/.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/plugin.json)](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/plugin.json):

```json
{
  "name": "quickdesign",
  "version": "0.8.0",
  "description": "AI-powered design asset generation",
  "icon": "./icon.svg"
}

```

The `icon` field specifies the logo path. Claude resolves this path relative to the manifest file location, then renders the image in the plugin UI.

## Supported Logo Formats and Paths

Claude accepts two formats for the `icon` value:

| Format | Example Value | Use Case |
|--------|-------------|----------|
| **Relative path** | `"./icon.svg"` or `"./logo.png"` | Local image stored alongside [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json) |
| **Absolute URL** | `"https://example.com/logo.png"` | Externally hosted image |

For local files, place the image inside the `.claude-plugin` directory. The `quickdesign` plugin demonstrates this pattern: [`icon.svg`](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/icon.svg) sits in the same folder as [[`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json)](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/plugin.json).

### Recommended Image Specifications

- **SVG**: Preferred format for crisp scaling at any resolution
- **PNG**: Maximum 256 × 256 pixels; use transparency for flexible backgrounds

## Step-by-Step: Adding a Logo to Your Plugin

Follow these steps to define your Claude plugin logo:

1. **Create your logo image** in SVG or PNG format

2. **Place the file** in your plugin's `.claude-plugin` folder (or upload to a CDN for URL references)

3. **Edit [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json)** to include the `icon` field with the appropriate path

4. **Commit and push** your changes—the logo appears automatically on next plugin load or installation

## Code Examples for Logo Definition

### Local SVG Logo

```json
{
  "name": "my-awesome-plugin",
  "version": "1.0.0",
  "description": "Does something cool",
  "icon": "./icon.svg",
  "author": {
    "name": "Your Name",
    "url": "https://your.website"
  },
  "homepage": "https://github.com/you/my-awesome-plugin"
}

```

Directory structure:

```

my-awesome-plugin/
├─ .claude-plugin/
│  ├─ plugin.json    ← contains "icon": "./icon.svg"
│  └─ icon.svg       ← your logo file
└─ src/
   └─ …

```

### External URL Logo

```json
{
  "name": "remote-logo-plugin",
  "version": "0.2.0",
  "description": "Uses a CDN-hosted logo",
  "icon": "https://my-cdn.com/plugin-logo.png"
}

```

No local image file required when using absolute URLs.

## Manifest Locations in Community Plugins

The [`anthropics/claude-plugins-community`](https://github.com/anthropics/claude-plugins-community) repository demonstrates consistent patterns across plugins:

| Plugin | Manifest Path | Logo Status |
|--------|--------------|-------------|
| **quickdesign** | [[`quickdesign/.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/plugin.json)](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/plugin.json) | [`icon.svg`](https://github.com/anthropics/claude-plugins-community/blob/main/quickdesign/.claude-plugin/icon.svg) |
| **testdino** | [[`testdino/.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/testdino/.claude-plugin/plugin.json)](https://github.com/anthropics/claude-plugins-community/blob/main/testdino/.claude-plugin/plugin.json) | None defined—add your own |
| **eli5** | [[`eli5/.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/eli5/.claude-plugin/plugin.json)](https://github.com/anthropics/claude-plugins-community/blob/main/eli5/.claude-plugin/plugin.json) | None defined—add your own |

## Common Mistakes to Avoid

- **Missing file reference**: Ensure the `icon` field exists in [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json); omitting it leaves your plugin without visual identification
- **Path resolution errors**: Relative paths start from the manifest location, not the repository root
- **Unsupported formats**: Stick to SVG or PNG; other formats may not render correctly

## Summary

- Define your Claude plugin logo using the **`icon` field** in [`.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/.claude-plugin/plugin.json)
- Use **relative paths** (e.g., `"./icon.svg"`) for local files or **absolute URLs** for external hosting
- Place local logo files **inside the `.claude-plugin` folder** alongside the manifest
- **SVG is recommended** for scalability; PNG should not exceed 256 × 256 pixels
- Reference the **`quickdesign` plugin** as the canonical implementation pattern

## Frequently Asked Questions

### What image formats does Claude support for plugin logos?

Claude accepts **SVG** and **PNG** formats for plugin logos. SVG is recommended because it scales crisply at any resolution. PNG files work but should not exceed 256 × 256 pixels to ensure optimal loading performance.

### Can I use a URL instead of a local file for my plugin logo?

Yes. The `icon` field accepts **absolute URLs** (e.g., `"https://cdn.example.com/logo.png"`). This eliminates the need to include the image file in your repository, though you must ensure the URL remains accessible and the hosting allows cross-origin requests.

### Where exactly does the [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json) file go?

Every Claude plugin stores its manifest in a **hidden `.claude-plugin` folder** at the repository root. The full path follows the pattern: [`your-plugin/.claude-plugin/plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/your-plugin/.claude-plugin/plugin.json). The logo image should reside in this same folder when using relative paths.

### What happens if I don't specify an icon in my plugin manifest?

If the `icon` field is absent from [`plugin.json`](https://github.com/anthropics/claude-plugins-community/blob/main/plugin.json), Claude displays your plugin **without a custom logo**, typically showing a generic placeholder icon. This reduces visual recognition in the plugin marketplace and Claude sessions.