---
type: doc
title: Icon
description: Render Fulldev content icons or use Lucide and Simple Icons directly in Astro.
sidebar:
  badge:
    text: ⋅
    variant: success
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

Fulldev supports two icon workflows:

- Use the Fulldev `Icon` component when an icon name comes from content,
  frontmatter, or project configuration.
- Import `@lucide/astro` components or `simple-icons` SVG files 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.

```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 want content-owned icon names:

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

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

```bash
pnpm add @lucide/astro simple-icons
```

## Direct imports

```astro live
---
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 Trash from "@lucide/astro/icons/trash"
import Github from "simple-icons/icons/github.svg"
---

<Heart />
<Star />
<Check />
<Trash />
<MessageCircle />
<Github fill="currentColor" aria-hidden="true" />
```

## Usage

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

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

For UI icons that are fixed in code:

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

```astro
<Heart />
```

For brand icons, import the SVG file from `simple-icons`. Astro renders it as a
component, and the attributes you pass replace the ones in the file:

```ts
import Github from "simple-icons/icons/github.svg"
```

```astro
<Github fill="currentColor" aria-hidden="true" />
```

## Example

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

```astro live
---
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` SVG files for
  brand marks when importing directly.

## API Reference

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