Icon

Fulldev supports two icon workflows:

• Use the Fulldev Icon component when an icon name comes from content, frontmatter, or project configuration.
• Import @lucide/astro or simple-icons-astro components directly when the icon is code-owned UI.

The Icon component resolves Lucide icons first and falls back to Simple Icons for brand marks. Direct imports remain useful for fixed interface icons in buttons, controls, and examples.

---
import { Icon } from "@/components/ui/icon"
---

<Icon name="rocket" />
<Icon name="github" />

Installation

Install the Fulldev icon component when you want content-owned icon names:

npx shadcn@latest add @fulldev/icon

Install direct icon packages only when you need to import icon components in code:

pnpm add @lucide/astro simple-icons-astro

Direct imports

---
import Check from "@lucide/astro/icons/check"
import Heart from "@lucide/astro/icons/heart"
import MessageCircle from "@lucide/astro/icons/message-circle"
import Star from "@lucide/astro/icons/star"
import Trash2 from "@lucide/astro/icons/trash-2"
import Github from "simple-icons-astro/Github"
---

<Heart />
<Star />
<Check />
<Trash2 />
<MessageCircle />
<Github fill="currentColor" />

Usage

For content-owned icons, pass plain names to Icon:

<Icon name={feature.icon} />

For UI icons that are fixed in code:

import Heart from "@lucide/astro/icons/heart"

<Heart />

For brand icons:

import Github from "simple-icons-astro/Github"

<Github fill="currentColor" />

Example

Inside buttons and similar controls, use data-icon for Lucide icons so the surrounding component can size and align the icon consistently.

---
import ArrowRight from "@lucide/astro/icons/arrow-right"

import { Button } from "@/components/ui/button"
---

<Button>
  Continue
  <ArrowRight data-icon="inline-end" />
</Button>

Notes

• Use plain icon names in content, frontmatter, or project configuration.
• Render content-owned icon names through Icon.
• Import icon components directly for fixed code-owned UI icons.
• Prefer @lucide/astro for interface icons and simple-icons-astro for brand marks when importing directly.

API Reference

See the GitHub source code for more information on props.