Icon
Inline SVG icons from a built-in icon set — use in headings, callouts, cards, and prose.
The <Icon> component renders a single SVG icon inline. Icons are bundled — no CDN requests, no flicker.
Usage
import { Icon } from '@/components/mdx';
<Icon name="rocket" /><Icon name="rocket" size={24} /><Icon name="rocket" size={32} class="my-icon" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Icon name (required). See the full list below. |
size | number | 16 | Width and height in pixels |
class | string | — | Additional CSS class |
Available icons
arrow-right
arrow-left
check
x
warning
info
external-link
github
book
code
terminal
settings
download
upload
search
lock
unlock
copy
check-circle
alert-circle
alert-triangle
chevron-right
chevron-down
home
folder
file
globe
mail
link
star
rocket
puzzle
lightning
Note
If you request an unknown icon name, nothing is rendered. In npm run dev, a warning is logged to the console listing all valid names.
Inline use
Icons are inline-flex and respect currentColor, so they inherit the surrounding text color:
<Icon name="check-circle" size={18} /> All systems operational
<Icon name="warning" size={18} /> Proceed with cautionAll systems operational
Proceed with caution
Last updated: April 5, 2026
Edit this page on GitHub