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. Prefix a name with lucide: or simple: to choose the icon set explicitly, for example lucide:github or simple:github. Icons are decorative by default; pass an aria-label when the icon carries meaning. 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.