PHPackages smithfield-studio/acf-svg-icon-picker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. smithfield-studio/acf-svg-icon-picker ActiveWordpress-plugin[Utility & Helpers](/categories/utility) smithfield-studio/acf-svg-icon-picker ===================================== Add ACF field for selecting SVG icons. 4.3.0(5mo ago)3710.8k↓30.4%9[5 issues](https://github.com/smithfield-studio/acf-svg-icon-picker/issues)[1 PRs](https://github.com/smithfield-studio/acf-svg-icon-picker/pulls)MITPHPCI passing Since Dec 20Pushed 5mo ago1 watchersCompare [ Source](https://github.com/smithfield-studio/acf-svg-icon-picker)[ Packagist](https://packagist.org/packages/smithfield-studio/acf-svg-icon-picker)[ RSS](/packages/smithfield-studio-acf-svg-icon-picker/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (9)Versions (17)Used By (0) [![Latest Stable Version](https://camo.githubusercontent.com/cffa84fda2b90759f6f9c393ec418d094ca5a3c1182d75a996e1cc53a785211f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736d6974686669656c642d73747564696f2f6163662d7376672d69636f6e2d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/smithfield-studio/acf-svg-icon-picker)[![PHP unit tests](https://github.com/smithfield-studio/acf-svg-icon-picker/actions/workflows/php-unit-tests.yml/badge.svg?branch=main)](https://github.com/smithfield-studio/acf-svg-icon-picker/actions/workflows/php-unit-tests.yml/badge.svg?branch=main) ACF SVG Icon Picker Field ========================= [](#acf-svg-icon-picker-field) Add a field type to ACF for selecting SVG icons from a popup modal. Theme developers can provide a set of SVG icons to choose from. Compatibility ------------- [](#compatibility) This ACF field type is compatible with: - ACF 6 - ACF 5 Screenshots ----------- [](#screenshots) [![SVG Icon Picker Popup](/screenshots/example-popup.jpg)](/screenshots/example-popup.jpg) Installation ------------ [](#installation) ### via Composer [](#via-composer) Run `composer require smithfield-studio/acf-svg-icon-picker` and activate the plugin via the plugins admin page. ### Manually [](#manually) 1. Copy the `acf-svg-icon-picker` folder into your `wp-content/plugins` folder 2. Activate the plugin 3. Create a new ACF field and select the SVG Icon Picker type Switch from the legacy 'ACF Icon Picker' to 'ACF SVG Icon Picker' ----------------------------------------------------------------- [](#switch-from-the-legacy-acf-icon-picker-to-acf-svg-icon-picker) If you're coming from the original ACF Icon Picker plugin, you can switch to this plugin by following these steps: 1. Deactivate the old *ACF Icon Picker plugin* 2. Install the *ACF SVG Icon Picker plugin* via Composer or manually 3. Activate the *ACF SVG Icon Picker plugin* 4. Configure your desired icon path via the new [filters](#filters). Remove any old filters in use: `acf_icon_path`, `acf_icon_url` or `acf_icon_path_suffix`. 5. Go over your field configurations and change the field type from `icon-picker` to `svg_icon_picker` in the field settings. Be aware of the underscores in the field type name. 6. Check if the field type is now available in your ACF field settings Usage of this plugin -------------------- [](#usage-of-this-plugin) We recommend storing your SVG icons in a folder within your theme. This plugin defaults to looking for icons inside the `icons/` folder of your theme. You can change this path by using the [`acf_svg_icon_picker_folder` filter](#filters). When using this plugin in conjunction with a parent/child theme, you can store your icons in the parent theme and use the child theme to override the path to the icons. This way, you can provide a set of icons in the parent theme and still allow the child theme to override them. You can configure this field to output the icon name or the icon SVG markup. You can set this in the field settings by changing the `return_format`. ### Helper functions [](#helper-functions) We provide helper functions to fetch icons from the theme folder, without it mattering if the icon is stored in the parent or child theme. ``` use function SmithfieldStudio\AcfSvgIconPicker\get_svg_icon_uri; use function SmithfieldStudio\AcfSvgIconPicker\get_svg_icon_path; use function SmithfieldStudio\AcfSvgIconPicker\get_svg_icon; $my_icon_field = get_field('my_icon_field'); // Get the icon URL $icon_url = get_svg_icon_uri($my_icon_field); // Get the icon file system path $icon_path = get_svg_icon_path($my_icon_field); // Get the icon contents $icon_svg = get_svg_icon($my_icon_field); ``` ### Filters [](#filters) Use the below filters to override the default icon folder inside your theme. ``` // modify the path to the icons directory in your theme. add_filter('acf_svg_icon_picker_folder', function () { return 'resources/icons/'; }); ``` In case you do not want to store the icons in the theme folder, you can use the filter below to change the path to an icons directory in a custom location. In this example, the icons are stored in the `WP_CONTENT_DIR . '/icons/'` folder. ``` add_filter('acf_svg_icon_picker_custom_location', function () { return [ 'path' => WP_CONTENT_DIR . '/icons/', 'url' => content_url() . '/icons/', ]; }); ``` ### [ACF Builder](https://github.com/StoutLogic/acf-builder) / [ACF Composer](https://github.com/Log1x/acf-composer) [](#acf-builder--acf-composer) ``` $fields->addField('my_icon', 'svg_icon_picker', [ 'label' => 'My Icon', 'return_format' => 'value', // or 'icon' ]) ``` Changelog --------- [](#changelog) [See releases for the full changelog](https://github.com/smithfield-studio/acf-svg-icon-picker/releases) - 4.3.0: - enhancement: Change action hook for field type registration by @EarthmanWeb in #37 - test: Update GitHub Actions workflows to use latest PHP versions - 4.2.0: - fix: get\_svg\_icon\_path() helper function now returns the correct path when using the custom location filter - 4.1.0: - feat: Add possebility to directly return the icon markup from the field by using the `icon` return format - feat: Enhance markup of the icon picker modal and field. - docs: Update hooks in readme to the correct ones by @huubl in [\#29](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/29) - test: Add tests for the new return format - ci: Run PHPCS on PRs - 4.0.1: - Fix version numbers in constant. - chore: Add files to export ignore - 4.0.0: - Remove/deprecate legacy filters, refactor and simplify icon path filters by [@Levdbas](https://github.com/Levdbas) in [\#25](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/25) - add unit tests, phpstan and return types by [@Levdbas](https://github.com/Levdbas) in [\#25](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/25) - add better support for hashed assets by [@mike-sheppard](https://github.com/mike-sheppard) in [\#26](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/26) - 3.1.4: Fix filter on filenames with diacritical marks by [@Rvervuurt](https://github.com/Rvervuurt) in [\#21](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/21) - 3.1.3: Added MutationObserver by [@chrisbakr](https://github.com/chrisbakr) in [\#20](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/20) - 3.1.2: Add debounce to improve filter performance by [@stefanmomm](https://github.com/stefanmomm) in [\#17](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/17) - 3.1.1: Optimize css by [@stefanmomm](https://github.com/stefanmomm) in [\#16](https://github.com/smithfield-studio/acf-svg-icon-picker/pull/16) - 3.1.0: Changed name of field to `svg_icon_picker` to avoid conflicts with vanilla ACF Icon Picker field. - 3.0.0: Revert to original ACF field name, quick tidy + README updates - 2.0.0: Fix for ACF 6.3 which now has an official icon-picker field + merged open PRs from [@Levdbas](https://github.com/Levdbas) in [\#38](https://github.com/houke/acf-icon-picker/pull/38) & [@phschmanau](https://github.com/phschmanau) in [\#37](https://github.com/houke/acf-icon-picker/pull/37) --- - **Forked from [houke/acf-icon-picker](https://github.com/houke/acf-icon-picker)** --- - 1.9.1: ACF 6 compatibility fix. Thanks to [@idflood](https://github.com/idflood) in [\#30](https://github.com/houke/acf-icon-picker/pull/30) - 1.9.0: Fix issue with Gutenberg preview not updating when removing. Thanks to [@cherbst](https://github.com/cherbst) in [\#23](https://github.com/houke/acf-icon-picker/pull/23) - 1.8.0: Fix issue with Gutenberg not saving icon. Thanks to [@tlewap](https://github.com/tlewap) in [\#17](https://github.com/houke/acf-icon-picker/pull/17) - 1.7.0: 2 new filters for more control over icon path. Thanks to [@benjibee](https://github.com/benjibee) in [\#11](https://github.com/houke/acf-icon-picker/pull/11) - 1.6.0: Performance fix with lots of icons. Thanks to [@idflood](https://github.com/idflood) in [\#9](https://github.com/houke/acf-icon-picker/pull/9) - 1.5.0: Fix issue where searching for icons would break preview if icon name has space - 1.4.0: Add filter to change folder where svg icons are stored - 1.3.0: Adding close option on modal - 1.2.0: Adding search filter input to filter through icons by name - 1.1.0: Add button to remove the selected icon when the field is not required - 1.0.0: First release ### Health Score 51 — FairBetter than 96% of packages Maintenance69 Regular maintenance activity Popularity37 Limited adoption so far Community22 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~155 days Recently: every ~99 days Total 15 Last Release 159d ago Major Versions 1.9.1 → 2.0.02024-05-31 2.0.0 → 3.0.02024-06-04 3.1.4 → 4.0.02024-11-08 ### Community Maintainers ![](https://www.gravatar.com/avatar/45358b482bc8b484db0de4b5b8699071edce2808939b5f3ffdf88568355c4c2b?d=identicon)[levdbas](/maintainers/levdbas) ![](https://www.gravatar.com/avatar/510f26452afbb91835a8c3831fab75914c8ef5051be8592fd39e462062a1ca52?d=identicon)[mike-sheppard](/maintainers/mike-sheppard) --- Top Contributors [![Levdbas](https://avatars.githubusercontent.com/u/17764157?v=4)](https://github.com/Levdbas "Levdbas (38 commits)")[![houke](https://avatars.githubusercontent.com/u/3050551?v=4)](https://github.com/houke "houke (24 commits)")[![mike-sheppard](https://avatars.githubusercontent.com/u/1690006?v=4)](https://github.com/mike-sheppard "mike-sheppard (11 commits)")[![idflood](https://avatars.githubusercontent.com/u/197418?v=4)](https://github.com/idflood "idflood (3 commits)")[![stefanmomm](https://avatars.githubusercontent.com/u/10480858?v=4)](https://github.com/stefanmomm "stefanmomm (2 commits)")[![klaudiomilankovic](https://avatars.githubusercontent.com/u/7324756?v=4)](https://github.com/klaudiomilankovic "klaudiomilankovic (2 commits)")[![phschmanau](https://avatars.githubusercontent.com/u/11441968?v=4)](https://github.com/phschmanau "phschmanau (1 commits)")[![Rvervuurt](https://avatars.githubusercontent.com/u/1439765?v=4)](https://github.com/Rvervuurt "Rvervuurt (1 commits)")[![szepeviktor](https://avatars.githubusercontent.com/u/952007?v=4)](https://github.com/szepeviktor "szepeviktor (1 commits)")[![cherbst](https://avatars.githubusercontent.com/u/632391?v=4)](https://github.com/cherbst "cherbst (1 commits)")[![tlewap](https://avatars.githubusercontent.com/u/5683825?v=4)](https://github.com/tlewap "tlewap (1 commits)")[![chrisbakr](https://avatars.githubusercontent.com/u/75937814?v=4)](https://github.com/chrisbakr "chrisbakr (1 commits)")[![claudchan](https://avatars.githubusercontent.com/u/1639056?v=4)](https://github.com/claudchan "claudchan (1 commits)")[![dbiljak](https://avatars.githubusercontent.com/u/15057163?v=4)](https://github.com/dbiljak "dbiljak (1 commits)")[![EarthmanWeb](https://avatars.githubusercontent.com/u/5847833?v=4)](https://github.com/EarthmanWeb "EarthmanWeb (1 commits)")[![huubl](https://avatars.githubusercontent.com/u/50170696?v=4)](https://github.com/huubl "huubl (1 commits)") --- Tags wordpresssvgfieldiconpickeracf ### Code Quality TestsPHPUnit Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/smithfield-studio-acf-svg-icon-picker/health.svg) ``` [![Health](https://phpackages.com/badges/smithfield-studio-acf-svg-icon-picker/health.svg)](https://phpackages.com/packages/smithfield-studio-acf-svg-icon-picker) ``` ### Alternatives [vinkla/extended-acf Register advanced custom fields with object-oriented PHP 503264.8k11](/packages/vinkla-extended-acf)[log1x/sage-svg A simple package for using inline SVGs in Sage 10 projects. 121546.7k3](/packages/log1x-sage-svg)[samrap/acf-fluent A fluent interface for the Advanced Custom Fields WordPress plugin 28656.0k4](/packages/samrap-acf-fluent)[log1x/acf-editor-palette A replica Gutenberg color picker field for Advanced Custom Fields. 100284.1k](/packages/log1x-acf-editor-palette)[hellonico/acf-country A country field for ACF. 12193.2k](/packages/hellonico-acf-country)[log1x/acf-phone-number A real ACF phone number field. 12072.5k](/packages/log1x-acf-phone-number) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)