How to Use a Custom SVG as ACF Block Icon with Block.json

Dashicons, the official icon font of the WordPress admin, offers a collection of icons that can be utilized for any ACF block you’re registering by throwing its name in the icon spot of the file, like:

{
    "name": "sample-block",
    "title": "Sample Block",
    "description": "A sample block registration",
    "category": "custom-blocks",
    "icon": "editor-ul",
    "acf": {
        "mode": "preview",
        "renderTemplate": "blocks/sample-block/sample-block.php"
    }
}

But what about those situations where a dashicon doesn’t hit the spot? Maybe you’d prefer to use a completely custom designed icon or incorporate a SVG from another icon resource, whether that’s FontAwesome, Feather Icons, The Noun Project, or somewhere else.

Using Custom SVG Icons in Block.json

With the old way of registering blocks via the acf_register_block_type function, the SVG code could just be dropped into the icon declaration and you were good to go. You can still take this same route when registering ACF blocks via a block.json file, but you need to ensure that any double quotes are properly escaped. Meaning, if your SVG icon code uses double quotes within it, be sure to place a backslash in front of each double quote within your SVG code, like:

"icon": "<svg viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m0 88c0-48.6 39.4-88 88-88h304c30.9 0 56 25.1 56 56v288c0 22.3-13.1 41.6-32 50.6v69.4h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-344c-44.2 0-80-35.8-80-80 0-2.7.1-5.4.4-8h-.4zm80 312c-17.7 0-32 14.3-32 32s14.3 32 32 32h288v-64zm-32-41.3c9.8-4.3 20.6-6.7 32-6.7h312c4.4 0 8-3.6 8-8v-288c0-4.4-3.6-8-8-8h-304c-22.1 0-40 17.9-40 40zm104-246.7h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24z\"/></svg>"

Using Custom SVG Icons in register_block_type

Alternatively, you can forego declaring any icon in your block.json file and instead incorporate that code in the register_block_type call made when registering the block. So it may look something like this:

register_block_type( get_template_directory() . '/blocks/your-custom-block/block.json', [
  'icon' => '<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="m0 88c0-48.6 39.4-88 88-88h304c30.9 0 56 25.1 56 56v288c0 22.3-13.1 41.6-32 50.6v69.4h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-344c-44.2 0-80-35.8-80-80 0-2.7.1-5.4.4-8h-.4zm80 312c-17.7 0-32 14.3-32 32s14.3 32 32 32h288v-64zm-32-41.3c9.8-4.3 20.6-6.7 32-6.7h312c4.4 0 8-3.6 8-8v-288c0-4.4-3.6-8-8-8h-304c-22.1 0-40 17.9-40 40zm104-246.7h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>'
]);

Be sure to adjust the location and block name in the block.json call, as needed, as well as replace the FontAwesome book icon used in the example with whatever SVG icon code strikes your fancy. That’s all there is to it. Either way you go, you should then see the SVG icon of your choosing representing your block in the inserter!