Xara suggests Boxicons in https://www.xara.com/free-design-resources/.
It then stated:
For Boxicons, it singularly fails to describe the power Boxicons and Xara together can achieve.Quote:
How to use the resources in Xara
Open a website from the list (or others)
Choose your free image, illustration & more
Download it
Import/add it to your Xara document & customize it
In your Website > HTML Code (body), put:
In your Website > HTML Code (head), put:Code:<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>
Before even considering the Icons and Font, BoxIcons that are now accessible, you can apply ClassNames (with punch) to your design shapes.Code:<linkhref='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'rel='stylesheet'>
Pick any one of these: bx-spin,bx-tada,bx-flashing,bx-burst,bx-fade-left and bx-fade-right
Add a special Name htmlclass="bx-..." to as few or as many shapes on your design page and Preview.
Append -hover and with htmlclass="bx-...-hover", you now have a hover event.
(+) Fuller details of usage: boxicons.com/usage/.
Unless you are building some HTML in a Placeholder, the use of embedding icons with <box-icon type="logo" name="facebook-square"></box-icon> or <i class='bx bxl-facebook-square'></i> is a bit of a hassle.
Instead, back in Boxicons, just pick an icon, click the SVG Code Button and add that into a Placeholder to get a high definition, image-free shape.
Don't bother with the animation part offered, use the approach I have just described.
Change the width and height to 100% to get a scalable shape.
AcornCode:<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);transform:;-ms-filter:"><path d="M19,7.5C19,6.121,17.879,5,16.5,5H8V2H5v3H2v3h14v14h3v-3h3v-3h-3V7.5z"></path><path d="M8,10H5v6.5C5,17.879,6.121,19,7.5,19H14v-3H8V10z"></path></svg>
