Create custom icon for block to be more recognizable

[seb86]

I think it would be great if the mockup below could be replicated. This is as close as I can think of showing what this block is.

Zac Gordon has a great article on how to make your own. Hopefully, it is still valid with the constant changes made in Gutenberg.

https://wp.zacgordon.com/2017/12/07/how-to-add-custom-icons-to-gutenberg-editor-blocks-in-wordpress/

[seb86]

Attempted to display two SVG's together so they are side by side but failed. May have to get or make a SVG that is designed like this as one complete SVG.

[seb86]

If anyone is good at creating SVG icons I would appreciate it if you could make the single image icon converted to the double image icon as shown in the screenshot above.

Here is the SVG code for the single image icon.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M0,0h24v24H0V0z" fill="none"></path><path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z"></path><path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z"></path></svg>

[dotvhs]

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M0,0H24V24H0Z" fill="none"/><path d="M9,3H0V5H9V19H0v2H9a2,2,0,0,0,2-2V5A2,2,0,0,0,9,3Z"/><polygon points="0 17 8 17 4.14 11.86 1.14 15.73 0 14.35 0 17"/><path d="M24,19H15V5h9V3H15a2,2,0,0,0-2,2V19a2,2,0,0,0,2,2h9Z"/><polygon points="24 12.04 21.14 15.73 19 13.14 16 17 24 17 24 12.04"/></svg>

Should look like this: