Skip to content

Update from code changes: note emoji as icon option #7337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ethanpalm merged 4 commits into from
Sep 11, 2026
Merged

Update from code changes: note emoji as icon option #7337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43773f9
docs: note emoji as an icon option in frontmatter and components
mintlify[bot] Sep 11, 2026
7b0c19f
translations
ethanpalm Sep 11, 2026
872cdf8
fix emoji examples for Windows
ethanpalm Sep 11, 2026
81bab1b
copy edits
ethanpalm Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Icons"
description: "Add icons from Font Awesome, Lucide, Tabler, or custom sources to your documentation pages using the icon component with size and color options."
keywords: ["Font Awesome", "Lucide", "Tabler", "SVGs"]
description: "Add icons from Font Awesome, Lucide, Tabler, emoji, or custom sources to your documentation pages using the icon component with size and color options."
keywords: ["Font Awesome", "Lucide", "Tabler", "SVGs", "emoji"]
boost: 3
---

import IconsRequired from "/snippets/icons-required.mdx";

Use icons from Font Awesome, Lucide, Tabler, SVGs, external URLs, or files in your project to enhance your documentation.
Use icons from Font Awesome, Lucide, Tabler, emoji, SVGs, external URLs, or files in your project to enhance your documentation.

<Icon icon="flag" size={32} />

Expand Down Expand Up @@ -38,7 +38,7 @@ Icons appear inline when used within a sentence, paragraph, or heading. <Icon ic
<IconsRequired />

<ResponseField name="color" type="string">
The color of the icon as a hex code (for example, `#FF5733`).
The color of the icon as a hex code (for example, `#FF5733`). Not applied to emoji icons.
</ResponseField>

<ResponseField name="size" type="number">
Expand Down
2 changes: 1 addition & 1 deletion components/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ Set these properties on each individual `<Tab>` component.
</ResponseField>

<ResponseField name="icon" type="string">
A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
A [Font Awesome](https://fontawesome.com/icons), [Lucide](https://lucide.dev/icons), or [Tabler](https://tabler.io/icons) icon, a single emoji, a URL to an icon, or a relative path to an icon.
</ResponseField>

<ResponseField name="iconType" type="string">
Expand Down
2 changes: 1 addition & 1 deletion components/view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ If you have different heading structures in each view, users only see the headin
</ResponseField>

<ResponseField name="icon" type="string">
A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
A [Font Awesome](https://fontawesome.com/icons), [Lucide](https://lucide.dev/icons), or [Tabler](https://tabler.io/icons) icon, a single emoji, a URL to an icon, or a relative path to an icon.
</ResponseField>

<ResponseField name="iconType" type="string">
Expand Down
1 change: 1 addition & 0 deletions es/organize/pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ Usa el frontmatter para controlar:
* nombre del [icono de Font Awesome](https://fontawesome.com/icons)
* nombre del [icono de Lucide](https://lucide.dev/icons)
* nombre del [icono de Tabler](https://tabler.io/icons)
* Un solo emoji (por ejemplo, `💡` o `🚀`)
* URL de un icono alojado externamente
* Ruta a un archivo de icono en tu proyecto
</ResponseField>
Expand Down
1 change: 1 addition & 0 deletions fr/organize/pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ Utilisez le frontmatter pour contrôler :
* Nom de l’[icône Font Awesome](https://fontawesome.com/icons)
* Nom de l’[icône Lucide](https://lucide.dev/icons)
* Nom de l’[icône Tabler](https://tabler.io/icons)
* Un seul emoji (par exemple, `💡` ou `🚀`)
* URL d’une icône hébergée en externe
* Chemin vers un fichier d’icône dans votre projet
</ResponseField>
Expand Down
1 change: 1 addition & 0 deletions organize/pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ Use frontmatter to control:
- [Font Awesome icon](https://fontawesome.com/icons) name
- [Lucide icon](https://lucide.dev/icons) name
- [Tabler icon](https://tabler.io/icons) name
- A single emoji (for example, `💡` or `🚀`)
- URL to an externally hosted icon
- Path to an icon file in your project
</ResponseField>
Expand Down
4 changes: 2 additions & 2 deletions organize/settings-reference.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,7 +549,7 @@
| `type` | `"github"` \| `"discord"` | No | Link type. Omit for a standard link. |
| `label` | string | Conditional | Required when `type` is omitted. |
| `href` | string (uri) | Yes | Link destination. |
| `icon` | string | No | Icon name, URL, path, or SVG. |
| `icon` | string | No | Icon name, emoji, URL, path, or SVG. |
| `iconType` | string | No | Font Awesome icon style only. |

#### `navbar.primary`
Expand Down Expand Up @@ -657,7 +657,7 @@
|---|---|---|---|
| `title` | string | Yes | Display title. |
| `description` | string | Yes | Description text. |
| `icon` | string | No | Icon name, URL, path, or SVG. |
| `icon` | string | No | Icon name, emoji, URL, path, or SVG. |
| `href` | string or object | Yes | Link destination. Supports `$page`, `$path`, `$mcp` placeholders. |

#### `contextual.display`
Expand Down Expand Up @@ -828,7 +828,7 @@

##### `api.examples.languages`

Languages for autogenerated code snippets. See [supported languages](/api-playground/overview#all-supported-languages).

Check warning on line 831 in organize/settings-reference.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

organize/settings-reference.mdx#L831 

Use 'API' instead of 'api'.

**Type:** array of string

Expand Down
1 change: 1 addition & 0 deletions snippets/es/icons-optional.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
* Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
* Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `tabler` en tu `docs.json`
* Un solo emoji (por ejemplo, `💡` o `🚀`)
* URL de un ícono alojado externamente
* Ruta a un archivo de ícono en tu proyecto
* Código SVG envuelto entre llaves
Expand Down
1 change: 1 addition & 0 deletions snippets/es/icons-required.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `fontawesome` in your `docs.json`
* [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `lucide` in your `docs.json`
* Nombre del [icono Tabler](https://tabler.io/icons), si tienes la `icons.library` [propiedad](/es/organize/settings#param-icons) configurada como `tabler` en tu `docs.json`
* Un solo emoji (por ejemplo, `💡` o `🚀`)
</ResponseField>

<ResponseField name="src" type="string">
Expand Down
1 change: 1 addition & 0 deletions snippets/fr/icons-optional.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* [Font Awesome](https://fontawesome.com/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `fontawesome` dans votre `docs.json`
* [Lucide](https://lucide.dev/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `lucide` dans votre `docs.json`
* [Tabler](https://tabler.io/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `tabler` dans votre `docs.json`
* Un seul emoji (par exemple, `💡` ou `🚀`)
* URL vers une icône hébergée en externe
* Chemin vers un fichier d’icône dans votre projet
* Code SVG entouré d’accolades
Expand Down
1 change: 1 addition & 0 deletions snippets/fr/icons-required.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* Nom d’icône [Font Awesome](https://fontawesome.com/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `fontawesome` dans votre `docs.json`
* Nom d’icône [Lucide](https://lucide.dev/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `lucide` dans votre `docs.json`
* Nom d’icône [Tabler](https://tabler.io/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `tabler` dans votre `docs.json`
* Un seul emoji (par exemple, `💡` ou `🚀`)
</ResponseField>

<ResponseField name="src" type="string">
Expand Down
1 change: 1 addition & 0 deletions snippets/icons-optional.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
- [Font Awesome](https://fontawesome.com/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `fontawesome` in your `docs.json`
- [Lucide](https://lucide.dev/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `lucide` in your `docs.json`
- [Tabler](https://tabler.io/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `tabler` in your `docs.json`
- A single emoji (for example, `💡` or `🚀`)
- URL to an externally hosted icon
- Path to an icon file in your project
- SVG code wrapped in curly braces
Expand Down
3 changes: 2 additions & 1 deletion snippets/icons-required.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@
</Info>

<ResponseField name="icon" type="string">
The icon to display from an icon library.
The icon to display.

Options:
- [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `fontawesome` in your `docs.json`
- [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `lucide` in your `docs.json`
- [Tabler icon](https://tabler.io/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `tabler` in your `docs.json`
- A single emoji (for example, `💡` or `🚀`)
</ResponseField>

<ResponseField name="src" type="string">
Path or URL to an image to use as the icon. Use `src` instead of `icon` when you want to use a custom image rather than an icon from a library.

Options:
- Path to an image file in your project (for example, `/images/my-icon.svg`)

Check warning on line 19 in snippets/icons-required.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

snippets/icons-required.mdx#L19 

Avoid first-person pronouns such as 'my'.
- URL to an externally hosted image (for example, `https://example.com/icon.png`)
</ResponseField>

Expand Down
1 change: 1 addition & 0 deletions snippets/zh/icons-optional.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* [Font Awesome](https://fontawesome.com/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`)
* [Lucide](https://lucide.dev/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`)
* [Tabler](https://tabler.io/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`)
* 单个 emoji（例如 `💡` 或 `🚀`）
* 指向外部托管图标的 URL
* 项目中图标文件的路径
* 用花括号包裹的 SVG 代码
Expand Down
1 change: 1 addition & 0 deletions snippets/zh/icons-required.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`，则为 [Font Awesome 图标](https://fontawesome.com/icons) 的名称
* 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`，则为 [Lucide 图标](https://lucide.dev/icons) 的名称
* 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`，则为 [Tabler 图标](https://tabler.io/icons) 的名称
* 单个 emoji（例如 `💡` 或 `🚀`）
</ResponseField>

<ResponseField name="src" type="string">
Expand Down
1 change: 1 addition & 0 deletions zh/organize/pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ boost: 3
* [Font Awesome icon](https://fontawesome.com/icons) 名称
* [Lucide icon](https://lucide.dev/icons) 名称
* [Tabler icon](https://tabler.io/icons) 名称
* 单个 emoji（例如 `💡` 或 `🚀`）
* 指向外部托管图标的 URL
* 项目中图标文件的路径
</ResponseField>
Expand Down