Icon Manager

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

Opening the Icon Manager

Click the Shapes icon in the header toolbar to open the Icon Manager panel. It looks like three connected playcubes.

About Lucide Icons

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

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

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

Browsing Icons

Categories

The sidebar organizes icons into categories:

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 to add the icon at your current cursor position. This inserts:

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

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

---
import Github from '@lucide/astro/icons/github';
import Twitter from '@lucide/astro/icons/twitter';
import Linkedin from '@lucide/astro/icons/linkedin';
---

<div class="flex gap-4">
    <a href="https://github.com" class="text-gray-400 hover:text-white">
        <Github class="w-5 h-5" />
    </a>
    <a href="https://twitter.com" class="text-gray-400 hover:text-white">
        <Twitter class="w-5 h-5" />
    </a>
    <a href="https://linkedin.com" class="text-gray-400 hover:text-white">
        <Linkedin 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. Save and wait for hot reload

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
• Visual Editor - Style components visually