# Icon

Renders either a real icon (`icon`) or a custom image (`src`) inline with surrounding text — exactly one of the two is required:

A rocket icon <Icon icon="rocket" /> sits inline with this sentence, and so does a bigger, colored one <Icon icon="rocket" size={22} color="#dc2626" />. A custom image works the same way <Icon src="https://unpkg.com/lucide-static@latest/icons/rocket.svg" alt="Rocket" /> — same inline placement, different source.

```mdx
A rocket icon <Icon icon="rocket" /> sits inline with this sentence.

<Icon icon="rocket" size={22} color="#dc2626" />

<Icon src="https://unpkg.com/lucide-static@latest/icons/rocket.svg" alt="Rocket" />
```

**`Icon` props**

<Parameter name="icon" type="string">
  See [Icons](#icons) below. One of `icon`/`src` is required.
</Parameter>

<Parameter name="src" type="string">
  Path or URL to an image. One of `icon`/`src` is required.
</Parameter>

<Parameter name="alt" type="string" default='""'>
  Only used with `src`.
</Parameter>

<Parameter name="size" type="number">
  Pixel size, only used with `icon`. Inherits the surrounding text's `font-size` when unset.
</Parameter>

<Parameter name="color" type="string">
  CSS color, only used with `icon`. Inherits the surrounding text's `color` when unset.
</Parameter>

<Parameter name="height" type="string" default='"1.6em"'>
  CSS length, only used with `src`.
</Parameter>

## Icons

Anywhere a component accepts an `icon` prop ([Card](/docs/content/components/card/) above, and `writedocs.json`'s `tab`/`dropdown`/`product` fields), the value can be:

- A bare name like `"star"` or `"layout-grid"` — resolved against the [Lucide](https://lucide.dev/icons/) icon set first. If Lucide doesn't have the name, [Font Awesome](https://fontawesome.com/search?ic=free) Solid, then Font Awesome Brands, are tried next — so Font Awesome names like `"gear"` or `"discord"` also work. A name none of them have is left out, with a warning in the build and in [`writedocs validate`](/docs/cli/#writedocs-validate).
- A `"collection:icon-name"` pair, e.g. `"mdi:server"` or `"simple-icons:github"` — resolved against whichever [Iconify](https://icon-sets.iconify.design/) collection is installed.
- An image URL or path — anything starting with `https://`, `//`, `/`, `./`, or `../`, e.g. `"/images/logo.svg"` — rendered as an image the size of an icon.
- Anything else (an emoji, a symbol) — rendered as literal text.