# Icons
Use inline icons and icon-led surfaces to make component grids and docs actions easier to scan.
Source: /docs/components/icons
Last modified: 2026-06-20
Icons should clarify the object or action. Every linked tile and card should have one.

## Inline icons

<div class="not-prose my-6 flex flex-wrap items-center gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-sm text-neutral-700">
  <span>[icon: package] Offers</span>
  <span>[icon: timer] Timers</span>
  <span>[icon: webhook] Webhooks</span>
  <span>[icon: braces] API</span>
  <span>[icon: flag] Solid style</span>
</div>

```mdx title="icons-example.mdx"
[icon: package] Offers
[icon: timer] Timers
[icon: webhook] Webhooks
[icon: braces] API
[icon: flag] Solid style
```

## Mintlify import patterns

Imported Mintlify MDX often names icon libraries directly. Plandalf normalizes those values into the shared icon layer so cards, tiles, tabs, callouts, badges, and inline icons all stay visually consistent.

<div class="not-prose my-6 grid gap-2.5 rounded-lg border border-neutral-200 bg-white p-4 text-sm text-neutral-700 sm:grid-cols-2">
  <span class="inline-flex items-center gap-2">[icon: lucide:panel-left-open] Lucide prefix</span>
  <span class="inline-flex items-center gap-2">[icon: fa:circle-info] Font Awesome prefix</span>
  <span class="inline-flex items-center gap-2">[icon: tabler:brand-react] Tabler prefix</span>
  <span class="inline-flex items-center gap-2">[icon: /platforms/stripe.svg] Image path</span>
  <span class="inline-flex items-center gap-2">[icon: [SVG preview]] Inline SVG</span>
</div>

```mdx title="mintlify-icon-imports.mdx"
[icon: lucide:panel-left-open]
[icon: fa:circle-info]
[icon: tabler:brand-react]
[icon: /platforms/stripe.svg]
[icon: [SVG preview]]
```

## Size and color

Use named sizes for most docs text. Use numeric sizes only when an icon needs to align with a custom UI surface.

<div class="not-prose my-6 flex flex-wrap items-center gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-sm text-neutral-700">
  <span class="inline-flex items-center gap-2">[icon: check-circle] xs</span>
  <span class="inline-flex items-center gap-2">[icon: check-circle] sm</span>
  <span class="inline-flex items-center gap-2">[icon: check-circle] md</span>
  <span class="inline-flex items-center gap-2">[icon: check-circle] lg</span>
  <span class="inline-flex items-center gap-2">[icon: flag] 32px</span>
  <span class="inline-flex items-center gap-2">[icon: check-circle] 28px</span>
</div>

```mdx title="icon-sizes.mdx"
[icon: check-circle]
[icon: check-circle]
[icon: check-circle]
[icon: check-circle]
[icon: flag]
[icon: check-circle]
```

## Navigation surfaces

Cards and tiles use the same icon resolver. Prefer product-specific names before generic names.


  - [Offers](/docs/offers/overview): Sale primitives.
  - [Timers](/docs/timers/overview): Deadline funnels.
  - [Webhooks](/docs/api/webhooks): Automation events.


```mdx title="icon-led-tiles.mdx"

  - [Offers](/docs/offers/overview): Sale primitives.
  - [Timers](/docs/timers/overview): Deadline funnels.
  - [Webhooks](/docs/api/webhooks): Automation events.

```

## Supported sources


### Icon sources


- `Shared aliases` (package, timer, webhook, braces, layout-grid):
    Use Plandalf's built-in aliases for common product and docs objects.


- `Lucide names` (string):
    Most installed Lucide icon names resolve automatically after normalization.


- `Font Awesome and Tabler prefixes` (fa:, fas:, far:, tabler:):
    Common Mintlify library prefixes are accepted and mapped to the closest local or Lucide-backed icon. The original `iconType` is kept as metadata for compatibility checks.


- `Image URLs` (string):
    A public `.svg`, `.png`, `.jpg`, `.webp`, or absolute URL renders as an image icon.


- `Inline SVG` (string):
    Inline SVG is supported for imported docs, but shared aliases are easier to audit.


## Properties


- `icon` (string; required):
  The icon to display.

  Options:

  - Font Awesome icon name, when imported MDX expects Font Awesome-style names.
  - Lucide icon name, such as `flag`, `panel-left-open`, or `message-square-warning`.
  - Tabler icon name, usually imported with the `tabler:` prefix.
  - URL to an externally hosted icon.
  - Path to an icon file in this project.
  - SVG code wrapped as a string for compatibility with imported MDX.


- `name` (string):
  Plandalf alias for `icon`. Prefer `icon` when copying Mintlify examples directly.


- `iconType` (string):
  The Font Awesome icon style. Only used with Font Awesome-style imports.

  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.


- `color` (string):
  The color of the icon as a CSS color value, such as `#0f766e`.


- `size` (number | string; default: md):
  The size of the icon. Mintlify numeric sizes such as `{32}` render in pixels; Plandalf also supports `xs`, `sm`, `md`, and `lg`.


- `className` (string):
  Custom CSS class name to apply to the icon.


- `class` (string):
  Astro-compatible class alias for custom placement.


## Authoring rules

- Use icons to identify the object, not to decorate every sentence.
- Avoid fallback icons. If a name does not render, choose an existing alias or a Lucide name.
- Keep icons in buttons, cards, tiles, and compact labels. Do not use oversized icons as page art.

## Related


  - [Cards](/docs/components/cards): Use icons in linked cards.
  - [Tiles](/docs/components/tiles): Use icon-led grids.
  - [Color](/docs/components/color): Pair icons with palette tokens.