10

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

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

| improve this answer | |
  • 6
    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 '19 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 '19 at 11:34
1

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

| improve this answer | |
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

| improve this answer | |

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.