Icon
Icon shows an icon in the text, the size of the text around it: like this, or bigger and in a color of your own .
An icon in a sentence <Icon icon="rocket" />, and a bigger red one <Icon icon="rocket" size={22} color="#dc2626" />.An image works the same way, with src: 
.
<Icon src="/images/card-demo.svg" alt="Card" height="1.4em" />Props
Give it icon or src.
The icon - see Icons below.
The icon’s size in pixels. Without it, the size of the text around it.
The icon’s color - any CSS color. Without it, the color of the text around it.
An image to show in place of an icon: a path or a URL.
The image’s description, for screen readers. Only with src.
The image’s height - any CSS length. Only with src.
Icons
The same icons work everywhere an icon is accepted: this component, the icon prop of other components, a page’s icon in frontmatter, and icon fields in writedocs.json - tabs, products, dropdowns, topbar and footer links, socials.
An icon can be:
- A name, like
"rocket","book-open"or"credit-card". Names come from Lucide. A name Lucide doesn’t have is looked up in Font Awesome’s free icons - solid, then brands - so"gear"and"discord"work too. - A set and a name, like
"mdi:server"or"simple-icons:stripe", for an icon from one of the sets below. - An image: a path or URL starting with
/,./,../,https://or//, like"/images/logo-mark.svg". It’s shown at the size of an icon. - Anything else, like an emoji -
"🚀"- shown as text.
| Set | Prefix | Browse |
|---|---|---|
| Lucide | lucide: | lucide.dev |
| Font Awesome (solid) | fa6-solid: | fontawesome.com |
| Font Awesome (brands) | fa6-brands: | fontawesome.com |
| Material Design Icons | mdi: | pictogrammers.com |
| Tabler Icons | tabler: | tabler.io |
| Heroicons | heroicons: | heroicons.com |
| Ionicons | ion: | ionic.io |
| Remix Icon | ri: | remixicon.com |
| Bootstrap Icons | bi: | icons.getbootstrap.com |
| Simple Icons (brands) | simple-icons: | simpleicons.org |
An icon name that doesn’t exist isn’t shown, and writedocs validate warns about it, with the file and line.