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.
Book a demoLog inStart for free
  • Getting started
    • Overview
    • How it works
    • Quickstart
    • Project structure
    • Customer showcase
    • Changelog
  • Configuration
    • Overview
    • Site-level settings
    • Page-level settings
  • Writing content
    • Markdown basics
    • Rich media in Markdown
      • Overview
      • Accordion
      • Anchor
      • Aside
      • Badge
      • Button
      • Callout
      • Card
      • Code block
      • Copy
      • Download
      • Endpoint request snippet
      • Endpoint response snippet
      • Endpoint schema snippet
      • Webhook payload snippet
      • Files
      • Frame
      • Icon
      • If
      • Indent
      • Parameter field
      • Prompt
      • Runnable endpoint
      • Schema
      • Step
      • Table
      • Tab
      • Tooltip
      • Versions
    • Fern Editor
    • Reusable snippets
  • AI features
    • Overview
    • Fern Writer
    • AI-generated examples
    • Markdown access
      • Overview
      • Customize LLM output
      • Agent directives
      • Analytics and integration
    • MCP server
    • API catalog discovery
  • Public API
    • GETJWT from Fern API key
    • GETAlgolia search credentials
    • GETCurrent user information
  • Fern Writer API
    • GETGet Fern Writer Install Link
Checking status...
SOC2Soc 2 Type II
© 2026 Fern • Birch Solutions, Inc., a Postman company

Documentation

SDKsDocsAsk FernCLI Reference

API Definitions

OpenAPIAsyncAPIOpenRPCgRPC

Resources

BlogSupportPricing

Company

Brand KitPrivacy PolicyTerms of Service
LogoLogo
Book a demoLog inStart for free
On this page
  • Usage
  • Variants
  • Sizes
  • Colors
  • Font Awesome styles
  • Custom SVG icon
  • Properties
Writing contentComponents

Icon

||View as Markdown|
Was this page helpful?
Edit this page
Previous

Frame

Next

If

The <Icon> component displays Font Awesome icons in your documentation with support for all Font Awesome Pro styles.

Usage

Basic icon
Markdown
1<Icon icon="seedling" /> Basic icon

Variants

Sizes

Large icon
Markdown
1<Icon icon="warning" size="7" /> Large icon

Colors

Colored icon
Markdown
1<div><Icon icon="check" color="#22C55E" /> Colored icon</div>

Font Awesome styles

Default (Solid)
Regular
Light
Thin
Duotone
Sharp Solid
Brands
Markdown
1<Icon icon="heart" /> Default (Solid)
2<Icon icon="fa-regular fa-heart" /> Regular
3<Icon icon="fa-light fa-heart" /> Light
4<Icon icon="fa-thin fa-heart" /> Thin
5<Icon icon="fa-duotone fa-heart" /> Duotone
6<Icon icon="fa-sharp fa-solid fa-heart" /> Sharp Solid
7<Icon icon="fa-brands fa-github" /> Brands

Custom SVG icon

Use a relative path to display a custom SVG file from your project.

Markdown
1<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon

Properties

icon
stringRequired

A Font Awesome icon name (e.g., “heart” or “fa-solid fa-heart”) or a relative path to an SVG file (e.g., ”./images/icon.svg”)

color
string

Icon color (hex, RGB, or color name). Ignored if lightModeColor and darkModeColor are both set

darkModeColor
string

Icon color for dark mode (hex, RGB, or color name)

lightModeColor
string

Icon color for light mode (hex, RGB, or color name)

size
numberDefaults to 4

Size of the icon (width and height) calculated as size * 4 pixels (e.g., 4 = 16px, 8 = 32px).

className
string

Additional CSS classes to apply to the icon