21

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' ),
        ));
    }
}
2
  • Is there a way to add our existing Font Awesome library into this Icon block module?
    – Jen Niles
    Feb 15, 2022 at 19:56
  • There's this website that shows icons inside @wordpress/icons library. Those icons are the ones used inside core blocks. It'll show you how to import the icon in JavaScript and the SVG. Hope it helps. May 15, 2023 at 21:05

4 Answers 4

22

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
  • 5
    "dashicons-" prefix should be removed for this to work
    – Tahi Reu
    Dec 27, 2021 at 21:26
29

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/

2
  • 1
    This should be the correct answer, thanks!
    – Nathan
    Jul 21, 2021 at 0:53
  • +1 for reminding me I can just put an SVG in there!!! - but note for others / remember if you're using the block.json - note the quotes! : ) Oct 27, 2022 at 23:44
1

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

0

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',
        ...
    ));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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