---
title: Icons
description: Jamdesk ships with Font Awesome Pro -- use icons in cards, callouts, sidebar navigation, and inline text with multiple style variants.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Jamdesk ships with **Font Awesome Pro** -- thousands of icons, both free and pro, ready to use.

## Using Icons in Components

Most components accept an `icon` prop with a Font Awesome icon name:

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>

Icons work in Cards, Accordions, Tabs, and navigation items.

## The Icon Component

Use the `<Icon>` component to display icons inline with text:

```mdx
<Icon icon="check" color="green" /> Task completed
```

<Icon icon="check" color="green" /> Task completed

### Icon Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | string | required | Font Awesome icon name |
| `color` | string | - | Named color (red, blue, green) or hex (#FF5733) |
| `size` | number | 16 | Size in pixels |

### Examples

```mdx
<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />
```

<Icon icon="star" color="yellow" size={24} /> <Icon icon="circle-check" color="green" /> <Icon icon="triangle-exclamation" color="orange" /> <Icon icon="heart" color="#E91E63" size={20} />

## Finding Icons

Browse the full icon library at [fontawesome.com/icons](https://fontawesome.com/icons). Search for what you need, then use the icon name in your docs.

<Tip>
When searching on Font Awesome's site, look for the icon name shown below the icon (e.g., "circle-check", "arrow-right"). Use that exact name in your docs.
</Tip>

## Brand Icons

Technology and company logos are automatically detected and rendered correctly:

```mdx
<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />
```

<Icon icon="github" size={24} /> <Icon icon="discord" size={24} /> <Icon icon="react" size={24} /> <Icon icon="python" size={24} />

Common brand icons include:

| Category | Icons |
|----------|-------|
| Social | github, discord, twitter, linkedin, youtube, slack |
| Languages | python, react, vuejs, angular, node-js, php, java |
| Services | aws, docker, google, microsoft, stripe, shopify |

## Icon Variants

Font Awesome icons come in multiple style variants, giving you control over the visual weight and appearance. Specify the variant by prefixing the icon name.

### Available Variants

| Variant | Prefix | Example | Description |
|---------|--------|---------|-------------|
| Solid | `solid/` | `solid/star` | Filled icons, heaviest weight |
| Regular | `regular/` | `regular/star` | Outlined icons, medium weight |
| Light | `light/` | `light/star` | Thinner outlined icons |
| Thin | `thin/` | `thin/star` | Thinnest outlined icons |
| Duotone | `duotone/` | `duotone/star` | Two-tone icons with layered colors |

### Examples

```mdx
<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />
```

<Icon icon="solid/bell" size={24} /> <Icon icon="regular/bell" size={24} /> <Icon icon="light/bell" size={24} /> <Icon icon="thin/bell" size={24} /> <Icon icon="duotone/bell" size={24} />

### Using Variants in Components

Variants work anywhere icons are used: components, navigation, and frontmatter.

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

```json docs.json
{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}
```

### Default Variant

When no variant is specified, Jamdesk uses a theme-appropriate default:

- **Jam theme**: Uses `light` variant for a clean, minimal look
- **Other themes**: Uses `solid` variant for maximum visibility

You can always override the default by specifying a variant explicitly.

### Comparing Variants

Here's the same icon in all variants to help you choose:

| Variant | Icon | Best for |
|---------|------|----------|
| Solid | <Icon icon="solid/folder" size={20} /> | Primary actions, emphasis |
| Regular | <Icon icon="regular/folder" size={20} /> | Secondary UI elements |
| Light | <Icon icon="light/folder" size={20} /> | Minimal designs, navigation |
| Thin | <Icon icon="thin/folder" size={20} /> | Ultra-minimal aesthetics |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Visual interest, branding |

<Note>
Duotone icons use two colors: a primary and a secondary shade. The secondary layer is automatically set to a lighter opacity of the primary color.
</Note>

## Navigation Icons

Icons can appear in the sidebar navigation at three levels: anchors, groups, and individual pages.

### Page Icons

Add an icon to any page using frontmatter:

```yaml authentication.mdx
---
title: Authentication
icon: lock
---
```

The icon appears in the sidebar next to the page title.

### Group Icons

Add icons to navigation groups in `docs.json`:

```json docs.json
{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}
```

### Anchor Icons

Add icons to top-level anchors in `docs.json`:

```json docs.json
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}
```

## Free vs Pro Icons

Jamdesk includes Font Awesome Pro, which means:

- **7,000+ icons** available (vs ~2,000 in the free version)
- All free icons work without any changes
- Pro-exclusive icons like duotone variants are included
- Light and thin weight icons available

If you're migrating from another documentation platform that used Font Awesome Free, all your existing icons will continue to work.

## What's Next?

<Columns cols={2}>
  <Card title="SEO Optimization" icon="magnifying-glass-chart" href="/content/seo">
    Improve discovery and metadata
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/content/frontmatter">
    Define titles, descriptions, and SEO fields
  </Card>
</Columns>