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 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.
⌘I