A beautiful icon picker field for Advanced Custom Fields using Heroicons. Pick from 324 hand-crafted SVG icons.

davidbuilds

Open Icons for ACF (Lite) adds a custom field type to Advanced Custom Fields (ACF) that lets you select and display SVG icons from the Heroicons library. All 324 icons are bundled with the plugin — no external downloads required.
Features:
<ul>
<li>324 Heroicons – Beautiful, hand-crafted SVG icons by the makers of Tailwind CSS</li>
<li>Color palette – Define up to 3 color tokens and apply them to icons</li>
<li>Bundled locally – All icons are included in the plugin, no external requests needed</li>
<li>Clean output – Simple <code>get_openicon()</code> helper function for displaying icons</li>
<li>Sanitised SVGs – All icons are sanitised for security</li>
</ul>
How it works:
<ol>
<li>Add an “Open Icons” field to your ACF field group</li>
<li>Select an icon and color from the beautiful picker interface</li>
<li>Display the icon in your theme using the <code>get_openicon()</code> function</li>
</ol>
Display icons in your theme:
<pre><code>php
<?php
$icon = get_field('your_icon_field');
get_openicon($icon, ['size' => 24, 'class' => 'my-icon']);
?>
</code></pre>
Want more icons?
<a href="https://acfopenicons.com" rel="nofollow ugc">Open Icons for ACF Premium</a> unlocks:
<ul>
<li>Lucide Icons – 1,500+ icons</li>
<li>Tabler Icons – 5,200+ icons</li>
<li>Icon migration tools when switching providers</li>
<li>Priority support</li>
</ul>
<h3>Development</h3>
The <code>src/</code> directory contains the uncompiled React/TypeScript source code for the admin UI components.
Source code is available on GitHub: 
https://github.com/davidosull/open-icons-acf-lite.git
To build from source:
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code></li>
<li>Run <code>npm run build</code></li>
</ol>
This will bundle the Heroicons SVGs into <code>assets/icons/</code> and compile the TypeScript/React source into <code>assets/build/</code>.

Alternatives to Open Icons for ACF (Lite)

Top alternatives