Custom button icons
-
Hello there,
Could someone kindly explain if it’s possible to use our own SVGs as button icons? Yes I am aware of the icon HTML field but so far I’ve not had much luck with that. I have this image of an arrow provided by a client in SVG format which I am trying to add as a button icon. I tried by opening the SVG file using an XML editor (VS Code), and then copying everything within SVG tags.
Any help is highly appreciated.
Best regards,
-
Hi there,
You need to copy the entire SVG HTML, including the
<svg></svg>
tags.Also, be sure to optimize the SVG first so it’s nice and clean: https://jakearchibald.github.io/svgomg/
Let us know if you need more info ??
Hello Tom,
Thanks for the quick and prompt reply.
I gave it another try but it didn’t work I’m afraid. I wonder if it’s something to do with this particular ‘format’ of the SVG I am trying to add, as a different SVG file I’ve tried worked fine. This is an SVG I’ve exported from a Figma design and here’s the cleaned version of it. Many thanks for that SVG optimiser by the way.
<svg width="12" height="8" fill="none" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><path fill="url(#pattern0)" d="M0 0h12v7.633H0z"/><mask id="a" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="8"><path fill="url(#pattern1)" d="M0 0h12v7.633H0z"/></mask><g mask="url(#a)"><path fill="#000" fill-opacity=".65" d="M0 0h12v7.633H0z"/></g><defs><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0" transform="scale(.00278 .00437)"/></pattern><pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0" transform="scale(.00278 .00437)"/></pattern><image id="image0" width="360" height="229" xlink:href="data:image/png;base64,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"/></defs></svg>
If we can’t get it to work, is there any way that we can add a PNG image?
Many thanks and regards,
Pradeep
That’s likely the issue – it’s an encoded image, not a regular SVG file. The SVG field is sanitized for security reasons, which is likely why the above isn’t working.
It won’t accept a PNG, but you can try an inline image, which is a core WP feature in the block toolbar dropdown.
Alternatively, I would just have the image converted to an actual SVG.
Many thanks for the reply and the tips Tom! Keep up the great work.
No problem! Thanks! ??
- The topic ‘Custom button icons’ is closed to new replies.