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
Download the plugin
Download the plugin ZIP file from your purchase or account area.
Upload to WordPress
Navigate to Plugins > Add New in your WordPress admin, then click Upload Plugin and select the ZIP file.
Install and activate
Click Install Now and then Activate the plugin.
Configure
Go to Custom Fields > ACF Open Icons to configure the plugin and activate your license.
Configuration
License Activation
- Navigate to Custom Fields > ACF Open Icons in WordPress admin
- Enter your license key in the License section
- Click Activate License
- Once activated, all plugin features will be available
Icon Set Selection
- Go to Custom Fields > ACF Open Icons
- 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
- Optionally pin a specific version for stability
- Click Save Changes
Color Palette
Configure color tokens that can be applied to icons:
- In the Palette section, set colors for tokens A, B, and C
- These tokens can be applied when selecting icons
- Changing palette colors automatically updates all icons using those tokens
Usage
Creating an ACF Field
- Go to Custom Fields > Field Groups
- Create a new field group or edit an existing one
- Add a new field and select Open Icons as the field type
- Configure field settings (label, name, required, etc.)
- 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 SVGecho(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:
- Go to Custom Fields > ACF Open Icons
- Navigate to the Migration section
- Review icons that need migration
- 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