Documentation

Complete Guide to ACF Open Icons

Everything you need to know to get started with ACF Open Icons, from installation to advanced usage.

Requirements

  • WordPress 5.0 or higher
  • PHP 7.4 or higher (PHP 8.0+ recommended)
  • Advanced Custom Fields Pro or ACF Free (version 5.0+)
  • Valid license key required for full functionality

Installation

1

Download the plugin

Download the plugin ZIP file from your purchase or account area.

2

Upload to WordPress

Navigate to Plugins > Add New in your WordPress admin, then click Upload Plugin and select the ZIP file.

3

Install and activate

Click Install Now and then Activate the plugin.

4

Configure

Go to Custom Fields > ACF Open Icons to configure the plugin and activate your license.

Configuration

License Activation

  1. Navigate to Custom Fields > ACF Open Icons in WordPress admin
  2. Enter your license key in the License section
  3. Click Activate License
  4. Once activated, all plugin features will be available

Icon Set Selection

  1. Go to Custom Fields > ACF Open Icons
  2. In the Icon Set section, select your preferred icon library:
    • Lucide - Modern, consistent icon set
    • Tabler Icons - Comprehensive icon collection
    • Heroicons - Beautiful hand-crafted SVG icons
  3. Optionally pin a specific version for stability
  4. Click Save Changes

Color Palette

Configure color tokens that can be applied to icons:

  1. In the Palette section, set colors for tokens A, B, and C
  2. These tokens can be applied when selecting icons
  3. Changing palette colors automatically updates all icons using those tokens

Usage

Creating an ACF Field

  1. Go to Custom Fields > Field Groups
  2. Create a new field group or edit an existing one
  3. Add a new field and select Open Icons as the field type
  4. Configure field settings (label, name, required, etc.)
  5. Save the field group

Displaying Icons in Templates

Use the acf_open_icon() helper function to display icons:

Basic Usage

<?php
$icon_field = get_field('icon_field');

// Basic usage (default size: 24px)
acf_open_icon($icon_field);

With Custom Size

<?php
$icon_field = get_field('icon_field');

// With custom size
acf_open_icon($icon_field, [
    'size' => 32, // default: 24
]);

Return Instead of Echo

<?php
$icon_field = get_field('icon_field');

// Return instead of echo
$svg_markup = acf_open_icon($icon_field, [
    'size' => 64,
    'echo' => false,
]);
echo $svg_markup;

With Color Override

<?php
$icon_field = get_field('icon_field');

// With color override (bypasses token-based color)
acf_open_icon($icon_field, [
    'size' => 48,
    'color' => '#a7f3d0',  // Force a specific color
]);

This bypasses token-based color and forces a specific color.

With CSS Classes

<?php
$icon_field = get_field('icon_field');

// With CSS classes
acf_open_icon($icon_field, [
    'class' => 'icon-class-name',
    'size' => 32,
]);

Function Parameters

$value (array|string)

The icon field value from ACF

$atts (array) - Optional attributes:

  • size (int): Icon size in pixels (default: 24)
  • color (string): Hex color override (bypasses token-based color)
  • class (string): CSS class name(s) to add to the SVG
  • echo (bool): Whether to echo or return the markup (default: true)

Icon Migration

Migrating Between Icon Providers

When switching between icon providers, the plugin includes a migration tool to help update existing icons:

  1. Go to Custom Fields > ACF Open Icons
  2. Navigate to the Migration section
  3. Review icons that need migration
  4. Use the migration tool to automatically match and update icons to the new provider

Updates

The plugin includes automatic update functionality:

  • Updates are checked daily via WordPress cron
  • Update notifications appear in the Plugins page
  • Updates require a valid license (active or within grace period)
  • Updates are delivered securely via proxy endpoint with license validation