Open Icons for ACF (Lite)
·
A beautiful icon picker field for Advanced Custom Fields using Heroicons. Pick from 324 hand-crafted SVG icons.
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:
- 324 Heroicons – Beautiful, hand-crafted SVG icons by the makers of Tailwind CSS
- Color palette – Define up to 3 color tokens and apply them to icons
- Bundled locally – All icons are included in the plugin, no external requests needed
- Clean output – Simple
get_openicon()helper function for displaying icons - Sanitised SVGs – All icons are sanitised for security
How it works:
- Add an "Open Icons" field to your ACF field group
- Select an icon and color from the beautiful picker interface
- Display the icon in your theme using the
get_openicon()function
Display icons in your theme:
php
<?php
$icon = get_field('your_icon_field');
get_openicon($icon, ['size' => 24, 'class' => 'my-icon']);
?>
Want more icons?
Open Icons for ACF Premium unlocks:
- Lucide Icons – 1,500+ icons
- Tabler Icons – 5,200+ icons
- Custom Icons – Add your own set of icons
- Icon migration tools when switching providers
- Priority support
Development
The src/ 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:
- Clone the repository
- Run
npm install - Run
npm run build
This will bundle the Heroicons SVGs into assets/icons/ and compile the TypeScript/React source into assets/build/.