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 that control visual weight. Specify the variant by prefixing the icon name.

Available Variants

Font Awesome's Sharp family is also available, with squared-off corners: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/, and sharp-duotone-solid/ (e.g. sharp-duotone-solid/star).

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"]
}

Icon object form

In docs.json, anywhere an icon is accepted (navigation groups, tabs, anchors, page icons, and search popularPages) you can write the icon as an object instead of a string. This is the form the dashboard's icon picker produces:

{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}

{ "name": "shield", "style": "duotone" } is equivalent to the string "duotone/shield". Use whichever you prefer. Frontmatter icon (page icons) takes the string form only.

Default Variant

When no variant is specified, icons render in the Solid variant. Override it per icon with a style prefix (light/gear) or, in docs.json, the object form's style field.

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?