diff --git a/ai/contextual-menu.mdx b/ai/contextual-menu.mdx
index 4f342e1f2..24fec5752 100644
--- a/ai/contextual-menu.mdx
+++ b/ai/contextual-menu.mdx
@@ -5,6 +5,7 @@ icon: "square-menu"
---
import { PreviewButton } from "/snippets/previewbutton.jsx"
+import IconsRequired from "/snippets/icons-required.mdx";
The contextual menu provides quick access to AI-optimized content and direct integrations with popular AI tools. When users select the contextual menu on any page, they can copy content as context for AI tools or open conversations in ChatGPT, Claude, Perplexity, or a custom tool of your choice with your documentation already loaded as context.
@@ -54,9 +55,7 @@ Create custom options in the contextual menu by adding an object to the `options
The description of the option. Displayed beneath the title when the contextual menu is expanded.
-
- The icon of the option. Accepts any icon from the [Icons](/components/icons) collection.
-
+
The href of the option. Use a string for simple links or an object for dynamic links with query parameters.
diff --git a/code.mdx b/code.mdx
index 8be187ba9..9cdebff96 100644
--- a/code.mdx
+++ b/code.mdx
@@ -93,7 +93,7 @@ const hello = "world";
### Icon
-Add an icon to your code block. You can use [FontAwesome](https://fontawesome.com/icons) icons, [Lucide](https://lucide.dev/icons/) icons, or absolute URLs.
+Add an icon to your code block using the `icon` property. See [Icons](/components/icons) for all available options.
```javascript icon="square-js"
const hello = "world";
diff --git a/components/accordions.mdx b/components/accordions.mdx
index b7f7c50a7..7aa0c4c8d 100644
--- a/components/accordions.mdx
+++ b/components/accordions.mdx
@@ -4,6 +4,8 @@ description: "Collapsible components to show and hide content"
icon: "chevron-down"
---
+import IconsOptional from "/snippets/icons-optional.mdx";
+
Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information.
## Single accordion
@@ -97,11 +99,4 @@ Group related accordions together using ``. This creates a cohes
Whether the Accordion is open by default.
-
- A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
- icon](https://lucide.dev/icons), or SVG code.
-
-
-
- For Font Awesome icons, one of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or "brands".
-
+
diff --git a/components/cards.mdx b/components/cards.mdx
index f724c5452..87323c823 100644
--- a/components/cards.mdx
+++ b/components/cards.mdx
@@ -4,6 +4,8 @@ description: "Highlight main points or links with customizable layouts and icons
icon: "square-mouse-pointer"
---
+import IconsOptional from "/snippets/icons-optional.mdx";
+
Use cards to create visual containers for content. Cards are flexible containers that can include text, icons, images, and links.
## Basic card
@@ -102,19 +104,7 @@ Use the [Columns component](/components/columns) to organize multiple cards side
The title displayed on the card
-
- Icon to display on the card. Use a [Font Awesome icon](https://fontawesome.com/icons) name, [Lucide icon](https://lucide.dev/icons) name, or JSX-compatible SVG code wrapped in `icon={}`.
-
- For custom SVG icons:
- 1. Use the [SVGR converter](https://react-svgr.com/playground/).
- 2. Copy the code inside the `` tag.
- 3. Paste the code into your card.
- 4. Adjust height and width as needed.
-
-
-
- Font Awesome icon style: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, or `brands`.
-
+
Icon color as a hex code (e.g., `#FF6B6B`).
diff --git a/components/icons.mdx b/components/icons.mdx
index d703d2858..58c234a5b 100644
--- a/components/icons.mdx
+++ b/components/icons.mdx
@@ -4,7 +4,9 @@ description: "Use icons from popular icon libraries"
icon: "flag"
---
-Use icons from Font Awesome, Lucide, URLs, or files in your project to enhance your documentation.
+import IconsRequired from "/snippets/icons-required.mdx";
+
+Use icons from Font Awesome, Lucide, SVGs, external URLs, or files in your project to enhance your documentation.
@@ -24,13 +26,7 @@ Icons are placed inline when used within a paragraph.
## Properties
-
- A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
-
-
-
- For [Font Awesome](https://fontawesome.com/icons) icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
-
+
The color of the icon as a hex code (for example, `#FF5733`).
diff --git a/components/steps.mdx b/components/steps.mdx
index cd80b3fb8..3f5b1ba1e 100644
--- a/components/steps.mdx
+++ b/components/steps.mdx
@@ -4,6 +4,8 @@ description: "Sequence content using the Steps component"
icon: "list-todo"
---
+import IconsOptional from "/snippets/icons-optional.mdx";
+
Use steps to display a series of sequential actions or events. You can add as many steps as needed.
@@ -48,13 +50,7 @@ Use steps to display a series of sequential actions or events. You can add as ma
The content of a step either as plain text or components.
-
- A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code in `icon={}`.
-
-
-
- For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
-
+
The title is the primary text for the step and shows up next to the indicator.
diff --git a/pages.mdx b/pages.mdx
index 242f9f5e3..88765a156 100644
--- a/pages.mdx
+++ b/pages.mdx
@@ -4,6 +4,8 @@ description: "Pages are the building blocks of your documentation"
icon: "letter-text"
---
+import IconsOptional from "/snippets/icons-optional.mdx";
+
Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation.
## Page metadata
@@ -22,10 +24,7 @@ Every page starts with frontmatter—YAML metadata enclosed by `---` at the begi
A short title that displays in the sidebar navigation.
-
- An icon next to your page title in the sidebar. Choose an icon from Font Awesome, Lucide, or use a custom URL. Configure your preferred icon library with the [icons library setting](/settings#param-icons).
-
-
+
A tag that appears next to your page title in the sidebar.
diff --git a/settings.mdx b/settings.mdx
index 487b52265..3a5e75964 100644
--- a/settings.mdx
+++ b/settings.mdx
@@ -5,6 +5,8 @@ icon: "settings-2"
keywords: ["docs.json", "settings", "customization", "configuration"]
---
+import IconsOptional from "/snippets/icons-optional.mdx";
+
The `docs.json` file lets you turn a collection of Markdown files into a navigable, customized documentation site. This required configuration file controls styling, navigation, integrations, and more.
Settings in `docs.json` apply globally to all pages.
@@ -146,7 +148,7 @@ See [Themes](themes) for more information.
Icon library to use throughout your documentation. Defaults to `fontawesome`.
- You can specify a URL for any individual icon, regardless of the library setting.
+ You can specify a URL to an externally hosted icon, path to an icon file in your project, or JSX-compatible SVG code for any individual icon, regardless of the library setting.
@@ -277,9 +279,7 @@ See [Themes](themes) for more information.
URL or path for the link destination.
-
- Icon for the link. Can be a URL (relative or external), Font Awesome icon, or Lucide icon.
-
+
@@ -356,9 +356,7 @@ See [Themes](themes) for more information.
Minimum length: 1
-
- Icon for the tab. Can be a URL (relative or external), Font Awesome icon, or Lucide icon.
-
+
Whether to hide this tab by default.
@@ -376,9 +374,7 @@ See [Themes](themes) for more information.
Minimum length: 1
-
- Icon for the anchor. Can be a URL (relative or external), Font Awesome icon, or Lucide icon.
-
+
Custom colors for the anchor.
@@ -413,9 +409,7 @@ See [Themes](themes) for more information.
Minimum length: 1
-
- Icon for the dropdown. Can be a URL (relative or external), Font Awesome icon, or Lucide icon.
-
+
Whether to hide this dropdown by default.
diff --git a/snippets/icons-optional.mdx b/snippets/icons-optional.mdx
new file mode 100644
index 000000000..a538782a1
--- /dev/null
+++ b/snippets/icons-optional.mdx
@@ -0,0 +1,23 @@
+
+ The icon to display.
+
+ Options:
+ - [Font Awesome icon](https://fontawesome.com/icons) name
+ - [Lucide icon](https://lucide.dev/icons) name
+ - JSX-compatible SVG code wrapped in curly braces
+ - URL to an externally hosted icon
+ - Path to an icon file in your project
+
+ For custom SVG icons:
+ 1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/).
+ 1. Paste your SVG code into the SVG input field.
+ 2. Copy the complete `` element from the JSX output field.
+ 3. Wrap the JSX-compatible SVG code in curly braces: `icon={}`.
+ 4. Adjust `height` and `width` as needed.
+
+
+
+ The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.
+
+ Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
+
\ No newline at end of file
diff --git a/snippets/icons-required.mdx b/snippets/icons-required.mdx
new file mode 100644
index 000000000..bed5876e8
--- /dev/null
+++ b/snippets/icons-required.mdx
@@ -0,0 +1,23 @@
+
+ The icon to display.
+
+ Options:
+ - [Font Awesome icon](https://fontawesome.com/icons) name
+ - [Lucide icon](https://lucide.dev/icons) name
+ - JSX-compatible SVG code wrapped in curly braces
+ - URL to an externally hosted icon
+ - Path to an icon file in your project
+
+ For custom SVG icons:
+ 1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/).
+ 1. Paste your SVG code into the SVG input field.
+ 2. Copy the complete `` element from the JSX output field.
+ 3. Wrap the JSX-compatible SVG code in curly braces: `icon={}`.
+ 4. Adjust `height` and `width` as needed.
+
+
+
+ The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.
+
+ Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
+
\ No newline at end of file