Where can I find the Gutenberg block icons?

admin管理员组

文章数量:1128340

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

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

• block-editor

Share Improve this question asked Feb 12, 2019 at 9:45 SamSam 2,19633 gold badges3030 silver badges5959 bronze badges 2

• Is there a way to add our existing Font Awesome library into this Icon block module? – Jen Niles Commented 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. – Roel Magdaleno Commented May 15, 2023 at 21:05

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 23

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

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/

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

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

本文标签： Where can I find the Gutenberg block icons