Mudrava Icon Field for ACF with Lucide

Mudrava Icon Field for ACF with Lucide adds a new field type to Advanced Custom Fields (ACF) that allows users to select icons from the Lucide icon library and brand logos from Simple Icons through an intuitive visual picker. The selected icon value is stored in the database, making it lightweight and flexible for frontend rendering.

Requirements: This plugin requires Advanced Custom Fields (ACF) version 6.0 or higher to function.

Features

• Visual Icon Picker – Browse and select from 1,791 Lucide icons and 3,457 brand logos
• Brand Icons – Brand logos use Simple Icons values such as simple:facebook
• Custom Icon Library – Upload your own SVG icons under Settings, sanitized on upload and addressable as custom:<name>
• Shortcode & Helper – [lucide_icon] shortcode plus mudrava_get_lucide_icon() helper for templates
• Smart Search – Filter icons by name or tags instantly
• Performant – Lazy icon catalog over a local REST endpoint, byte-offset sprite lookups, inline frontend SVG output, paginated grid (100 icons per page)
• Native ACF Look – Seamlessly integrates with ACF’s design language
• Responsive – Works on all screen sizes
• Accessible – Keyboard navigation support
• Flexible Output – Return icon value or full SVG markup
• No External Requests – All icon data is stored locally

Usage

After installing both ACF and this plugin:

1. Go to Custom Fields > Add New
2. Add a new field and select Lucide Icon as the field type
3. Configure the field settings (default value, return format, etc.)
4. Save your field group

Template Examples

Get Icon Name:

<?php
$icon_name = get_field('your_field_name');
echo esc_html($icon_name); // Returns: 'rocket'
?>

Get SVG Markup (with return_format = ‘svg’):

<?php
$icon_svg = get_field('your_field_name');
echo $icon_svg; // Returns: <svg>...</svg>
?>

Using the Helper Function:

<?php
// Basic usage
echo mudrava_get_lucide_icon('rocket');

// With custom attributes
echo mudrava_get_lucide_icon('rocket', [
    'class'  => 'my-custom-class',
    'width'  => 32,
    'height' => 32,
    'stroke' => '#ff0000',
    'title'  => 'Launch', // accessible title
    'mode'   => 'sprite', // 'inline' (default) or 'sprite'
]);
?>

Shortcode

[lucide_icon name="rocket" size="32" title="Launch"]

Custom icons uploaded under Settings → Custom Icons are addressed as custom:<name>,
for example [lucide_icon name="custom:my-logo" title="My Logo"] or
mudrava_get_lucide_icon( ‘custom:my-logo’ ).

About Custom SVG Icons

Site owners can upload plain SVG icons under Settings → Custom Icons.
Uploads are parsed with DOMDocument (no network access) and reduced to the
same element and attribute allowlist as the bundled sets via wp_kses(), so
scripts, styles, embedded images and unsupported elements never reach storage.
Custom icons are stored as standalone files in the uploads directory, appear
in the picker search, and render with their own colors instead of a forced
currentColor tint.

About Lucide Icons

Lucide is a modern, open-source icon library with 1,700+ carefully crafted icons. The bundled Lucide assets are from lucide-static 1.38.0 and are licensed under ISC.

About Brand Icons

Brand logos are bundled separately from Simple Icons 16.29.0 and are saved with the simple: prefix, for example simple:facebook.

Simple Icons is distributed under CC0-1.0, but individual brand logos and trademarks may still be governed by each brand owner’s guidelines and permissions. Check the relevant brand guidelines before using a logo in production. Source and guideline URLs from Simple Icons are bundled in data/brand-icons-meta.json.

Privacy

Data Collection:

This plugin does not collect, store, or transmit any user data or personal information.

External Requests:

This plugin does not make any external HTTP requests. All icon data is stored locally and served from your WordPress installation.

Cookies:

This plugin does not use cookies.

Third-Party Services:

This plugin does not integrate with or send data to any third-party services.