ACF Feather Icon Picker

A WordPress plugin that adds a Feather Icon Picker field type to Advanced Custom Fields. Editors can search and select from the full Feather Icons library (287 icons) directly inside the ACF field group editor. Custom SVG icons can be added alongside the built-in set via a WordPress filter.

Requirements

• WordPress 5.0+
• Advanced Custom Fields 5.0+ (free or Pro)
• PHP 7.4+

Installation

1. Upload the acf-feather-icons folder to /wp-content/plugins/.
2. Activate the plugin through the Plugins screen in WordPress.
3. The Feather Icon Picker field type will appear in the ACF field group editor under the Choice category.

File Structure

acf-feather-icons/
├── acf-feather-icons.php          # Plugin bootstrap
├── fields/
│   └── class-acf-field-feather-icon.php
├── assets/
│   ├── css/
│   │   └── input.css              # Admin picker styles
│   └── js/
│       └── input.js               # Admin picker behaviour
└── readme.md

Field Settings

When adding a Feather Icon Picker field to a field group you have three settings:

Return Formats

Icon Name (default)

Returns the raw icon slug as a string, e.g. "shopping-cart".

$icon = get_field( 'your_icon_field' );
// → "shopping-cart"

HTML

Returns a ready-to-render HTML string. For standard Feather icons this is an <i data-feather="..."> element wrapped in a <span>. For custom SVG icons the inline SVG markup is embedded directly.

When Enqueue Feather Icons is enabled and the icon is a standard Feather icon, feather-icons.js is automatically enqueued in the footer along with a DOMContentLoaded initialisation call.

$icon = get_field( 'your_icon_field' );
echo $icon;
// Standard: <span class="acf-feather-icon" data-acf-feather="shopping-cart">
//               <i data-feather="shopping-cart"></i>
//           </span>
//
// Custom:   <span class="acf-feather-icon acf-feather-icon--custom" data-acf-feather="my-brand">
//               <svg ...>...</svg>
//           </span>

Uppercase Name

Returns a PascalCase component name suitable for use with React, Vue, or similar frameworks, e.g. "ShoppingCart".

$icon = get_field( 'your_icon_field' );
// → "ShoppingCart"

Template Usage

Basic output

// Output the icon as HTML (feather-icons.js enqueued automatically if enabled)
echo get_field( 'your_icon_field' );

Custom size with Icon Name return format

$icon_name = get_field( 'your_icon_field' ); // returns "shopping-cart"

printf(
    '<i data-feather="%s" width="32" height="32"></i>',
    esc_attr( $icon_name )
);

Custom size with HTML return format

$icon_html = get_field( 'your_icon_field' ); // returns full HTML span

// Adjust the SVG dimensions rendered by feather.replace()
echo str_replace(
    'data-feather=',
    'width="32" height="32" data-feather=',
    $icon_html
);

Conditional output

$icon = get_field( 'your_icon_field' );

if ( $icon ) {
    echo '<span class="feature-icon">' . $icon . '</span>';
}

Repeater / Flexible Content

if ( have_rows( 'features' ) ) :
    while ( have_rows( 'features' ) ) : the_row();
        $icon  = get_sub_field( 'icon' );
        $label = get_sub_field( 'label' );
        printf(
            '<div class="feature">%s <span>%s</span></div>',
            $icon,
            esc_html( $label )
        );
    endwhile;
endif;

Component name with a React/Vue import map

$component = get_field( 'your_icon_field' ); // → "ShoppingCart"

// Pass to a JavaScript template as a data attribute
printf( '<div data-icon="%s"></div>', esc_attr( $component ) );

Extending the Icon List

Adding a missing Feather icon

If a Feather icon exists in the library but is missing from the picker, add it via the acf_feather_icon_icons filter. Pass the icon slug as the key with null as the value.

add_filter( 'acf_feather_icon_icons', function( $icons ) {
    $icons['package-check'] = null; // standard Feather icon
    return $icons;
} );

Adding custom SVG icons

Pass the icon slug as the key and the full raw SVG markup as the value. The SVG is output inline so it inherits currentColor for stroke/fill, just like Feather icons.

add_filter( 'acf_feather_icon_icons', function( $icons ) {

    $icons['my-brand-logo'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2L2 22h20L12 2z"/>
    </svg>';

    return $icons;
} );

Loading SVGs from files

For cleaner code, load SVG markup from files in your theme or plugin:

add_filter( 'acf_feather_icon_icons', function( $icons ) {

    $svg_dir = get_template_directory() . '/assets/icons/';

    foreach ( glob( $svg_dir . '*.svg' ) as $svg_file ) {
        $icon_name        = basename( $svg_file, '.svg' );
        $icons[ $icon_name ] = file_get_contents( $svg_file );
    }

    return $icons;
} );

Tips for custom SVG icons

• Use stroke="currentColor" so the icon inherits the text colour of its parent.
• Use viewBox="0 0 24 24" to match Feather's coordinate system.
• Avoid hardcoded width and height attributes on the <svg> element; the CSS controls sizing via the .acf-feather-icon svg rule.
• Custom icons are identified by a non-null array value and receive the additional class acf-feather-icon--custom on the wrapper span.

Styling

Admin

Admin styles are loaded from assets/css/input.css and scope to .acf-feather-icon-wrapper. They apply only inside the ACF field editor.

Frontend

A minimal `