Skip to main content
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 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
  • 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.