Icons

Jamdesk includes Font Awesome Pro, giving you access to thousands of icons for navigation, cards, callouts, and inline content. Both free and pro icons are available.

Using Icons in Components

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

<Card title="Getting Started" 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:

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

Task completed

Icon Props

Examples

<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. Search for what you need, then use the icon name in your docs.

Brand Icons

Technology and company logos are automatically detected and rendered correctly:

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

Common brand icons include:

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

Examples

<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:

<Card title="Callouts" icon="light/bell" href="/components/callouts">

  Add important notices to your documentation.

</Card>

---
title: Settings
icon: light/gear
---

{
  "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:

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:

---
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:

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

Anchor Icons

Add icons to top-level anchors in 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.