For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Slack communityLog inBook a demo
  • Getting Started
    • Overview
    • Quickstart
    • Customer Showcase
  • Writing Content
    • Markdown
      • Overview
      • Accordions
      • Accordion Groups
      • Aside
      • Button
      • Callouts
      • Cards
      • Card Groups
      • Code Blocks
      • Embed
      • Endpoint Request Snippet
      • Endpoint Response Snippet
      • Endpoint Schema Snippet
      • Frames
      • Icons
      • Parameter Fields
      • Steps
      • Tabs
      • Tooltips
    • Visual Editor
    • Reusable Markdown
    • Custom React Components
    • Changelog
LogoLogo
Slack communityLog inBook a demo
On this page
  • Examples
  • Properties
  • Font Awesome Styles
  • Best Practices
Writing ContentComponents

Icons

Was this page helpful?
Previous

Parameters

Next
Built with

Add Font Awesome icons to your docs with customizable styles, colors and sizes using the Icon component. All Font Awesome Pro styles are supported.

Examples

Example
Markdown
Basic icon
Colored icon
Large icon

Properties

icon
stringRequired

Name of the Font Awesome icon (e.g., “heart” or “fa-solid fa-heart”)

color
string

Icon color (hex, RGB, or color name)

size
number

Size in 0.25rem increments (e.g., 4 = 1rem)

Font Awesome Styles

You can use any Font Awesome style by using either:

  • Short syntax: icon="heart" (defaults to solid)
  • Full syntax: icon="fa-regular fa-heart" (specific style)

Example
Markdown
Default (Solid)
Regular
Light
Thin
Duotone
Sharp Solid
Brands

Best Practices

  • Use icons consistently throughout your documentation
  • Keep icon sizes appropriate for their context (16-24px for inline, larger for featured items)
  • Ensure sufficient color contrast for accessibility
  • Use semantic icons that reinforce your message (e.g., warning icon for cautions)
  • Avoid using too many different icons which can create visual noise