Skip to main content
Use icons from Font Awesome, Lucide, Tabler, emoji, SVGs, external URLs, or files in your project to enhance your documentation.
Icon example

​
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

​
Inline icons

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

​
Properties

You must include one of icon or src.
​
string
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
  • Tabler icon name, if you have the icons.library property set to tabler in your docs.json
  • A single emoji (for example, 💡 or 🚀)
​
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)
​
string
The Font Awesome icon style. Only used with Font Awesome icons.Options: regular, solid, light, thin, sharp-solid, duotone, brands.
​
string
The color of the icon as a hex code (for example, #FF5733). Not applied to emoji icons.
​
number
The size of the icon in pixels.
​
string
Additional CSS classes to apply to the icon.