Writing contentComponents

Icon

View as Markdown

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

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