Icons

Use icons from popular icon libraries

Use icons from Font Awesome, Lucide, 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 paragraph.

The documentation you want, effortlessly.

Inline example

<Icon icon="flag" iconType="solid" /> The documentation you want, effortlessly.

Properties

icon · string · required

The icon to display.

Options:

• Font Awesome icon name
• Lucide icon name
• JSX-compatible SVG code wrapped in curly braces
• URL to an externally hosted icon
• Path to an icon file in your project

For custom SVG icons:

1. Convert your SVG using the SVGR converter.
2. Paste your SVG code into the SVG input field.
3. Copy the complete <svg>...</svg> element from the JSX output field.
4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
5. Adjust height and width as needed.

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.