Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Icon
description: Render Fulldev icons from Lucide and Simple Icons.
sidebar:
  badge:
    text: ⋅
    variant: success
---

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Fulldev uses the `Icon` component for interface icons, brand marks, and
content-owned icon names. It resolves Lucide icons first and falls back to
Simple Icons for brand marks.

```astro live props={{ name: 'icon' }}
---
import { Icon } from "@/components/ui/icon"
---

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

## Installation

Install the Fulldev icon component when you need icons:

```bash
npx shadcn@latest add @fulldev/icon
```

## Rendering

<Alert>
  <AlertTitle>Use the Icon component</AlertTitle>
  <AlertDescription>
    Use `Icon` for both fixed UI icons and content-owned icon names. This keeps
    Fulldev source consistent and avoids mixing static SVG imports with dynamic
    icon resolution.
  </AlertDescription>
</Alert>

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

<Icon name="heart" />
<Icon name="star" />
<Icon name="check" />
<Icon name="trash-2" />
<Icon name="message-circle" />
<Icon name="github" />
```

## Usage

Pass plain names to `Icon`:

```astro
<Icon name={feature.icon} />
```

```astro
<Icon name="heart" />
```

For brand icons:

```astro
<Icon name="github" />
```

## Notes

- Use Lucide icon names for interface icons.
- Use Simple Icons names for brand marks.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/icon) for more information on props.