Icons

Icons add visual cues and polish to your documentation. This system uses Tabler Icons, a consistent open-source icon library.

Usage

You can use the <Icon> component to render any icon from the Tabler library.

<Icon name="rocket" />
<Icon name="settings" />
<Icon name="user" />

Customization

You can customize the color, size, and styling of icons.

Color

Use the color prop to set the icon color (hex code, or any CSS color).

<Icon name="heart" color="#e11d48" />
<Icon name="check" color="green" />

Size

Use the size prop to set the size in pixels.

<Icon name="bell" size="16" />
<Icon name="bell" size="32" />
<Icon name="bell" size="48" />

Classes

Use the className prop to add custom CSS classes (e.g., Tailwind classes).

<Icon name="sun" className="text-amber-500 animate-spin" />

Browse Icons

You can browse all available icons on the official Tabler Icons website. Use the icon name (kebab-case) as the name prop.