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

Claude plugins expose their logo through the icon field in the plugin's 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 repository structures its metadata inside a hidden .claude-plugin folder. Within this folder, 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):

{
  "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
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 sits in the same folder as [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 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

{
  "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

{
  "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 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)	icon.svg
testdino	[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)	None defined—add your own

Common Mistakes to Avoid

• Missing file reference: Ensure the icon field exists in 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
• 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 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. 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}