15

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

Gutenberg block icons

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' ),
        ));
    }
}
1
  • Is there a way to add our existing Font Awesome library into this Icon block module?
    – Jen Niles
    Feb 15 at 19:56

5 Answers 5

16

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

3
  • 8
    Many of Gutenberg's icons are custom SVGs, so don't expect to find all of the icons on the dashicon list. You can also pass in a custom svg to the ACF block registration, though.
    – tmdesigned
    Feb 12, 2019 at 10:44
  • On this occasion, the dashicons work for what I need. I'll look into custom SVGs for ACF, thanks.
    – Sam
    Feb 12, 2019 at 11:34
  • 1
    "dashicons-" prefix should be removed for this to work
    – Tahi Reu
    Dec 27, 2021 at 21:26
22

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/

1
  • 1
    This should be the correct answer, thanks!
    – Nathan
    Jul 21, 2021 at 0:53
0

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:

material design "Photo" icon material design "Create" icon

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

-1

Official icon font of the WordPress admin as of 3.8.

https://developer.wordpress.org/resource/dashicons/

1
  • That's already been mentioned in other answers.
    – Ian Dunn
    Sep 1, 2021 at 15:43
-3

If you need Gutenberg Icon block you can use this plugin kitIcon as i see this icon block have svg icon maybe over 1000+icon here with icon block. plugin name is KitIcon WordPress Gutenberg Icon Block.

may be its help you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.