Home Forums Gutenberg Gutenberg Block Custom SVG Icon Not Displaying


Gutenberg Block Custom SVG Icon Not Displaying

  • Hello there. I’m having trouble adding a custom icon to my ACF Gutenberg block. I’m using ACF 5.8.0-beta2 and WordPress 4.9.8.

    My code is below though the icon code is taken directly from the acf_register_block() documentation. The block itself works great but all I get is a blank icon.

    When I look at the source code there is nothing to display. It’s almost like WP has scrubbed it out. There is also no errors in the console.

                'name'              => 'campactivities',
                'title'             => __('Camp Activities Grid'),
                'description'       => __('A custom grid to display camp activities.'),
                'render_template'   => 'template-parts/block/content-camp-activities.php',
                'category'          => 'common',
                'icon'              => '<svg viewBox="0 0 24 24" xmlns=""><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>',
                'post_types'        => array( 'page' ),
                'align'             => false,
                'keywords'          => array( 'daily', 'activities', 'grid' ),

    Thanks for any help you can give.

    David J.

  • Same here. Can’t get anything to display but a dash-icon.

  • I am dealing with this glitch as well. It does not work when setting icon or declaring the array with src

  • Same here. Any word if a fix for this is rolling out in the next release? Would be great to not be limited to Dashicons.

  • It looks like this issue is marked as “Solving”, so hopefully a permanent fix is on the way soon. However, I was having the same issue, so I created my own fix for the time being. It’s a drop-in plugin, just download and activate and it should work for you. Everyone is welcome to check it out to see if it fits your needs:

    The issue is that the Gutenberg Block (essentially) accepts two types of inputs, 1) a string or 2) a JavaScript Object (in the form of a React element/component/fragment), see: . So if you pass svg code in the form of a string, like the documentation suggests, then WordPress thinks it’s a Dashicon. WordPress will then look for it in the components.js, but won’t find it, and return null. That null translates to no icon showing up. So what I did was check to see if the icon (or icon[‘src’]) starts with “<svg”, if so, then have PHP convert it to arbitrary JSON. Then have JavaScript hook into the acf ‘ready’ action, take that arbitrary JSON and convert it to a React element, and Voila! the svg icon is rendered. If the icon doesn’t start with “<svg”, then it just passes through with as normal. If anyone has any questions, just let me know.


  • @philf Your plugin works like a charm! Thank you for taking the time to make it.

  • No problem! Happy I could help. I needed it for myself anyway, no reason not to open source it and let others use it. Thanks!

  • An update for anyone coming here now… For me I had no issues adding an SVG icon as per the ACF docs (no plugin needed). Now if you are adding an icon for a custom category, that’s a whole other thing and not as easy. But for a just a custom ACF block, I could drop in the SVG code no issues.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Gutenberg Block Custom SVG Icon Not Displaying’ is closed to new replies.