API Reference
Start typing to search…

Icons

❗️

Font Awesome icon markup will no longer be supported as of July 1, 2026.

Any custom templates will need to be updated to use either:

  • rebuy-icon with the Lucide icon name equivalent
  • a pure SVG (which can be downloaded from the Lucide library.)

What’s changing

  • Font Awesome deprecation: Font Awesome will no longer be supported as of July 1, 2026.
  • New default: Rebuy Icons (Lucide-based) is the new icon system.
  • Template tag: All templates should use <rebuy-icon> or pure SVGs moving forward.
  • Powered by Lucide: Rebuy Icons use the Lucide SVG library. You can browse and download individual SVGs at lucide.dev/icons.

Impact at a glance

  • If you use stock Rebuy widgets: No action needed. You can opt-in when ready.
  • If you have custom templates: Replace any Font Awesome tags with <rebuy-icon> before switching.
  • Roll-back safety: You can temporarily toggle systems for testing.

About Lucide

Rebuy Icons are built on the open-source Lucide icon library, providing clean, consistent SVG icons. For optimal performance, only commonly-used icons are included by default. If you need additional icons, you have two options:

  1. Production (recommended): Download individual SVG files from lucide.dev/icons and inline them in your templates
  2. Testing only: Use loadFullIconSet() to temporarily access all icons during feature development

How to enable Rebuy Icons

  1. Go to Rebuy Admin → Settings.
  2. Find “Icon System” and choose Rebuy Icons.
  3. Save. Your widgets will start using the new system.
📘

Tip: Test first on a staging theme or via the console toggle below.

🚧

Note About Smart Carts

If you are using a newer Smart Cart (non-Legacy), your template code will not automatically be updated when toggling the Icon System.

If you're still seeing Font Awesome icons in your Smart Cart, you can refresh your template by navigating to the Smart Cart Editor in the Rebuy Admin and saving any small change to your active cart.

This will rebuild the template using <rebuy-icon> markup.

Migrating custom templates

Replace Font Awesome elements/classes with the <rebuy-icon> tag using Lucide names.

  • Close icon:

    • Old: <i class="fas fa-times"></i>
    • New: <rebuy-icon name="x" />

  • Loading/Spinner:

    • Old: <i class="fas fa-circle-notch fa-spin"></i>
    • New: <rebuy-icon name="loader" spin />

  • Chevron down:

    • Old: <i class="fas fa-chevron-down"></i>
    • New: <rebuy-icon name="chevron-down" />

Supported attributes:

  • name (required) – Lucide icon name (e.g., x, chevron-down, shopping-cart)
  • size – number (pixels) - Note: Consider using CSS custom properties instead for better override control
  • color – CSS color (defaults to currentColor)
  • stroke-width – stroke width for Lucide (default 2)
  • spin / fast-spin – animation flags
  • aria-label – makes icon accessible (otherwise decorative)

Common icons (always available without any extra loading): x, plus, minus, chevron-up, chevron-down, more-horizontal, tag, tags, trash, search, loader, refresh-cw.

Test before enabling (no code deploy required)

Use your browser console on any page with Rebuy widgets:

// Check current icon system ('lucide' or 'fontawesome')
Rebuy.Icons.getCurrentIconSystem();

// Toggle between systems (quick visual check)
await Rebuy.Icons.toggleIconSystem();

// Force a system globally (until refreshed or set back)
Rebuy.Icons.setIconSystemOverride('lucide');
Rebuy.Icons.setIconSystemOverride('fontawesome');
Rebuy.Icons.setIconSystemOverride(null); // return to shop setting

Full icon library (development only)

Warning: The full icon set adds ~214KB (gzipped) to your page. Use only for testing and development:

// Do you already have it?
Rebuy.Icons.isFullIconSetLoaded();

// Load (~214KB gzipped), then all icons are available
await Rebuy.Icons.loadFullIconSet();

// Check availability and get icon markup if needed
Rebuy.Icons.hasIcon('activity');
const html = Rebuy.Icons.getIcon('activity', { size: 24, color: '#007bff' });

Performance best practices

  1. Use common icons - No additional network requests needed:

    • x, plus, minus, chevron-up, chevron-down, shopping-cart, tag, trash, search, loader

  2. For uncommon icons - Download and inline individual SVGs from lucide.dev/icons

  3. Never use loadFullIconSet() in production - This is a development tool only

Styling and overrides

Size Control

Icons use the --rb-icon-size CSS custom property for sizing. This provides flexible control through CSS rather than inline attributes.

Recommended approach - CSS custom properties:

/* Set size for specific containers */
.my-cart-button {
    --rb-icon-size: 24px;
}

.my-quantity-controls {
    --rb-icon-size: 14px;
}
<!-- Icons inherit size from their container -->
<div class="my-cart-button">
    <rebuy-icon name="shopping-cart" />
</div>

Alternative - Size prop (use sparingly):

<!-- Only use when CSS approach isn't practical -->
<rebuy-icon name="x" size="20" />

When using the size prop, be aware it sets an inline style that requires !important to override.

Color Control

Icons inherit color via currentColor, making them automatically match surrounding text:

/* Icons will automatically match text color */
.text-primary {
    color: #007bff;
}

.text-danger {
    color: #dc3545;
}
<div class="text-primary">
    <rebuy-icon name="tag" />
    <span>On sale</span>
</div>

Console Helper Method Reference

  • Rebuy.Icons.getCurrentIconSystem() – Returns 'lucide' | 'fontawesome'.
  • Rebuy.Icons.setIconSystemOverride(value) – 'lucide' | 'fontawesome' | null.
  • Rebuy.Icons.toggleIconSystem() – Switches systems for fast visual checks.
  • Rebuy.Icons.hasIcon(name) – Whether an icon is currently available.
  • Rebuy.Icons.getIcon(name, opts) – Returns icon HTML (when available).
  • Rebuy.Icons.getAvailableIconNames() – Lists all currently available names.
  • Rebuy.Icons.isFullIconSetLoaded() – Whether the full set is loaded.
  • Rebuy.Icons.loadFullIconSet() – Loads the full library on demand.
  • Rebuy.Icons.getIconSystemInfo() – Diagnostic info about what’s loaded.

Troubleshooting

Icon not showing?

  • Verify the icon name matches Lucide's naming (check lucide.dev/icons)
  • If it's an uncommon icon, either inline the SVG or use loadFullIconSet() for testing only

Visual differences from Font Awesome?

  • Adjust stroke-width for line thickness (default: 2)
  • Use CSS custom properties for sizing instead of inline props
  • Toggle between systems with Rebuy.Icons.toggleIconSystem() to compare

Need to roll back?

  • Admin → Settings → Icon System → Font Awesome
  • Or temporarily: Rebuy.Icons.setIconSystemOverride('fontawesome')

Support

If you need help migrating or testing, contact Rebuy Support with your store URL and a link to the page/template using icons.