Icons

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:

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

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

What's Next?