Icon Manager

The Icon Manager (titled Lucide Icon Manager) provides quick access to the Lucide icon library. Browse over 300 icons, customize their appearance, and insert them directly into your code.

Opening the Icon Manager

Open Site ▾ › Icon Manager (in the Design column), or press ⌘K (Ctrl+K) and type "Icon Manager".

About Lucide Icons

Lucide is an open-source icon library that evolved from Feather Icons. It offers:

• 300+ icons in the Icon Manager, covering common UI patterns
• Consistent style - Clean, minimalist design
• SVG-based - Crisp at any size
• Tree-shakeable - Only bundle icons you use

PhantomStudio projects include @lucide/astro for native Astro component support.

Browsing Icons

Categories

The sidebar organizes icons into categories (plus All Icons):

Search

Use the search bar to find icons by:

• Name - "arrow", "check", "user"
• Tags - "close" finds X icon, "delete" finds Trash
• Purpose - "notification" finds Bell

Selecting an Icon

Click any icon in the grid to select it. The right panel shows:

• Icon preview - Large view of the selected icon
• Icon name - The component name to use in code
• Category - What group it belongs to
• Tags - Related keywords

Customizing Icons

Size

Choose a preset size:

Color

Select a color class:

Code Preview

The Icon Manager shows the code that will be generated:

Import Statement

import ArrowRight from '@lucide/astro/icons/arrow-right';

Usage

<ArrowRight class="w-6 h-6" />

Click Copy next to either code block to copy to clipboard.

Inserting Icons

Insert at Cursor

Click Insert icon at pointer to add the icon where the cursor is in the code editor. This inserts:

1. The import statement (at the top of your frontmatter)
2. The icon component (at cursor position)

This needs a file open in the code editor, so use it in Code mode. In Design mode, copy the code instead, or ask the AI assistant to add the icon.

Manual Copy

Alternatively:

1. Copy the import statement
2. Paste it in your component's frontmatter
3. Copy the usage code
4. Paste it where you want the icon

Code Examples

Basic Icon

---
import Mail from '@lucide/astro/icons/mail';
---

<Mail class="w-5 h-5" />

Icon with Color

<Check class="w-4 h-4 text-green-500" />

Icon Button

<button class="p-2 hover:bg-gray-100 rounded-lg cursor-pointer">
    <Settings class="w-5 h-5 text-gray-600" />
</button>

Icon with Text

<a href="/contact" class="flex items-center gap-2 text-blue-500 hover:text-blue-600">
    <Mail class="w-4 h-4" />
    Contact Us
</a>

Icon List

<ul class="space-y-2">
    <li class="flex items-center gap-2">
        <Check class="w-4 h-4 text-green-500" />
        Feature one
    </li>
    <li class="flex items-center gap-2">
        <Check class="w-4 h-4 text-green-500" />
        Feature two
    </li>
</ul>

Social Icons

Brand icons (github, twitter, linkedin, etc.) were removed in Lucide v1, so the brand entries in the Social category won't import in a project that uses @lucide/astro 1.x. Use inline SVGs from Simple Icons or generic Lucide alternatives:

---
import Globe from '@lucide/astro/icons/globe';
import MessageCircle from '@lucide/astro/icons/message-circle';
import Link from '@lucide/astro/icons/link';
---

<div class="flex gap-4">
    <a href="https://github.com" class="text-gray-400 hover:text-white">
        <Globe class="w-5 h-5" />
    </a>
    <a href="https://twitter.com" class="text-gray-400 hover:text-white">
        <MessageCircle class="w-5 h-5" />
    </a>
    <a href="https://linkedin.com" class="text-gray-400 hover:text-white">
        <Link class="w-5 h-5" />
    </a>
</div>

Best Practices

Accessibility

Always provide context for icons:

<!-- Icon-only button needs aria-label -->
<button aria-label="Close menu" class="cursor-pointer">
    <X class="w-5 h-5" />
</button>

<!-- Icon with text is self-explanatory -->
<button class="flex items-center gap-2 cursor-pointer">
    <Download class="w-4 h-4" />
    Download
</button>

Consistent Sizing

Use consistent icon sizes throughout your UI:

• Navigation: w-5 h-5
• Buttons: w-4 h-4
• Feature lists: w-5 h-5 or w-6 h-6
• Decorative/Hero: w-8 h-8 or larger

Color Inheritance

Use currentColor (the default) to inherit text color:

<a class="text-blue-500 hover:text-blue-600 flex items-center gap-2">
    <ArrowRight class="w-4 h-4" /> <!-- Inherits blue color -->
    Learn more
</a>

Troubleshooting

Icon Not Rendering

If an icon doesn't appear:

1. Verify the import statement is in the frontmatter
2. Check the component name matches exactly (case-sensitive)
3. Ensure @lucide/astro is installed in your project
4. Refresh the preview

Import Errors

If you see import errors:

1. Check you're importing from @lucide/astro (not lucide-react)
2. Verify the icon name exists in the library
3. Check for typos in the icon name

Next Steps

• Font Manager - Add custom fonts
• Component Library - Pre-built sections with icons
• Design mode - Style components visually