Icons

Jamdesk ships with Font Awesome Pro: thousands of free and pro icons.

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

Jamdesk detects technology and company logos automatically:

<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. Prefix the icon name to pick a variant.

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

Anywhere docs.json accepts an icon (navigation groups, tabs, anchors, page icons, and search popularPages), you can write it as an object instead of a string. The dashboard's icon picker produces this form:

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

Icons render in the Solid variant by default. Override it per icon with a style prefix (light/gear) or, in docs.json, the object form's style field.

Comparing Variants

The same icon in each variant:

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

Icons from a documentation platform that used Font Awesome Free keep working after you migrate.

What's Next?