Use <Icon> to render Font Awesome icons in your documentation pages. Pass the icon slug as name without the fa- prefix, for example user for a person icon or github for the GitHub brand mark.
Icons inherit the parent font size by default. Set size to control the pixel size, or pass standard <i> attributes such as className and style for color and layout.
<Icon name="user" size={40} style={{ color: 'red' }} /><Icon name="user" size={40} style={{ color: 'red' }} />Browse the Font Awesome icon library and copy the icon slug from the icon page. Use the slug without the fa- prefix.
| On Font Awesome | In your page |
|---|---|
fa-user | name="user" |
fa-book | name="book" |
fa-github | name="github" |
docs.page ships Font Awesome solid and brand styles. Regular (fa-regular) and light (fa-light) variants are not available.
Place <Icon> inside a sentence for emphasis or visual cues. Omit size to match surrounding text. Pass aria-hidden when the icon is decorative and nearby text conveys the meaning.
Add a
to your favorites, or open
from the sidebar.
Add a <Icon name="star" className="text-amber-500" aria-hidden /> to your favorites, or open <Icon name="folder-open" aria-hidden /> from the sidebar.Set size in pixels. Pass style or className for color and spacing.
Small confirmation
Medium confirmation
Large confirmation
<Icon name="circle-check" size={16} className="text-green-600" />
<Icon name="circle-check" size={24} className="text-green-600" />
<Icon name="circle-check" size={32} className="text-green-600" />Brand icons (GitHub, npm, Docker, and similar) use the fa-brands style automatically. Pass the brand slug as name; docs.page detects brands from the bundled icon set.
<Icon name="github" size={20} />
<Icon name="npm" size={20} />
<Icon name="docker" size={20} />The <Card> component accepts an icon property that renders a header icon using the same slug format. See Card for layout options.
<Card title="API reference" icon="code">
Browse endpoints, request bodies, and response schemas.
</Card>Use the icon property on <Step> to replace the default step number with a custom icon. Useful when a procedure step has a clear visual association.
Install dependencies
Run the install command for your package manager:
bashnpm installConfigure the project
Add your API key to the environment file.
Deploy
Push to your default branch to publish.
<Steps>
<Step title="Install dependencies" icon="download">
Run the install command for your package manager.
</Step>
<Step title="Configure the project" icon="gear">
Add your API key to the environment file.
</Step>
<Step title="Deploy" icon="rocket">
Push to your default branch to publish.
</Step>
</Steps>The Font Awesome icon slug. Pass the name from fontawesome.com/icons without the fa- prefix, for example user, book, or github.
Brand slugs such as github and npm automatically use the brands style (fa-brands). All other slugs use the solid style (fa-solid).
The icon size in pixels. When omitted, the icon inherits the parent element's font size.
<Icon name="star" size={24} /><Icon> renders a native <i> element. Any attribute not consumed by name or size is forwarded to that element (className, style, aria-hidden, title, and others).
The component always applies fa-fw for consistent width, plus either fa-brands or fa-solid and fa-{name} based on the slug.
<Icon
name="triangle-exclamation"
className="text-amber-500 mr-1"
aria-hidden
/>| Condition | Result |
|---|---|
name matches a brand slug in the icon set | Renders with fa-brands fa-{name} |
name is any other valid slug | Renders with fa-solid fa-{name} |
size omitted | Icon uses the parent font size |
size set | font-size is set to {size}px on the <i> element |
style passed | Merged with the component's inline styles; your values override on conflict |
- Card:
iconproperty on card headers - Steps:
iconproperty on individual steps - Components overview: when to use icons, cards, and callouts