Where can I find the Gutenberg block icons?

Question

Is there any documentation showing the names of the Gutenberg block icons within the WordPress docs?

To give you some context, I'm using ACF blocks for Gutenberg, and need to find a reference for 'icon'.

add_action('acf/init', 'my_acf_init');
function my_acf_init() {

    // check function exists
    if( function_exists('acf_register_block') ) {

        // register a testimonial block
        acf_register_block(array(
            'name'              => 'testimonial',
            'title'             => __('Testimonial'),
            'description'       => __('A custom testimonial block.'),
            'render_callback'   => 'my_acf_block_render_callback',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'testimonial', 'quote' ),
        ));
    }
}

Answer 1

Gutenberg is making use of dashicons.
You can find your example icon here, and a cheat sheet of dashicons here.

Answer 2

Here you can find a list of all the Gutenberg icons with name and preview: https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

In order to use this, you'll need to copy the actual SVG source code.

---

Example: register an ACF block with the postExcerpt icon

You'll need to inspect the actual element and extract the source code of the SVG icon from https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library:

<svg><path d="M12.75 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.395.395 0 00.199-.166c.05-.083.114-.253.114-.584V7.2H8.8V4h3.95v5.333zM7.95 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.394.394 0 00.198-.166c.05-.083.115-.253.115-.584V7.2H4V4h3.95v5.333zM13 20H4v-1.5h9V20zM20 16H4v-1.5h16V16z"></path></svg>

Then, you can register your block like this:

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'testimonial',
            'title'             => __('Testimonial'),
            'description'       => __('A custom testimonial block.'),
            'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
            'category'          => 'formatting',
            'icon'              => '<svg><path d="M12.75 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.395.395 0 00.199-.166c.05-.083.114-.253.114-.584V7.2H8.8V4h3.95v5.333zM7.95 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.394.394 0 00.198-.166c.05-.083.115-.253.115-.584V7.2H4V4h3.95v5.333zM13 20H4v-1.5h9V20zM20 16H4v-1.5h16V16z"></path></svg>'
        ));
    }
}

Result:

More information about ACF blocks at https://www.advancedcustomfields.com/resources/acf_register_block_type/

Answer 3

i'd be happy to be corrected on this, but it seems like only dashicons can be used "by name" in this way – Gutenberg's icons seem to live as inline HTML (JSX) in .js files (gutenberg/packages/icons/src/library) so i don't think they can be used from PHP.

If you're looking for the actual icons, a lot of them seem to be Material UI icons. e.g. the Image block's icon and the pencil from the top bar:

so you could use those instead, or just copy the SVG you want from the github repo. but either way you're going to have to wrangle some SVGs manually

Answer 4

It is also possible to create a CSS class like:

 .dashicons-travel-new{
     background-image: url(../images/travel.svg);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: 100% 100%;
 }
 acf_register_block_type(array(
        'name'              => 'testimonial',
        ...
        'icon'              => 'travel-new',
        ...
    ));