> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIwMzhlOGY2NS03NmU5LTQ4MGUtOThlZC02MmU0Njk1OGM5YWUiLCJleHAiOjE3ODQxODgxMzksImlhdCI6MTc4NDE4NzgzOX0.3lSRrAUHKJOhkdN1XjyslXc_cavwn88ItzbrhEbXNKI
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Icon

> Learn how to add Font Awesome icons to your Fern documentation. Customize icon sizes, colors, and styles with the Icon component.

The `<Icon>` component displays [Font Awesome](https://fontawesome.com/) icons in your documentation with support for all Font Awesome Pro styles.

## Usage

&#x20;Basic icon

```jsx Markdown
<Icon icon="seedling" /> Basic icon
```

## Variants

### Sizes

&#x20;Large icon

```jsx Markdown
<Icon icon="warning" size="7" /> Large icon
```

### Colors

&#x20;Colored icon

```jsx Markdown
<div><Icon icon="check" color="#22C55E" /> Colored icon</div>
```

### Font Awesome styles

&#x20;Default (Solid)

&#x20;Regular

&#x20;Light

&#x20;Thin

&#x20;Duotone

&#x20;Sharp Solid

&#x20;Brands

```jsx Markdown
<Icon icon="heart" /> Default (Solid)
<Icon icon="fa-regular fa-heart" /> Regular
<Icon icon="fa-light fa-heart" /> Light
<Icon icon="fa-thin fa-heart" /> Thin
<Icon icon="fa-duotone fa-heart" /> Duotone
<Icon icon="fa-sharp fa-solid fa-heart" /> Sharp Solid
<Icon icon="fa-brands fa-github" /> Brands
```

### Custom SVG icon

Use a relative path to display a custom SVG file from your project.

```jsx Markdown
<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon
```

## Properties

A Font Awesome icon name (e.g., "heart" or "fa-solid fa-heart") or a relative path to an SVG file (e.g., "./images/icon.svg")

Icon color (hex, RGB, or color name). Ignored if `lightModeColor` and `darkModeColor` are both set

Icon color for dark mode (hex, RGB, or color name)

Icon color for light mode (hex, RGB, or color name)

Size of the icon (width and height) calculated as `size * 4` pixels (e.g., 4 = 16px, 8 = 32px).

Additional CSS classes to apply to the icon