Raycast Extension Icon

The Raycast export generates a single 512x512 PNG optimized for Raycast extensions. This is the simplest export bundle, but there are important design considerations to ensure your icon looks great in the Raycast interface.

Related:

• Export Overview
• Single File Export

What's Included

raycast-icon/
└── icon.png    # 512x512 PNG

That's it! Raycast extensions only need a single icon file.

Icon Requirements

Installation

1. Add to Your Extension

Place the icon in your extension's assets/ folder:

your-extension/
├── assets/
│   └── icon.png
├── package.json
├── src/
│   └── index.tsx
└── tsconfig.json

2. Update package.json

Reference the icon in your extension manifest:

{
  "name": "your-extension",
  "title": "Your Extension",
  "description": "Does something useful",
  "icon": "icon.png",
  "commands": [
    {
      "name": "main",
      "title": "Main Command",
      "description": "The main command",
      "mode": "view"
    }
  ]
}

3. Per-Command Icons (Optional)

You can also use different icons for different commands:

{
  "commands": [
    {
      "name": "search",
      "title": "Search",
      "icon": "search-icon.png",
      "mode": "view"
    },
    {
      "name": "create",
      "title": "Create New",
      "icon": "create-icon.png",
      "mode": "view"
    }
  ]
}

Design Guidelines

Safe Zone

Raycast displays icons at various sizes throughout the UI. Keep important content within the center 80% of the icon to ensure nothing gets clipped when displayed small.

┌──────────────────────┐
│                      │
│    ┌──────────┐      │
│    │          │      │
│    │  SAFE    │      │
│    │  ZONE    │      │
│    │          │      │
│    └──────────┘      │
│                      │
└──────────────────────┘

Icon Style

Raycast has a clean, minimal aesthetic. For best results:

• Keep it simple: The icon appears small in the command list
• High contrast: Ensure the icon is visible on both light and dark backgrounds
• Solid colors: Gradients may not be visible at small sizes
• No text: Text becomes unreadable at 16-32px display sizes

Light & Dark Mode

Raycast supports both light and dark modes. Consider:

• Test your icon on both white and dark gray backgrounds
• Avoid pure white or pure black icons that disappear on matching backgrounds
• Use colors that work in both modes, or provide alternative icons

Where Your Icon Appears

Your extension icon is displayed in multiple places:

Testing Your Icon

Local Development

# Start development mode
npm run dev

Open Raycast and search for your extension. Check:

• Command list appearance
• Extension settings page
• Search results

Before Publishing

1. View icon at 100% zoom and 50% zoom
2. Test on both light and dark Raycast themes
3. Compare with other popular extensions' icons
4. Ensure icon is distinct and recognizable at small sizes

Publishing Checklist

Before submitting to the Raycast Store:

• Icon is exactly 512x512 pixels
• Icon is PNG format
• Icon looks good at 20x20 (mentally scale it down)
• Icon works on both light and dark backgrounds
• Icon is unique and doesn't resemble system icons
• Icon represents your extension's functionality

Troubleshooting

Icon not showing?

1. Verify icon.png exists in assets/ folder
2. Check package.json references the correct filename
3. Restart Raycast: ⌘+, → Advanced → Reload

Icon looks blurry?

1. Ensure source is exactly 512x512 (not upscaled from smaller)
2. Export without compression artifacts
3. Use PNG format (not JPEG)

Icon looks different than expected?

Raycast applies:

• Slight corner rounding
• Shadow in some contexts
• Size reduction (icons are never shown at full 512px)

Design with these transformations in mind.

Example Extensions

For icon inspiration, check out popular Raycast extensions:

• Clipboard History: Simple, recognizable clipboard icon
• Spotify: Uses brand colors effectively
• GitHub: Clean, minimal mark

Your icon should be instantly recognizable at a glance while fitting Raycast's visual style.