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 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.
<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.
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
You must include one of icon or src.
iconstringThe icon to display from an icon library.
Options:
- Font Awesome icon name, if you have the
icons.libraryproperty set tofontawesomein yourdocs.json - Lucide icon name, if you have the
icons.libraryproperty set tolucidein yourdocs.json - Tabler icon name, if you have the
icons.libraryproperty set totablerin yourdocs.json
srcstringPath 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)
iconTypestringThe Font Awesome icon style. Only used with Font Awesome icons.
Options: regular, solid, light, thin, sharp-solid, duotone, brands.
colorstringThe color of the icon as a hex code (for example, #FF5733).
sizenumberThe size of the icon in pixels.
classNamestringCustom CSS class name to apply to the icon.