Plandalf

Icons

Use inline icons and icon-led surfaces to make component grids and docs actions easier to scan.

Icons should clarify the object or action. Every linked tile and card should have one.

Inline icons

Offers Timers Webhooks API Solid style
<Icon name="package" /> Offers
<Icon name="timer" /> Timers
<Icon name="webhook" /> Webhooks
<Icon name="braces" /> API
<Icon icon="flag" iconType="solid" /> 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.

Lucide prefix Font Awesome prefix Tabler prefix Image path Inline SVG
<Icon icon="lucide:panel-left-open" />
<Icon icon="fa:circle-info" iconType="solid" />
<Icon icon="tabler:brand-react" />
<Icon icon="/platforms/stripe.svg" />
<Icon icon={'<svg viewBox="0 0 24 24"><path d="M12 3l7 4v5c0 4-3 7-7 9-4-2-7-5-7-9V7l7-4Z" /></svg>'} />

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.

xs sm md lg 32px 28px
<Icon name="check-circle" size="xs" color="#0f766e" />
<Icon name="check-circle" size="sm" color="#0f766e" />
<Icon name="check-circle" size="md" color="#0f766e" />
<Icon name="check-circle" size="lg" color="#0f766e" />
<Icon icon="flag" size={32} color="#0f766e" />
<Icon name="check-circle" size={28} color="#0f766e" />

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

Offers Sale primitives.
Timers Deadline funnels.
Webhooks Automation events. 
<TileGroup cols={3} gap="sm">
  <Tile title="Offers" icon="package" href="/docs/offers/overview" description="Sale primitives." />
  <Tile title="Timers" icon="timer" href="/docs/timers/overview" description="Deadline funnels." />
  <Tile title="Webhooks" icon="webhook" href="/docs/api/webhooks" description="Automation events." />
</TileGroup>

Supported sources

Icon sources

Shared aliasespackage, timer, webhook, braces, layout-grid

Use Plandalf’s built-in aliases for common product and docs objects.

Lucide namesstring

Most installed Lucide icon names resolve automatically after normalization.

Font Awesome and Tabler prefixesfa:, 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 URLsstring

A public .svg, .png, .jpg, .webp, or absolute URL renders as an image icon.

Inline SVGstring

Inline SVG is supported for imported docs, but shared aliases are easier to audit.

Properties

iconstringrequired

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

Plandalf alias for icon. Prefer icon when copying Mintlify examples directly.

iconTypestring

The Font Awesome icon style. Only used with Font Awesome-style imports.

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

colorstring

The color of the icon as a CSS color value, such as #0f766e.

sizenumber | stringdefault: md

The size of the icon. Mintlify numeric sizes such as {32} render in pixels; Plandalf also supports xs, sm, md, and lg.

classNamestring

Custom CSS class name to apply to the icon.

classstring

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.
Cards Use icons in linked cards.
Tiles Use icon-led grids.
Color Pair icons with palette tokens.

Feature detail