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} />

Custom image icons

Use the src prop to display a custom image as an icon. The image can be a file in your project or an externally hosted URL.

Custom image examples

<Icon src="/images/my-icon.svg" />

<Icon src="https://example.com/icon.png" />

Inline icons

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

Inline example

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

Properties

Either icon or src must be provided.

icon · string

The icon to display from an icon library.

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

src · string

Path or URL to an image to use as the icon. Use src instead of icon when you want to use a custom image rather than an icon from a library.

Options:

• Path to an image file in your project (for example, /images/my-icon.svg)
• URL to an externally hosted image (for example, https://example.com/icon.png)

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.