Icons
Add Font Awesome icons to your docs with customizable styles, colors and sizes using the Icon component. All Font Awesome Pro styles are supported.
Example
Markdown
Basic icon
Colored icon
Large icon
Properties
icon
Name of the Font Awesome icon (e.g., “heart” or “fa-solid fa-heart”)
color
Icon color (hex, RGB, or color name)
size
Size in 0.25rem increments (e.g., 4 = 1rem)
Font Awesome styles
You can use any Font Awesome style by using either:
- Short syntax:
icon="heart"(defaults to solid) - Full syntax:
icon="fa-regular fa-heart"(specific style)
Example
Markdown
Default (Solid)
Regular
Light
Thin
Duotone
Sharp Solid
Brands
Best practices
- Use icons consistently throughout your documentation
- Keep icon sizes appropriate for their context (16-24px for inline, larger for featured items)
- Ensure sufficient color contrast for accessibility
- Use semantic icons that reinforce your message (e.g., warning icon for cautions)
- Avoid using too many different icons which can create visual noise
