# Icon

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

An icon or a small image in the text - and the icons you can use anywhere an icon is accepted.

`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 .

```mdx
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`: .

```mdx
<Icon src="/images/card-demo.svg" alt="Card" height="1.4em" />
```

## Props

Give it `icon` or `src`.

**`icon`** `string`

The icon - see [Icons](#icons) below.

**`size`** `number`

The icon's size in pixels. Without it, the size of the text around it.

**`color`** `string`

The icon's color - any CSS color. Without it, the color of the text around it.

**`src`** `string`

An image to show in place of an icon: a path or a URL.

**`alt`** `string`

The image's description, for screen readers. Only with `src`.

**`height`** `string` default: `1.6em`

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](https://lucide.dev/icons/). A name Lucide doesn't have is looked up in [Font Awesome](https://fontawesome.com/search?ic=free)'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](https://lucide.dev/icons/) |
| Font Awesome (solid) | `fa6-solid:` | [fontawesome.com](https://fontawesome.com/search?ic=free&s=solid) |
| Font Awesome (brands) | `fa6-brands:` | [fontawesome.com](https://fontawesome.com/search?ic=free&s=brands) |
| Material Design Icons | `mdi:` | [pictogrammers.com](https://pictogrammers.com/library/mdi/) |
| Tabler Icons | `tabler:` | [tabler.io](https://tabler.io/icons) |
| Heroicons | `heroicons:` | [heroicons.com](https://heroicons.com) |
| Ionicons | `ion:` | [ionic.io](https://ionic.io/ionicons) |
| Remix Icon | `ri:` | [remixicon.com](https://remixicon.com) |
| Bootstrap Icons | `bi:` | [icons.getbootstrap.com](https://icons.getbootstrap.com) |
| Simple Icons (brands) | `simple-icons:` | [simpleicons.org](https://simpleicons.org) |

An icon name that doesn't exist isn't shown, and [`writedocs validate`](https://preview.writedocs.io/docs/cli/#writedocs-validate) warns about it, with the file and line.