Icon Reference

Complete reference of valid icon names available for use in VaultPDF documents. Includes status, information, content, system, and form control icons.

This guide lists all valid icon names available for use in VaultPDF documents, including conditional styles, cards, tables, and other components.

Status Icons

Use these icons to indicate status, state, or result conditions.

Icon Name	Visual	Use Case
`check`	Green checkmark	Success, approved, completed
`circlealert`	Circle with exclamation	Alert, warning, attention needed
`warning`	Triangle warning	Warning, caution, risky
`clock`	Clock or timer	Pending, in progress, time-based
`status`	Trending or activity	Trending up, active, status indicator
`x`	Red close or X	Failed, error, critical issue

Information Icons

Use these icons for informational or labeling purposes.

Icon Name	Visual	Use Case
`info`	Info circle	General information, note
`tag`	Tag or label	Category, tag, classification
`star`	Star or favorite	Favorite, important, highlighted

Content Icons

Use these icons for document, file, and content types.

Icon Name	Visual	Use Case
`file-text`	Document with text lines	Text document, report
`file`	Document icon	Generic file, attachment
`package`	Box or package	Package, shipment, container
`list`	Bullet list	List, checklist, items
`image`	Photo or image	Image, picture, visual content
`barcode`	Barcode	Barcode, SKU, product code
`qr`	QR code	QR code, scanned content
`percent`	Percentage symbol	Percentage, ratio, proportion

System Icons

Use these icons for organizational, security, and communication elements.

Icon Name	Visual	Use Case
`building`	Building or organization	Organization, company, facility
`shield`	Security shield	Security, compliance, protected
`phone`	Phone number	Phone contact, telephone
`email`	Email address	Email, message, communication
`link`	URL or hyperlink	Link, reference, URL

Form Controls

Use these icons for checkbox and radio button states.

Icon Name	Visual	Use Case
`checkbox-checked`	Checked box	Selected, enabled, true
`checkbox-unchecked`	Empty box	Unselected, disabled, false
`radio-checked`	Selected radio button	Selected option
`radio-unchecked`	Unselected radio button	Unselected option

Usage Examples

In Conditional Styles

{
  "key": "status",
  "label": "Status",
  "conditionalStyles": [
    {
      "value": "APPROVED",
      "icon": "check",
      "color": "#4CAF50",
      "styleTarget": "icon"
    },
    {
      "value": "PENDING",
      "icon": "clock",
      "color": "#FF9800",
      "styleTarget": "icon"
    },
    {
      "value": "REJECTED",
      "icon": "x",
      "color": "#D32F2F",
      "styleTarget": "icon"
    },
    {
      "value": "WARNING",
      "icon": "circlealert",
      "color": "#FF9800",
      "styleTarget": "icon"
    }
  ]
}

In Cards

{
  "type": "card",
  "title": "Order Status",
  "fields": [
    {
      "key": "orderStatus",
      "label": "Status",
      "conditionalStyles": [
        {
          "value": "COMPLETED",
          "icon": "check",
          "color": "#4CAF50"
        },
        {
          "value": "SHIPPED",
          "icon": "package",
          "color": "#2196F3"
        }
      ]
    }
  ]
}

In Tables

{
  "type": "table",
  "title": "Security Audit",
  "columns": [
    {
      "key": "auditItem",
      "label": "Item"
    },
    {
      "key": "result",
      "label": "Result",
      "conditionalStyles": [
        {
          "value": "PASSED",
          "icon": "check",
          "color": "#4CAF50",
          "displayMode": "icon"
        },
        {
          "value": "FAILED",
          "icon": "x",
          "color": "#D32F2F",
          "displayMode": "icon"
        },
        {
          "value": "NOT_TESTED",
          "icon": "info",
          "color": "#999999",
          "displayMode": "icon"
        }
      ]
    }
  ]
}

Migration Guide

If you are updating from older icon names, use this mapping:

Old Name (❌)	New Name (✅)
`AlertCircle`	`circlealert`
`CheckCircle`	`check`
`AlertTriangle`	`warning`
`Clock`	`clock`
`TrendingUp`	`status`
`TrendingDown`	`status`
`Loader`	`status`
`Activity`	`status`
`Edit`	`file-text`
`Trash`	`x`
`Download`	`file`
`Upload`	`file`
`Copy`	`file`
`Server`	`building`
`Database`	`package`
`Wifi`	`link`
`WifiOff`	`link`
`HardDrive`	`shield`
`MessageSquare`	`info`
`Mail`	`email`
`Bell`	`info`
`Flag`	`tag`

Icon Placement Best Practices

With displayMode

displayMode: "icon" - Icon only (best for status indicators)
displayMode: "label" - Text only (no icon)
displayMode: "iconAndLabel" - Icon plus text (default, best for descriptions)

With styleTarget

styleTarget: "icon" - Apply colors to icon only
styleTarget: "text" - Apply colors to text only
styleTarget: "cell" - Apply colors to entire cell background

Examples

Status icon with green color:

{
  "value": "ACTIVE",
  "icon": "check",
  "color": "#4CAF50",
  "displayMode": "icon",
  "styleTarget": "icon"
}

Alert with red background:

{
  "value": "ERROR",
  "icon": "circlealert",
  "color": "#FFFFFF",
  "bgColor": "#D32F2F",
  "displayMode": "iconAndLabel",
  "styleTarget": "cell"
}

Unicode Characters for Text-Based Styling

As an alternative to SVG icons, you can use Unicode characters directly in text fields, feature lists, and CTA labels. These are especially useful for titles, badges, and Bento Card features where a full icon registry may be overkill.

Perfect for your "View Detailed Logs" or "Buy Now" buttons.

Character	Unicode	Use Case
→	`\u2192`	Standard arrow for CTAs and navigation
›	`\u203A`	Narrow arrow for breadcrumbs or subtle "Next" indicators
➔	`\u2794`	Heavy arrow when text is bold or standard arrow looks too thin
»	`\u00BB`	Chevron for "Read More" links and navigation

Example in Bento Card CTA:

{
  "cta": {
    "primary": "Get Started →",
    "secondary": "Learn More »"
  }
}

Status & Validation (Reports)

Essential for showing pass/fail states without SVGs, especially in validation reports.

Character	Unicode	Use Case
✓	`\u2713`	Standard checkmark for "Success" indicator
✔	`\u221A`	Heavy check (square root symbol), very common in font sets
✕	`\u00D7`	Cross for "Missing" or "Invalid" nodes
⚠	`\u26A0`	Warning triangle for alerts and cautions
ℹ	`\u2139`	Info symbol for neutral footnotes or metadata

Example in Table Column:

{
  "key": "validationStatus",
  "label": "Status",
  "format": "{{value === 'PASS' ? '✓ Valid' : '✕ Invalid'}}"
}

Example in Feature List:

"features": [
  { "label": "✓ Full encryption" },
  { "label": "✓ 99.9% uptime" },
  { "label": "✕ No legacy support" }
]

List Bullets (Bento Features)

Professional structured alternatives to full icons for your features array.

Character	Unicode	Use Case
■	`\u25A0`	Solid square, matches industrial/infrastructure aesthetic
□	`\u25A1`	Open square for "To-do" or "Optional" features
•	`\u2022`	Classic bullet, safest and most universal choice
◆	`\u25C6`	Diamond adds a premium feel to lists

Example in Bento Card Features:

"features": [
  { "label": "■ Unlimited projects" },
  { "label": "■ 50 GB storage" },
  { "label": "□ Optional add-ons available" },
  { "label": "◆ Premium support tier" }
]

Financial & Metrics (Pricing/Invoices)

Specialized characters for pricing cards, invoices, and KPI summaries.

Character	Unicode	Use Case
·	`\u00B7`	Separator for values on same line (e.g., "$250 · Monthly")
∆	`\u2206`	Delta symbol for showing change or increase (e.g., "22% ∆ growth")
≈	`\u2248`	Approximately symbol for estimated values (e.g., "≈ 85% compression")

Example in Pricing Card:

{
  "type": "bento_card",
  "props": {
    "title": "Professional",
    "heroSection": {
      "value": "$149",
      "period": "· per month",
      "description": "billed annually"
    }
  }
}

Example in KPI Summary:

{
  "features": [
    { "label": "Performance", "value": "↑ 22% ∆" },
    { "label": "Compression", "value": "≈ 85%" },
    { "label": "File size", "value": "250 KB · avg" }
  ]
}

Combining Unicode with Conditional Styles

You can use Unicode characters in conditional styling labels for clean, compact status displays:

{
  "key": "auditResult",
  "conditionalStyles": [
    {
      "value": "PASSED",
      "label": "✓ Passed",
      "color": "#4CAF50"
    },
    {
      "value": "FAILED",
      "label": "✕ Failed",
      "color": "#D32F2F"
    },
    {
      "value": "WARNING",
      "label": "⚠ Review needed",
      "color": "#FF9800"
    }
  ]
}

Troubleshooting

Icon Not Displaying

Problem: Icon does not appear even though the name is specified

Solutions:

Wrong icon name - Check icon name against the valid list above
Case sensitivity - Icon names are lowercase (e.g., check, not Check)
Typo - Verify spelling matches exactly (e.g., circlealert, not circlealerts)
Missing hyphens - Multi-word icons use hyphens (e.g., file-text, not filetext)

Icon Color Not Applying

Problem: Icon appears but with wrong color

Solutions:

Check styleTarget - Ensure styleTarget is set correctly (use "icon" to color just the icon)
Verify color value - Use valid hex colors (e.g., "#4CAF50") or theme tokens (e.g., "theme.success")
Theme token - If using theme tokens, ensure the token exists in your configuration

Icon and Text Misaligned

Problem: Icon and text do not align properly

Solutions:

Try styleTarget: "icon" - This often fixes alignment issues
Adjust displayMode - Use "icon" only if text is not needed
Check cell width - Narrow cells may squeeze icon and text together

Performance Tips

Use simple icons (check, x, info) for better rendering performance
Avoid using too many icons in a single table (limit to 100+ rows with icons)
Prefer displayMode: "icon" when space is limited
Icons automatically scale with text size, no need to specify separate sizes

Icon Reference

Status Icons

Information Icons

Content Icons

System Icons

Form Controls

Usage Examples

In Conditional Styles

In Cards

In Tables

Migration Guide

Icon Placement Best Practices

With displayMode

With styleTarget

Examples

Unicode Characters for Text-Based Styling

Navigation & Directional (CTAs)

Status & Validation (Reports)

List Bullets (Bento Features)

Financial & Metrics (Pricing/Invoices)

Combining Unicode with Conditional Styles

Troubleshooting

Icon Not Displaying

Icon Color Not Applying

Icon and Text Misaligned

Performance Tips

On this page