Icons finish off a design, but only if they’re sized right and colored consistently with the rest of the page. This tutorial shows how to add and style icons in WordPress, pulling one straight from Mosaic’s library, bringing in your own SVG, and styling icon boxes so they match the rest of your site instead of standing out for the wrong reason.
Add an icon from the library
Open the Add panel and drop an Icon element into the spot that needs one.
Select the icon and use the toolbar to browse. Mosaic ships over 1,000 hand-made icons across different styles, search by keyword (for example “chat”) to narrow it down fast.
In the Style panel, open the unit dropdown for one dimension and set it to Auto. Change the other dimension, and the auto one follows automatically, so the icon stays proportional without setting both by hand.
Use a custom SVG icon
Use the Upload icon button to bring in a custom icon. Mosaic only pulls in the SVG code, so your media library doesn’t fill up with image files.
Copy an SVG from somewhere like Figma (right click, copy as SVG) and paste it straight into Mosaic instead of uploading a file.
The color picker works, but picking a color variable instead keeps the icon in sync with the rest of your site’s palette, change the variable once, and every icon using it updates.
Style icon boxes
When you want that pre-styled background look, add the icon box element from the Navigator.
Change the icon’s element class to an icon box class, then pick the subclass that matches your existing icon boxes.
Instead of the color picker or a variable, click the T icon to use the current text color. The icon’s color then follows the Style tab’s Color property automatically instead of being set separately.
Result
Icons now come from wherever makes sense, Mosaic’s built-in library or your own SVGs, sized proportionally with Auto units, and colored consistently through variables or the current text color. Icon boxes pick up the same treatment, so new ones match the rest of the page without manual tweaking.