mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
693dbc361f
* Fix Vale style warnings across docs from past week of merges Generated-By: mintlify-agent * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
---
|
|
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"]
|
|
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.
|
|
|
|
<Icon icon="flag" size={32} />
|
|
|
|
```mdx Icon example
|
|
<Icon icon="flag" size={32} />
|
|
```
|
|
|
|
## Inline icons
|
|
|
|
Icons appear inline when used within a sentence, paragraph, or heading. <Icon icon="flag" iconType="solid" /> Use icons for decoration or to add visual emphasis.
|
|
|
|
```markdown Inline icon example
|
|
Icons appear inline when used within a sentence, paragraph, or heading. <Icon icon="flag" iconType="solid" /> Use icons for decoration or to add visual emphasis.
|
|
```
|
|
|
|
## Properties
|
|
|
|
<IconsRequired />
|
|
|
|
<ResponseField name="color" type="string">
|
|
The color of the icon as a hex code (for example, `#FF5733`).
|
|
</ResponseField>
|
|
|
|
<ResponseField name="size" type="number">
|
|
The size of the icon in pixels.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Custom CSS class name to apply to the icon.
|
|
</ResponseField>
|