Extend icon library

I’m making a gardening website and would like to use garden/plant icons in a Services section. I see the range of icons in Bricks, Fontawesome etc. Is there a way to import different icons libraries?

5 Likes

Hi @TonyPas,

importing custom icon-fonts / sets and removing the ones that i am not using is something i asked myself too and added it to my personal feature-wishlist, but haven’t asked for it in the forum or idea board yet.

It is possible to import custom SVG Icons inside the icon or icon box element, so if you’re not going to use a lot of custom icons, it is a good and straightforward solution.

One recommendation when it comes to SVGs: SVGOMG - SVGO's Missing GUI
In most cases this handy tool reduces the file size vastly.

Regards,
timmse

4 Likes

Hi. Imported svg icons from svgpro. They look great but I can’t get them to resize in icon box. (They show but are very small and resize controls have no effect.) Any ideas?

Yep,

change the size inside the SVG Icon Settings after uploading (there you can also change the fill and stroke color). The “Icon Width” and “Icon Height” under general Icon settings are controlling the width and height of the icon wrapper, not of the icon itself.

1 Like

Brilliant! Easy when you know how. Many thanks.

You’re welcome.
Just tried the different settings … never used the icon box and custom SVGs before :wink:

Have used the suggestion and works very well. Only issue is the svg does not show when editing, only in preview. Any thoughts?

Maybe the fill color is equal to the background color? In my case, the svg will display properly (as you can see in my screenshot).

Hi. Were the screenshots attached?

And to be clear, the issue is when I try to use an svg instead of an icon in an icon box. Looks fine on finished page but svg invisible when editing.

Hi @TonyPas ,

i meant the screenshot here.
Please check this video and the attached SVG i used in the Video to see if it works for you. As you can see: no problems at all.

Video: https://vimeo.com/582002229/eda722ce2c
SVG Icon: https://www.svgrepo.com/svg/279974/gardening-plant

1 Like

Thanks. Followed in detail and is exactly as I normally do. I had same problem - icon does not show until preview. Reloaded theme, reset all defats, normally use Chrome so also tried Edge, also tried to insert your svg simply as an icon.

Same result. Colour size etc all can be changed but on visible in previw and final, not during edit. Very strange!

2 Likes

I there Im having the same problem i uploaded the svg file just like on the video and try other thing it does not work,
is not good when trying to design.
SVG files not showing on the editor page, on preview page
ONLY shows on the final rendered page.

here are some images of proof,

IT ONLY SHOW IT ON THE FINAL PAGE CAN YOU FIX IT…

Hi Luis,

thanks for reaching out and welcome to the forum!
You’re using the icon box element, right?

Unfortunately, I’m not able to reproduce the issue with Bricks 1.3.7 :thinking:

thank you my problem is solved it had something to do with my server. thank you

it will be nice to be able to have the option of adding all kinds of images in it for example if i don’t want to use SVG or other icons and instead I want to use a .webp file it will be nice.

Hi Luis,
SVGs (or an icon font) make the most sense in this case and are probably needed more than 99% of the time.

You can also simply take a container, place an image element next to a basic text or heading element and use whatever you want as an image.

Best regards,
timmse

1 Like

:rofl: it happens to me too