Usage
<Icon> renders an icon inline with text. It supports three icon libraries out of the box, plus image URLs and emoji.
Click the <Icon name="settings" /> icon to open settings.
Press <Icon name="search" /> to focus the search bar.Click the icon to open settings. Press to focus the search bar.
Mintlify compatibility
If you're migrating from Mintlify, <Icon icon="flag" size={32} /> works as-is. The icon prop is an alias for name:
<Icon icon="flag" size={32} />
<Icon icon="rocket" size={24} />Both name and icon are accepted. If both are provided, name takes precedence.
NookDocs resolves icons in this order: Lucide → Tabler → Font Awesome. Most common icon names (rocket, flag, code, etc.) exist across all libraries, so migration works seamlessly regardless of which library your Mintlify docs used.
Sizing
Default size is 16px, matching the surrounding body text. Override with the size prop:
<Icon name="rocket" size={12} />
<Icon name="rocket" size={16} />
<Icon name="rocket" size={24} />
<Icon name="rocket" size={32} />Custom color
By default the icon inherits the surrounding text color (currentColor). Override with the color prop:
<Icon name="check-circle" color="var(--docs-success)" />
<Icon name="alert-triangle" color="var(--docs-warning)" />
<Icon name="x-circle" color="var(--docs-danger)" />Success state
Warning state
Error state
Image URL icons
Pass an HTTP(S) URL or absolute file path to render an external image as an icon:
<Icon name="https://cdn.example.com/logo.svg" size={24} />
<Icon name="/images/custom-icon.png" size={20} />Supported libraries
Icons are resolved in order. The first match wins:
| Library | Icons | Best for |
| Lucide | Full set (~1,900) | Clean, modern stroke icons (default) |
| Tabler | ~100 curated + brand icons | Brand logos (github, react, nextjs, docker, etc.) |
| Font Awesome Free | ~100 solid + brand icons | Classic FA icons migrating from Mintlify |
Browse the full icon catalogs on each library's website. Common names like rocket, flag, code, settings, lock exist in all three — the first match (Lucide) renders. The ~115 most common Lucide icons render instantly during server rendering; the rest load as tiny on-demand chunks in the browser.
The same resolution applies everywhere an icon name is accepted — page frontmatter (icon:), navigation tabs and groups, <Card>, <Callout>, <Steps>, and this component. icon: github in frontmatter renders the Tabler brand icon in the sidebar.
Changing the default library
Set icons.library in your nookdocs.config.json to change the resolution order. This is especially useful when migrating from Mintlify where your docs used a specific library:
{
"icons": {
"library": "fontawesome"
}
}| Value | Resolution order |
"lucide" (default) | Lucide → Tabler → Font Awesome |
"tabler" | Tabler → Lucide → Font Awesome |
"fontawesome" | Font Awesome → Lucide → Tabler |
Font Awesome icon styles
When using Font Awesome icons, the iconType prop selects the icon style:
<Icon icon="github" iconType="brands" />
<Icon icon="flag" iconType="solid" />| iconType | Behavior |
"solid" (default) | FA Solid (free) |
"brands" | FA Brands (github, twitter, etc.) |
"regular" | Falls back to solid (free set) |
"light" / "thin" / "duotone" / "sharp-solid" | Falls back to solid (FA Pro required) |
Brand icons
Brand icons are available via Tabler and Font Awesome:
<Icon name="github" size={20} />
<Icon name="react" size={20} />
<Icon name="docker" size={20} />
<Icon name="nextjs" size={20} />
<Icon name="python" size={20} />If an icon name isn't in any registry, it renders as plain text — so you can pass an emoji as a graceful fallback (<Icon name="🚀" />).
When to use vs component icon prop
<Icon> standalone | Component icon prop | |
| Use case | Inline-with-text references | Decorative icons inside Card, Callout, Step |
| Example | "Click " | <Card icon="rocket" title="..." /> |
| Sizing | Inline with text | Component-defined |
Props
| Prop | Type | Default | Description |
name | string | — | Lucide icon name, URL, or emoji (canonical prop) |
icon | string | — | Alias for name (Mintlify compatibility) |
size | number | 16 | Pixel size |
color | string | currentColor | Color override (CSS color or CSS variable) |
className | string | — | Custom CSS class on the wrapper element |
iconType | string | "solid" | FA icon style: "solid", "brands", "regular", etc. |