Icons

Add icons from Font Awesome, Lucide, Tabler, or custom sources to your documentation pages using the icon component with size and color options.

Use icons from Font Awesome, Lucide, Tabler, SVGs, external URLs, or files in your project to enhance your documentation.

Icon example

<Icon icon="flag" size={32} />

Inline icons

Icons are placed inline when used within a sentence, paragraph, or heading. Use icons for decoration or to add visual emphasis.

Inline example

Icons are placed inline when used within a sentence, paragraph, or heading. <Icon icon="flag" iconType="solid" /> Use icons for decoration or to add visual emphasis.

Properties

icon · string · required

The icon to display.

Options:

• Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
• Lucide icon name, if you have the icons.library property set to lucide in your docs.json
• Tabler icon name, if you have the icons.library property set to tabler in your docs.json
• URL to an externally hosted icon
• Path to an icon file in your project

iconType · string

The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

color · string

The color of the icon as a hex code (for example, #FF5733).

size · number

The size of the icon in pixels.

className · string

Custom CSS class name to apply to the icon.